arcgis api中测量工具的使用

1gaoyu 2021-08-20 原文

首先需要定义测距、测面、清除三个按钮，用于实现功能

<span class="tool-measureArea" id="area"><span>测面</span></span><span class="tool-measuredistance" id="distance"><span>测距</span></span>
<span class="tool-clear" id="clear"><span>清除</span></span>

然后书写对应的功能函数

需要引入Measurement

import Measurement from "@arcgis/core/widgets/Measurement";

 // 添加距离、面积、清除功能***************************************************************************
      // Set the activeView to the 2D MapView
      let activeView = mapView;

      // Create new instance of the Measurement widget
      const measurement = new Measurement();

      // Set-up event handlers for buttons and click events

      const distanceButton = document.getElementById("distance");
      const areaButton = document.getElementById("area");
      const clearButton = document.getElementById("clear");

      distanceButton.addEventListener("click", function () {
        distanceMeasurement();
      });
      areaButton.addEventListener("click", function () {
        areaMeasurement();
      });
      clearButton.addEventListener("click", function () {
        clearMeasurements();
      });

      // Call the loadView() function for the initial view
      loadView();

      // The loadView() function to define the view for the widgets and div
      function loadView() {
        activeView.set({
          container: "map",
        });
        // Add the appropriate measurement UI to the bottom-right when activated
        // activeView.ui.add(measurement, "bottom-right");
        // Add the legend to the bottom left
        //   activeView.ui.add(legend, "bottom-left");
        // Set the views for the widgets
        measurement.view = activeView;
      }

      // Call the appropriate DistanceMeasurement2D or DirectLineMeasurement3D    距离测量工具
      function distanceMeasurement() {
        const type = activeView.type;
        measurement.activeTool = "distance";
        distanceButton.classList.add("active");
        areaButton.classList.remove("active");
      }

      // Call the appropriate AreaMeasurement2D or AreaMeasurement3D    面积测量工具
      function areaMeasurement() {
        measurement.activeTool = "area";
        distanceButton.classList.remove("active");
        areaButton.classList.add("active");
      }

      // Clears all measurements  清除所有测量结果
      function clearMeasurements() {