Angular中ArcGIS JS如何动态获取要素图层全属性配置PopupTemplate

可以实现动态获取要素图层所有属性配置PopupTemplate，不需要手动硬编码全部字段。你当前代码无法生效的核心原因是没有等待图层元数据异步加载完成就访问fields属性，同时存在执行顺序和API调用错误。

你现有代码的问题 #

• 执行顺序错误：fieldInfos未定义就提前赋值给了template
• 未等待图层加载：FeatureLayer实例化后元数据（含字段列表）是异步拉取的，直接访问layer.fields会拿到空值/undefined
• API调用错误：4.x版本FeatureLayer没有内置map方法，layer.fields是标准JS数组，直接用数组原生map方法遍历即可

修正后的TS代码 #

// 1. 先实例化要素图层，暂时不配置popupTemplate
const layer = new FeatureLayer({
  url: this.featureLayerUrl,
  visible: true
});

// 2. 等待图层加载完成后再动态配置弹出框
layer.when(() => {
  // 3. 遍历图层自带的fields生成fieldInfos
  const fieldInfos = layer.fields.map(field => ({
    fieldName: field.name,
    label: field.alias,
    visible: true
  }));

  // 4. 配置PopupTemplate
  const template = {
    title: "{NAME} in {COUNTY}",
    content: null, 
    fieldInfos: fieldInfos
  };

  // 5. 给图层赋值popupTemplate
  layer.popupTemplate = template;
}, (error) => {
  console.error("图层加载失败：", error);
});

// 6. 把图层添加到webmap
webmap.add(layer);

版本兼容优化说明 #

如果你使用的ArcGIS JS API版本≥4.11，可直接将popupTemplate.content设为"auto"，API会自动根据图层所有字段生成弹出框内容，无需手动遍历生成fieldInfos，简化代码如下：

layer.when(() => {
  layer.popupTemplate = {
    title: "{NAME} in {COUNTY}",
    content: "auto"
  }
})

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