React集成ArcGIS查询报createQuery is not a function错误

在React项目中基于ArcGIS实现地图点击查询、弹窗展示要素信息功能时，代码运行抛出未捕获的Promise类型错误：

Uncaught (in promise) TypeError: layerView.createQuery is not a function

原功能实现代码如下：

Layer.fromArcGISServerUrl("").then(function (layer) {
    map.add(layer);
    view.popup.autoOpenEnabled = false; // 禁用视图弹窗自动打开
    view.on("click", function (event) { // 监听视图点击事件
        if (event.button === 0) { // 校验为左键点击或触摸触发
            view.whenLayerView(layer).then(function (layerView) {
                const query = layerView.layer.createQuery();
                query.geometry = view.toMap(event);
                query.distance = 1;
                query.units = "meters";
                layerView.queryFeatures(query).then(
                    response => {
                        document.getElementById("infomap").innerText = JSON.stringify(response.features);
                        console.error(response);
                    },
                    err => {
                        document.getElementById("infomap").innerText = "Query returns an error, check console to see what happen!.";
                        console.error(err);
                    }
                );
            });
        }
    });
});

• 图层类型不匹配：使用通用Layer.fromArcGISServerUrl()加载图层时，接口会根据服务返回内容自动推断图层类型，如果加载的是切片图层、影像图层等不支持客户端查询的图层类型，对应的layerView实例本身就不存在createQuery、queryFeatures方法，直接调用就会抛出类型错误。
• 初始化时序问题：view.whenLayerView(layer)触发仅代表layerView实例被创建，不代表layerView内部的查询能力、渲染逻辑完成初始化，此时直接调用查询相关方法会因为方法未挂载报错。
• 逻辑缺陷：代码中传入的服务地址为空字符串，本身就无法正常加载目标图层；同时点击后直接将屏幕坐标转地图点做1米缓冲查询，命中容错率极低，很容易出现查不到要素的问题。

• 替换通用图层加载方法，直接使用支持查询的FeatureLayer类加载要素服务地址，从源头保证图层具备查询能力。
• 拿到layerView实例后，先调用layerView.when()等待实例完全初始化，同时增加方法存在性校验，避免类型不兼容导致的报错。
• 优化点击查询逻辑，优先使用view.hitTest()做屏幕要素命中检测，相比手动构造空间查询性能更高、命中精度更稳定，同时补全Promise catch逻辑，避免出现未捕获的Promise错误。

修正后的可运行代码示例：

// 注意从ArcGIS依赖中引入对应FeatureLayer模块
import FeatureLayer from "@arcgis/core/layers/FeatureLayer.js";

// 替换为你的实际要素服务地址
const queryLayer = new FeatureLayer({
  url: "你的ArcGIS Server要素服务实际访问地址"
});
map.add(queryLayer);

view.popup.autoOpenEnabled = false;
view.on("click", async (event) => {
  if (event.button !== 0) return;
  try {
    // 等待图层视图创建并完成初始化
    const layerView = await view.whenLayerView(queryLayer);
    await layerView.when();

    // 做屏幕级要素命中检测
    const hitResult = await view.hitTest(event);
    // 筛选当前目标图层的命中要素
    const matchFeatures = hitResult.results.filter(res => res.graphic.layer === queryLayer);
    if (matchFeatures.length === 0) {
      document.getElementById("infomap").innerText = "当前点击位置无查询结果";
      return;
    }
    // 输出要素属性信息
    document.getElementById("infomap").innerText = JSON.stringify(matchFeatures.map(i => i.graphic.attributes));
  } catch (err) {
    document.getElementById("infomap").innerText = "查询执行出错，请查看控制台日志";
    console.error(err);
  }
});

内容的提问来源于stack exchange，提问作者Михайло