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() {
          
  • 相关阅读:
    ES之2:海量数据处理之倒排索引
    架构-伸缩性
    ES之3:elasticsearch优化收集
    架构-扩展性
    关于静态方法与非静态方法的执行效率
    架构师
    拖库 洗库 撞库
    SOA架构设计经验分享—架构、职责、数据一致性
    mysql索引之五:多列索引
    mysql索引之四:复合索引之最左前缀原理,索引选择性,索引优化策略之前缀索引
  • 原文地址:https://www.cnblogs.com/1gaoyu/p/15129447.html
Copyright © 2011-2022 走看看