Skip to main content

3DGS model three-dimensional measurement

The 3D measurement plug-in supports 3DGS data distance and area measurement functions.

showshow
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Three-dimensional measurement of 3DGS model</title>
    <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>
    <script src="https://delivery.mapmost.com/cdn/sdk/plugins/mapmost-webgl-measure3D/v1.3.0/mapmost-webgl-measure3D.js"></script>
  </head>

  <body>
    <div id="map"></div>
    <div class="btn-group">
      <button onclick="distance()">Distance measurement</button>
      <button onclick="area()">Area Measurement</button>
      <button onclick="clearMeas()">Clear measurements</button>
    </div>
    <script>
      var map = new mapmost.Map({
        style: '<your style url>',
        container: 'map',
        center: [120.78575270115562, 31.41174980621166],
        zoom: 16.9,
        bearing: -9.598,
        pitch: 52.989,
        sky: 'light',
        userId:'***', // Authorization code
      });

      let meas;
      map.on('load', function () {
        //Add 3DGS data
        map.addLayer({
          id: 'gs-3d-layer',
          type: '3DGS',
          url: './building.splat',
          coord: [121.6857884, 30.6702618, -30]
        });
        meas = new Measure3D(map);
      });

      function distance() {
        // distance measurement
        meas.setType("distance");
      }

      function area() {
        // area measurement
        meas.setType("area");
      }

      function clearMeas() {
        // Clear drawing
        meas.clear();
      }
    </script>
  </body>
</html>