Skip to main content

2D measurement

Supports the two-dimensional surface measurement and distance measurement functions of the Suzhou 2000 coordinate system.

show
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>
  <title>Measurement</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      height: 100vh;
      width: 100vw;
    }
  </style>
</head>

<body>
  <style>
    .button_wrapper {
      display: flex;
      position: absolute;
      z-index: 999;
      top: 20px;
      left: 20px;
    }

    button {
      margin-right: 10px;
    }

    button:hover {
      cursor: pointer;
    }

    .mapmostgl-popup-tip {
      border-top-color: #155b72 !important;
    }

    .mapmostgl-popup-content {
      background-color: #155b72;
      color: #fff;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      padding: 10px 30px;
    }

    .mapmostgl-popup-content button {
      margin-right: 0;
      color: #fff;
    }

    .mapmostgl-popup-content button:hover {
      background-color: transparent;
    }
  </style>
    <link rel="stylesheet" href="https://delivery.mapmost.com/cdn/sdk/plugins/mapmost-webgl-draw/v1.1.0/mapmost-webgl-draw.css">
    <script src="https://delivery.mapmost.com/cdn/sdk/plugins/mapmost-webgl-draw/v1.1.0/mapmost-webgl-draw.js"></script>
  <div class="button_wrapper">
    <button>Screen</button>
    <button>Draw a line</button>
    <button>Delete</button>
  </div>
  <div id="map"></div>
  <script>

      // Suzhou 2000 rpm SDK coordinates
      let center = mapmost.Convert.fromDefinedProj([342171.097900000400841, 665836.627800000831485]);

      // Map initialization
      let map = new mapmost.Map({
        container: 'map', // map container id
        style: '<your style url>', // sz2000 style file
        center: center, //Coordinates of the initial center point of the map
        zoom: 13, // Initial zoom level of the map
        pitch: 60, // Map initial pitch angle
        bearing: 0, // initial azimuth of the map
        userId:'***', // Authorization code
      });

      map.on('load', function () {

          //Add MapmostDraw plug-in
          let draw = new MapmostDraw({
              displayControlsDefault: false,
              polygon: true,
              line_string: true,
              trash: true,
          });

          map.addControl(draw, 'top-left');
          map.on('draw.create', updateDraw);
          map.on('draw.delete', updateDraw);
          map.on('draw.update', updateDraw);
          // Turn off the editing function after drawing graphics
          let featureId = null
          map.on('draw.modechange', holdMode);
          map.on('draw.selectionchange', holdMode);

          function holdMode(e) {
              draw.changeMode('simple_select', {featureId: featureId})
          }

          let allPopups = [];

          let Utils = mapmost.Utils;

          // measure
          function updateDraw(e) {
              let data = draw.getAll();
              let currentMode = draw.getMode();

              // Calculate area
              if (currentMode === 'draw_polygon') {
                  if (data.features.length > 0) {
                      featureId = data.features[0].id

                      let coordinates = data.features[data.features.length - 1].geometry.coordinates; // Get the coordinates of the draw path point
                      let center = Utils.centerOfMass(coordinates).geometry.coordinates; // Calculate the geometric center of the geometric figure

                      let area = Utils.area(coordinates,'SZ2000')
                      let area1 = Math.round(area * 100) / 100;

                      //Custom popup
                      let div = window.document.createElement('div');
                      div.innerHTML = area1 + '&nbspm²';
                      let popup = new mapmost.Popup({closeOnClick: false, className: 'popup'})
                          .setLngLat(center)
                          .setDOMContent(div)
                          .addTo(map);

                      allPopups.push(popup);
                  }

              } else if (currentMode === 'draw_line_string') {

                  // Calculate length
                  if (data.features.length > 0) {
                      featureId = data.features[0].id
                      let coordinates = data.features[data.features.length - 1].geometry.coordinates; // Get the coordinates of the draw path point
                      let center = coordinates[coordinates.length - 1];

                      let length = Utils.distance(coordinates,'SZ2000')

                      // Keep two decimal places
                      let length1 = Math.round(length * 100) / 100;

                      //Custom popup
                      let div = window.document.createElement('div');
                      div.innerHTML = length1 + '&nbsp m';
                      let popup = new mapmost.Popup({closeOnClick: false, className: 'popup'})
                          .setLngLat(center)
                          .setDOMContent(div)
                          .addTo(map);

                      allPopups.push(popup);
                  }
              }
          }

          //Paint
          document.querySelectorAll("button")[0].addEventListener('click', function () {
              deleteAll()
              draw.changeMode('draw_polygon', {})
          });

          // draw lines
          document.querySelectorAll("button")[1].addEventListener('click', function () {
              deleteAll()
              draw.changeMode('draw_line_string', {})
          });

          // delete
          document.querySelectorAll("button")[2].addEventListener('click', function () {
              deleteAll()
          });

          function deleteAll() {
              draw.deleteAll(); // Clear all elements
              featureId = null
              // Delete redundant popups
              allPopups.forEach(item => item.remove());
          }
      });
    
  </script>
</body>

</html>