arcgis js 4.x 点击测距

在ArcGIS JavaScript 4.x 中，点击测距（Click-to-measure）是一种交互式功能，允许用户通过单击地图上的两点来获取它们之间的距离。它通常集成在地图控制组件中，如`esri/dijit/MapNav`, 或者可以自定义事件处理程序来实现。

以下是基本步骤：

1. 导入必要的库：首先需要引入`esri/graphic`和`esri/symbol`用于创建点图形，以及`esri/tasks/ MeasureTask`进行测量计算。

import { Map, GraphicsLayer, Graphic, Symbol } from "esri/WebMap";
import { MeasureTask } from "esri/tasks/Measurement";

2. 创建地图并初始化测量任务：

   const map = new Map({
     // 地图配置...
   });
   const measureTask = new MeasureTask({ url: "your-measurement-service-url" });

3. 绑定地图的click事件，并在事件处理函数中进行测距操作：

   map.on("click", (event) => {
     if (!event.graphic) {
       // 如果点击的是地图背景，创建一个新的图形
       event.graphic = new Graphic(event.mapPoint);
       graphicsLayer.add(event.graphic);
     }

     // 更新第二个点，如果存在
     if (event.graphic.geometry.type === "Point") {
       const graphic2 = graphicsLayer.graphics.find((g) => g !== event.graphic);
       if (graphic2) {
         measureTask.execute({
           geometry: [event.graphic.geometry, graphic2.geometry],
           outSR: map.spatialReference,
         }, (results) => {
             console.log(results.distance);
             // 显示结果或者更新UI
         });
       }
     }
   });

   // graphicsLayer用于存储临时绘制的点
   const graphicsLayer = new GraphicsLayer();
   map.addLayer(graphicsLayer);

4. 结果处理：`measureTask.execute()` 返回一个测量结果对象，其中包含距离信息。