Skip to main content

load3Dtree model

Constructed based on coordinate points and related attribute information3Dtree model.

show
   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8"/>
       <title>load3Dtree 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%;
           }
  
            .btn-group {
                   position: absolute;
                   top: 20px;
                   left: 20px;
               }
       </style>
       <script src="https://delivery.mapmost.com/cdn/sdk/lite/v9.1.0/mapmost-lite-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: '***', // Authorization code,This parameter must be added
     });
   
    map.on('load', function () {
        const sourceId = "tree-source"
        map.addSource(sourceId, {
            type: 'geojson',
            data: '../example_data/treedata.geojson', // Point layer data, required attributesidandsize，insizeInclude"S"、"L"、"M"Represents small, medium and large tree models, such as"properties": { "id": 215, "size": "S" }
        })
        map.add3dTreesLayer({
            source: sourceId,
            id: 'trees',
            // levels:[15, 17.5, 18.5],//According to data attributessizecontrol in differentzoomThe visible hierarchical array under3，default [15, 17.5, 18.5]。
            // trunkColor: [219, 195, 154],//Trunk color array[r,g,b]，default [219, 195, 154]。
            // crownColor: [175, 216, 142],//Crown color array[r,g,b]，default [175, 216, 142]。
            crownMesh: 'crown.drc',//tree crown modelurl，`drc`Format.
        })
    })

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