ArcGIS Javascript API 4.14弹窗字段属性无法显示问题求助

这个问题我之前升级API版本时也踩过坑，4.14版本里用函数返回DOM的方式自定义弹窗时，ArcGIS不再自动帮你解析{字段名}这类占位符了——官方设计这个函数就是让你完全掌控DOM生成逻辑，所以得自己手动获取要素的属性值来填充内容。

核心原因 #

在4.13版本中，当content是字符串时，API会自动识别并替换占位符；但升级到4.14后，如果你用函数返回DOM元素的方式，API不会再做解析工作，需要你在函数内部主动获取当前要素的属性。

修复后的代码 #

你可以修改content函数，接收API传入的参数（包含当前点击的要素信息），然后从要素的attributes里提取对应字段的值，直接拼到HTML中：

for (let i = 2; i < layers.length; i++) {
  var template = {
    title: "{Name}", // 标题仍可使用占位符，API会自动处理
    content: function(event) {
      // 获取当前点击要素的属性集合
      const attributes = event.graphic.attributes;
      var div = document.createElement("div");
      // 直接用属性值替换原占位符
      div.innerHTML = `
        <div id="popup_address">${attributes.Address}</div>
        <div class="right">
          <div href="#" id="popupRight" class="toggle">
            <p onClick="openPopupDetails(${attributes.FACILITYID})">+</p>
          </div>
        </div>
      `;
      return div;
    }
  };
  layers[i].popupTemplate = template;
}

额外注意事项 #

1. 标题兼容性：title: "{Name}"可以正常保留占位符，因为API对标题的处理逻辑和content函数不同，会自动解析。
2. XSS安全防护：如果属性值可能包含用户输入内容，建议避免直接用innerHTML拼接，改用textContent设置文本，或者对属性值进行转义，防止XSS攻击：

   // 安全设置地址文本示例
   const addressDiv = document.createElement("div");
   addressDiv.id = "popup_address";
   addressDiv.textContent = attributes.Address;
   div.appendChild(addressDiv);
   

3. 函数参数扩展：content函数的参数还包含popup（弹窗实例）等信息，你可以根据需求灵活调用，比如手动控制弹窗的位置或样式。

这样修改后，弹窗里的字段就能正确显示对应的属性值，和4.13版本的效果一致了。

内容的提问来源于stack exchange，提问作者Adam-KER