Skip to main content

3DGS model coordinate picking

Get the 3DGS data coordinates through the mouse click event return value e.coord.

show
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>3DGS model coordinate picking</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }

      .control-button:hover {
        background-color: rgba(128, 128, 128, 0.8);
      }

      .info {
        width: 120px;
        height: 50px;
        background: rgba(97, 93, 93, 0);
        color: #ff0000;
        border-radius: 4px;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
      }

    </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({
        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 modelLayer;
      map.on('load', function () {

        //Add 3DGS data
        map.addLayer({
          id: 'gs-3d-layer',
          type: '3DGS',
          url: './building.splat',
          coord: [121.6857884, 30.6702618, -30],
        });

        //Add 3D model layer
        let options = {
          id: 'model_id',
          type: 'model',
          funcRender: function (gl, matrix) {
            if (modelLayer) {
              modelLayer.renderMarker(gl, matrix);
            }
          },
          callback: function (group, layer) {
            modelLayer = layer;
          },
        };
        map.addLayer(options);
      });

      //Mouse click event
      map.on('click', (e) => {

        // Get the picked coordinate point
        const coor = e.coord;

        //Add marker point
        modelLayer.addPoints({
          type: 'cube',
          size: 0.4,
          color: '#00ff00',
          data: [
            {
              coordinate: coor,
            },
          ],
        });

        // add tag
        let dom = document.createElement('div');
        dom.className = 'info';
        dom.innerHTML = coor;
        modelLayer.addMarker({
          id: 'marker' + Math.random(10000),
          data: [
            {
              name: 'coord',
              element: dom,
              position: [coor[0], coor[1], coor[2] + 1],
            },
          ],
        });
      });
    </script>
  </body>
</html>