ArcGIS JS API使用Sketch工具绘图后获取顶点坐标及报错求解

获取Sketch绘制图形的顶点坐标 #

当Sketch组件的create事件触发且e.state为complete时，可直接从事件对象的e.graphic.geometry属性拿到绘制完成的几何实例，不同几何类型的顶点获取方式如下：

• 点（Point）：直接读取geometry.x、geometry.y获取单顶点坐标
• 折线（Polyline）：通过geometry.paths属性获取所有路径的顶点嵌套数组
• 面（Polygon）：通过geometry.rings属性获取所有面环的顶点嵌套数组
  如果不需要做坐标投影转换，以上属性直接返回的就是当前视图坐标系下的所有顶点坐标。

解决webMercatorUtils.webMercatorToGeographic is not a function报错 #

该报错的核心原因是webMercatorUtils工具类的引用或加载方式错误，对应修复方案如下：

1. 确认导入路径正确 #

ArcGIS API for JavaScript 4.x版本的webMercatorUtils已经迁移到esri/geometry/support路径下，不要使用3.x版本的旧路径，正确导入写法：

// AMD加载方式
require(["esri/geometry/support/webMercatorUtils"], (webMercatorUtils) => {
  // 所有用到webMercatorUtils的逻辑都要写在加载回调内，确保工具类已加载完成
});

// ES模块import方式（@arcgis/core包）
import * as webMercatorUtils from "@arcgis/core/geometry/support/webMercatorUtils";

2. 修正调用逻辑 #

webMercatorToGeographic方法返回的是转换后的WGS84坐标系几何实例，你可以根据几何类型读取对应顶点属性，完整正确的代码示例：

sketch.on("create", (e: __esri.SketchCreateEvent) => {
  if (e.state === "complete") {
    // 先判断是否支持投影转换，避免非墨卡托坐标转换报错
    if (webMercatorUtils.canProject(e.graphic.geometry, { wkid: 4326 })) {
      const geoGeom = webMercatorUtils.webMercatorToGeographic(e.graphic.geometry) as __esri.Polygon;
      // 面图形直接取rings就是经纬度格式的顶点数组
      this.rings = geoGeom.rings;
    }
  }
});

3. 其他排查点 #

• 确认调用webMercatorToGeographic时，webMercatorUtils已经完成加载，不要在加载完成前提前调用
• 如果是通过window全局挂载的方式使用API，确认webMercatorUtils已经正确挂载到全局对象上

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