Skip to main content

Flatten analysis

It supports flattening analysis of 3D models and tilted models. The model requires its own axis Y axis to be upward, which can be adjusted through software such as Blender.

show
   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8"/>
       <title>Flatten analysis</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>
    <div class="btn-group">
        <button onclick="allFlatten()">Flatten all</button>
        <button onclick="partFlatten()">Flat area</button>
        <button onclick="remove()">Clear flattening</button>
    </div>
   <script>
      var map = new mapmost.Map({
       container: 'map',  
       style: "<your style url>", 
       center: [120.7497180851966,31.30737065488684], 
       zoom: 18, 
       userId: '***', // Authorization code
     });

    let analysis;
    map.on('load', function () {

       map.addLayer({
          id: 'tile-3d-layer',
          type: '3DTiles',
          data: '<your 3DTiles url>',
        });

        analysis = new mapmost.FlattenAnalysis(map.getLayer('tile-3d-layer'));

    })

    // Flatten all areas
    function allFlatten() {
        analysis.analyse({ height: 3 });
    }

    // Flatten some areas
    function partFlatten() {
        let polygon = [ 
          [120.74949064445497, 31.307147554202416, 0],
          [120.74994428630578, 31.307136373753124, 0],
          [120.74996754999182, 31.306815866978482, 0],
          [120.74950809221758, 31.306810897872666, 0]
        ];

        analysis.analyse({
          height: 3, // The final height of the flattened model
          polygons: [polygon], // model flattening coordinate range
        });
    }

    // clear
    function remove() {
        analysis.clear()
    }
    
   </script>
   </body>
   </html>