跳到主要内容
版本：9.1.0

加载3D树模型

根据坐标点位及相关属性信息构建3D树模型。

show
   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8"/>
       <title>加载3D树模型</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%;
           }
  
            .btn-group {
                   position: absolute;
                   top: 20px;
                   left: 20px;
               }
       </style>
       <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.1.0/mapmost-webgl-min.js"></script>
   </head>
   <body>
   <div id="map"></div>
   <script>
      var map = new mapmost.Map({
       container: 'map',  
       style: "<your style url>", 
       center: [120.71814503922974,31.32151255758893], 
       zoom: 16, 
       pitch: 60,
       userId: '***', // 授权码  
     });
   
    map.on('load', function () {
        const sourceId = "tree-source"
        map.addSource(sourceId, {
            type: 'geojson',
            data: '../example_data/treedata.geojson', // 点图层数据，必须属性 id 和 size，其中 size 包含 "S"、"L"、"M" 代表树模型的小、中、大，如 "properties": { "id": 215, "size": "S" }
        })
        map.addLayer({
            source: sourceId,
            id: 'trees',
            type:'tree',
            // levels:[15, 17.5, 18.5], // 根据数据属性 size 控制在不同 zoom 下的可见层级数组，数组长度为 3，默认 [15, 17.5, 18.5]。
            // trunkColor: [219, 195, 154], // 树干颜色数组 [r,g,b]，默认 [219, 195, 154]。
            // crownColor: [175, 216, 142], // 树冠颜色数组 [r,g,b]，默认 [175, 216, 142]。
            crownMesh: 'crown.drc', // 树冠模型的 url，`drc` 格式。
        })
    })

    function removeLayer() {
        map.removeLayer("trees")
    }
   </script>
   </body>
   </html>