ESRI Map点击标注点弹出Popup窗口报错的问题如何解决

问题原因 #

• 结构错误：PopupTemplate的content字段要求传入单个内容对象，或一维的内容对象数组。你通过locationData.map生成的是嵌套的二维数组[[内容1, 内容2], [内容1, 内容2]...]，不符合Esri的类型校验规则，直接触发报错。
• 字段配置错误：fieldInfos的fieldName需要填写你在FeatureLayer的fields配置中定义的字段名字符串，不是取单个位置对象的属性值。你当前代码相当于把具体的地址、经纬度数值当字段名，和你定义的addrs、lat、lon字段完全不匹配。
• 逻辑错误：PopupTemplate是整个图层通用的模板，点击标注点时会自动读取当前点的属性填充模板，不需要提前遍历所有位置数据生成多套内容。

修正方案 #

第一步：修正PopupTemplate配置 #

const popUpTemplate = new PopupTemplate({
  // 可用占位符动态读取当前点的name字段作为标题
  title: "{name}",
  // 一维数组，不要嵌套
  content: [
    {
      type: "fields",
      fieldInfos: [
        {
          // 对应FeatureLayer里定义的addrs字段
          fieldName: "addrs",
          label: "Address"
        },
        {
          // 对应FeatureLayer里定义的lat字段
          fieldName: "lat",
          label: "Latitude",
          format: {
            places: 2
          }
        },
        {
          // 对应FeatureLayer里定义的lon字段
          fieldName: "lon",
          label: "Longitude",
          format: {
            places: 2
          }
        }
      ]
    },
    new CustomContent({
      outFields: ["*"],
      creator: (event) => {
        const a = document.createElement("a");
        a.href = event.graphic.attributes.url;
        a.target = "_blank";
        a.innerText = event.graphic.attributes.url;
        return a;
      }
    })
  ]
});

第二步：对齐FeatureLayer的属性映射 #

如果你的原始数据horizonData中的属性名是address、latitude、longitude，需要在生成source的时候手动映射到你定义的字段：

const dataFeedLayer = new FeatureLayer({
 source: horizonData.map((d,i)=>(
  {
      geometry: new Point({
        longitude: d.longitude,
        latitude: d.latitude
      }),
      attributes: {
        ObjectID: i,
        name: d.name,
        addrs: d.address, // 映射到fields里定义的addrs字段
        url: d.url,
        lat: d.latitude, // 映射到fields里定义的lat字段
        lon: d.longitude // 映射到fields里定义的lon字段
      }
  }
)),
fields: [
  {
      name: "ObjectID",
      alias: "ObjectID",
      type: "oid"
  },
  {
      name: "name",
      alias: "Name",
      type: "string"
  },
  {
      name: "addrs",
      alias: "addrs",
      type: "string"
  },
  {
      name: "url",
      alias: "url",
      type: "string"
  },
  {
      name: "lat",
      alias: "Latitude",
      type: "double"
  },
  {
      name: "lon",
      alias: "Longitude",
      type: "double"
  }
],
 objectIdField: 'ObjectID',
 geometryType: "point",
 renderer: renderer,
 popupTemplate: popUpTemplate,
});

webmap.add(dataFeedLayer);

修改后即可解决类型报错问题，点击每个标注点会自动加载对应点的属性填充弹窗。

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