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() {
          
  • 相关阅读:
    Java总结IO篇之字符流
    基于Socket的网络数据传输测试(Java+Android+腾讯云)
    4-AI--Activity跳转动画
    06--图解数据结构之递归小例子
    Java容器源码攻坚战--第三战:HashMap(一)
    Java容器源码攻坚战--第二战:ArrayList
    charles mock方法及问题
    两道SQL题目
    python3中的编解码
    Jmeter之逻辑控制器(Logic Controller)
  • 原文地址:https://www.cnblogs.com/1gaoyu/p/15129447.html
Copyright © 2011-2022 走看看