Skip to main content

Load 3DTiles with geometry compression

To load tilt data containing a geometric compression model, you need to set the dracoUrl parameter.

show
   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8"/>
       <title>Loading 3DTiles model with geometry compression</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.74449559193792, 31.30775326748954],  
       zoom: 16,  
       pitch: 60,
       userId: '***', // Authorization code
     });
   
    map.on('load', function () {
        const TILESET_URL = "<your 3dtiles url>"; 
        map.addLayer(
            {
                id: 'tile-3d-layer',
                type: "3DTiles",
                data: TILESET_URL,
                dracoUrl: "https://delivery.mapmost.com/cdn/sdk/lib/draco/", // Load the tilt data containing the geometric compression model, download the following resources to store the newly created draco folder locally and publish this folder. You need to pass in the absolute path of the draco folder when using it.
                // https://delivery.mapmost.com/cdn/sdk/lib/draco/draco_decoder.wasm
                // https://delivery.mapmost.com/cdn/sdk/lib/draco/draco_wasm_wrapper.js
                // https://delivery.mapmost.com/cdn/sdk/lib/draco/draco_decoder.js
            }
        )
    })

    function removeLayer() {
        map.removeLayer('tile-3d-layer')
    }
   </script>
   </body>
   </html>