跳到主要内容
版本：9.1.0

二维量测

支持苏州 2000 坐标系的二维测面和测距功能。

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.1.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>画面</button>
    <button>画线</button>
    <button>删除</button>
  </div>
  <div id="map"></div>
  <script>

      // 苏州 2000 转 SDK 坐标
      let center = mapmost.Convert.fromDefinedProj([342171.097900000400841, 665836.627800000831485]);

      // 地图初始化
      let map = new mapmost.Map({
        container: 'map', // 地图容器 id
        style: '<your style url>',  // sz2000 样式文件
        center: center, // 地图初始中心点坐标
        zoom: 13, // 地图初始缩放层级
        pitch: 60,  // 地图初始俯仰角
        bearing: 0, // 地图初始方位角
        userId:'***', // 授权码
      });

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

          // 添加 MapmostDraw 插件
          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);
          // 关闭绘制图形后的编辑功能
          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;

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

              // 计算面积
              if (currentMode === 'draw_polygon') {
                  if (data.features.length > 0) {
                      featureId = data.features[0].id

                      let coordinates = data.features[data.features.length - 1].geometry.coordinates; // 获取 draw 路径点的坐标
                      let center = Utils.centerOfMass(coordinates).geometry.coordinates; // 计算几何图形的几何中心

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

                      // 自定义 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') {

                  // 计算长度
                  if (data.features.length > 0) {
                      featureId = data.features[0].id
                      let coordinates = data.features[data.features.length - 1].geometry.coordinates; // 获取 draw 路径点的坐标
                      let center = coordinates[coordinates.length - 1];

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

                      // 保留两位小数
                      let length1 = Math.round(length * 100) / 100;

                      // 自定义 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);
                  }
              }
          }

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

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

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

          function deleteAll() {
              draw.deleteAll(); // 清空全部要素
              featureId = null
              // 删除多余 popup
              allPopups.forEach(item => item.remove());
          }
      });
    
  </script>
</body>

</html>