ArcGIS JS API：如何获取Sketch Widget捕捉到的点坐标？

需求说明 #

使用ArcGIS Maps SDK for JavaScript的Sketch Widget，以Point图形图层作为要素捕捉源，当光标悬停并捕捉到该图层的点时，需要直接获取被捕捉点的坐标。当前代码中，捕捉到点时显示的仍是光标移动的实时坐标，需修改为显示捕捉点的固定坐标。

实现方案 #

核心思路是监听Sketch组件的update事件——在绘制过程中（包括捕捉到要素时），该事件会返回当前绘制图形的最新几何信息，其中包含捕捉后的坐标。

具体步骤：

• 移除原有的pointer-move监听逻辑，改用Sketch的update事件更新坐标显示
• 在update事件回调中，从event.graphic.geometry提取捕捉后的坐标
• 保留原有绘制状态控制逻辑，确保仅在绘制激活时处理坐标更新

修改后的完整代码 #

<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Sketch widget | Sample | ArcGIS Maps SDK for JavaScript 4.26</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    #hover-box{
      background-color: white;
      left: 15px;
      position: absolute;
      min-width: 200px;
      top: 100px;     
      display:flex;
      flex-direction: column;
      padding: 5px;
    }
    #draw-btn{
      height: 50px;
      width: 100px;
    }
  </style>
  <script src="https://js.arcgis.com/4.26/"></script>
  <script>
    require([
      "esri/widgets/Sketch",
      "esri/Map",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
      "esri/views/MapView"
    ], (Sketch, Map, Graphic, GraphicsLayer, MapView) => {
      let drawingActive = false;
      let xElement = document.getElementById("hover-x");
      let yElement = document.getElementById("hover-y");
  
      const drawLayer = new GraphicsLayer();
      const graphicsLayer = new GraphicsLayer();
      
      const map = new Map({
        basemap: "topo-vector",
        layers: [drawLayer, graphicsLayer]
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 15,
        center: [-118.80657463861, 34.0005930608889]
      });
         
      const point = { //Create a point
        type: "point",
        longitude: -118.80657463861,
        latitude: 34.0005930608889
      };
  
      const pointGraphic = new Graphic({
        geometry: point,
      });
      graphicsLayer.add(pointGraphic);   
  
      let sketch;
      view.when(() => {
        sketch = new Sketch({
          layer: drawLayer,
          view: view,
          creationMode: "single",
          visibleElements: {
            createTools: {
              point: true,
              polyline: false,
              polygon: false,
              rectangle: false,
              circle: false,
            },
            settingsMenu: false,
            undoRedoMenu: false,
            selectionTools: {
              'rectangle-selection': false,
              'lasso-selection': false,
            }
          },
          snappingOptions: {
            enabled: true,
            distance: 200,
            featureSources: [{enabled: true, layer: graphicsLayer}]
          }
        });
        
        // 监听Sketch的update事件，获取捕捉后的坐标
        sketch.on('update', (event) => {
          if (drawingActive && event.state === "active") {
            const capturedPoint = event.graphic.geometry;
            xElement.innerHTML = `Long: ${capturedPoint.longitude.toFixed(6)}`;
            yElement.innerHTML = `Lat: ${capturedPoint.latitude.toFixed(6)}`;
          }
        });
        
        sketch.on('create', () => {
          drawingActive = false;
          sketch.cancel();
        })
        
        view.ui.add(document.getElementById('draw-btn'), "top-right");
      });
  
     const element = document.getElementById("draw-btn");
     element.addEventListener("click", addPoint);
  
     function addPoint(){
       if (drawingActive) sketch.cancel();
       else {
         drawingActive = true;
         sketch.create("point");
         // 初始化显示
         xElement.innerHTML = `Long: `;
         yElement.innerHTML = `Lat: `;
       }
     }
});
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <button id="draw-btn">Draw Point</button>
  <div id="hover-box">
    <b>捕捉点坐标</b>
    <p id="hover-y">Lat: </p>
    <p id="hover-x">Long: </p>   
  </div>
</body>
</html>

代码说明 #

• 移除了原有的pointer-move监听及相关函数，改用Sketch的update事件处理坐标更新
• 在update事件中，通过event.graphic.geometry获取捕捉后的坐标，当捕捉生效时，该坐标即为目标点的坐标
• 添加了坐标小数位数格式化（toFixed(6)），优化显示效果
• 修改hover-box标题为“捕捉点坐标”，贴合功能定位

内容的提问来源于stack exchange，提问作者elisrae