Skip to main content

Load thematic building-model version

Render 3D architectural thematic layers based on models and textures. This method can load large-area architectural models (smooth loading of 160,000 buildings in Nanjing has been tested). The architectural models need to be produced according to the prescribed process (please contact the Mapmost team for specific processes).

show
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>add buildings model</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
    let map = new mapmost.Map({
        container: 'map',  
        style:  "<your style url>", 
        center: [120.746213168539995, 31.305705042336399], 
        zoom: 12, 
        pitch: 60, 
        userId: '***', // Authorization code
        env3D: {
                defaultLights: false,
        }
    });

    map.on('load', function () {
        let light1 = new mapmost.AmbientLight({
            color: '#0000ff',
            intensity: 2
        });

        let light2 = new mapmost.DirectionalLight({
            color: '#ffffff',
            intensity: 0.25,
            position: [0, 8000, 10000]
        });

        map.addLight(light1)
        map.addLight(light2)

        //Building model, multiple can be added
        let models_obj = [{
            type: 'glb',
            url: "./SZYQ.glb"
        }];

        let op = {
            id: 'sipsg',
            type: 'buildings',
            images: ['./top.png', './wall_reverse.png'], // Top and wall textures
            models: models_obj,
            center: [120.7464153334825, 31.333162198642274],
        };

        map.addLayer(op);
    })
</script>
</body>
</html>