Skip to main content

README

#Load 3D tree model

Build a 3D tree model based on coordinate points and related attribute information.

show
   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8"/>
       <title>Loading 3D tree 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/webgl/v9.16.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: '***', // Authorization code
     });
   
    map.on('load', function () {
        const sourceId = "tree-source"
        map.addSource(sourceId, {
            type: 'geojson',
            data: '../example_data/treedata.geojson', // Point layer data must have attributes id and size, where size contains "S", "L", and "M" representing small, medium, and large tree models, such as "properties": { "id": 215, "size": "S" }
        })
        map.addLayer({
            source: sourceId,
            id: 'trees',
            type:'tree',
            // levels:[15, 17.5, 18.5], // Control the visible level array under different zooms according to the data attribute size. The array length is 3, and the default is [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', // The url of the crown model, in `drc` format.
        })
    })

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