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() {
          
  • 相关阅读:
    B 合约数
    Weekly Contest 80
    第十六届上海大学程序设计联赛春季赛暨上海高校金马五校赛
    2018年长沙理工大学第十三届程序设计竞赛
    通过 DDNS 解决宽带拨号 ip 变化问题
    frp 内网穿透的使用 和原理
    笔记本centos 取消 关闭盖子自动挂起
    centos7 pptp 安装
    linux 命令收集
    centos7 关闭防护墙
  • 原文地址:https://www.cnblogs.com/1gaoyu/p/15129447.html
Copyright © 2011-2022 走看看