跳到主要内容
版本：9.4.1

加载三维建筑

以3D形式呈现建筑物。

show
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>加载三维建筑</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.4.1/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.72541613154851, 31.31171803927643], 
        zoom: 14, 
        pitch:60,
        userId: '***', // 授权码
    });
    
      map.on('load', function () {
  
          map.addSource("building",{
              "type": "vector",
              "url": "<your source url>"
          })
  
          map.addLayer(  {
              "id": "buildings-high1",
              "type": "fill-extrusion",
              "source": "building",
              "source-layer": "b_buildings",
              "minzoom": 13,
              "filter": ["all", [">=", "dscs", 18]],
              "layout": {"visibility": "visible"},
              "paint": {
                  "fill-extrusion-height": ["get", "jzzgdgd"],
                  "fill-extrusion-color": {
                      "stops": [
                          [ 14.5, "rgba(252, 254, 255, 1)" ],
                          [ 16, "rgba(255, 255, 255, 1)" ]
                      ]
                  },
                  "fill-extrusion-opacity": 1
              }
          })
      })
</script>
</body>
</html>