Skip to main content

2D measurement

Two-dimensional surface measurement and distance measurement functions.

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.0.0/mapmost-webgl-draw.css">
    <script src="https://delivery.mapmost.com/cdn/sdk/plugins/mapmost-webgl-draw/v1.0.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>
    let map = new mapmost.Map({
        container: 'map',
        style: "<your style url>", 
        center: [120.6939738947031, 31.3206711916433],
        zoom: 12,
        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); // Calculate the geometric center of the geometric figure

                    let area = Utils.area(coordinates)
                    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.geometry.coordinates)
                        .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)

                    // 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>