zoukankan      html  css  js  c++  java
  • arcgis api中测量工具的使用

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

    <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() {
          
  • 相关阅读:
    python中unicode、utf8、gbk等编码问题
    git常用操作
    python List&Set&Dict交集、并集、差集
    VIM的高级使用
    Logger级别和输出的地方
    Eclipse+pydev 常用快捷键
    架构相关领域的学习材料(转)
    深入浅出之正则表达式(一)
    深入浅出之正则表达式(二)
    软件project总结
  • 原文地址:https://www.cnblogs.com/1gaoyu/p/15129447.html
Copyright © 2011-2022 走看看