在 ESRI 地图中显示弹出窗口时出现问题

Question

目前，在我将位置详细信息（纬度、经度等）传递给 Esri 地图后，我的 Esri 地图会在 Esri 地图上将位置显示为精确点。

所以，现在我想要的是当用户点击特定的精确点时，我想显示一个弹出模板并显示一个包含其地址、经度、纬度等的表格。 我想动态迭代我已经拥有的位置对象数组（locationData）并设置popupTemplate标题，内容， feildInfo、fieldName 等

这是我所做的，我现在收到以下控制台错误。

const popUpTemplate = new PopupTemplate({
title: '',
content: locationData.map((d,i)=>(
[
  {
    type:"fields",
    fieldInfos: [
      {
          fieldName: d.address,
          label: "Address"
      },
      {
          fieldName: d.latitude,
          label: "Latitude",
          format: {
              places: 2
          }
      },
      {
          fieldName: d.longitude,
          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;
    }
 })
 ]
 ))
});



const dataFeedLayer = new FeatureLayer({
 source: horizonData.map((d,i)=>(
  {
      geometry: new Point({
        longitude: d.longitude,
        latitude: d.latitude
      }),
      attributes: {
        ObjectID: i,
        ...d
      }
  }
)),
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);

[esri.core.Accessor] Accessor#set 无效的属性值，值需要是“esri.popup.content.MediaContent”、“esri.popup.content.CustomContent”、“esri.popup.content”之一。 TextContent'、'esri.popup.content.AttachmentsContent'、'esri.popup.content.FieldsContent' 或可以自动投射的普通对象（具有 .type = 'media'、'custom'、'text'、'attachments' , '字段')

关于如何解决这个问题的任何想法。提前致谢。

Answer 1

您需要将弹出模板视为单个功能的描述符。顾名思义，是一个展示单个特征信息的模板。

这样，代码中弹出模板的正确内容应该是，

• 字段内容，生成一个field:value表，在其中设置哪些字段会出现以及如何使用FieldInfo；这里的关键是fieldName 属性，它与您在FeatureLayer 中设置的字段名称有关，

{
    type: "fields",
    fieldInfos: [
        {
            fieldName: "addrs",
            label: "Address"
        },
        {
            fieldName: "lat",
            label: "Latitude",
            format: {
                places: 2
            }
        },
        {
            fieldName: "lon",
            label: "Longitude",
            format: {
                places: 2
            }
        }
    ]
}

• 和自定义内容；在这种情况下，将 url 字段值表示为 html 锚点，

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;
    }
})

现在，对于弹出窗口的标题，您可以使用固定文本或可变文本。变量选项将取决于要素属性的值。您可以使用大括号之间的字段名称来执行此操作，例如："{name}"、"Name: {name}"、"{name} is so amazing!!!"。

恢复，弹出内容的完整定义应该是，

const popUpTemplate = new PopupTemplate({
    title: "{name}",
    content: [
        {
            type: "fields",
            fieldInfos: [
                {
                    fieldName: "addrs",
                    label: "Address"
                },
                {
                    fieldName: "lat",
                    label: "Latitude",
                    format: {
                        places: 2
                    }
                },
                {
                    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;
            }
        })
    ],
    outFields: ["*"]
});

编辑@HarshaW 评论： 基于API docs，就像你提到的那样，即creator函数的参数是Graphic，而不是{graphic:Graphic}。因此，要解决您的错误，请将 CustomContent 更改为，

new CustomContent({
    outFields: ["*"],
    creator: (graphic) => {
        const a = document.createElement("a");
        a.href = graphic.attributes.url;
        a.target = "_blank";
        a.innerText = graphic.attributes.url;
        return a;
    }
})

现在，如果您检查此example（也来自文档）或此answer，您会注意到它就像第一个解决方案。

我不知道为什么会这样，也许其他人可以给我们更多的内部信息。

与此同时，只需检查哪一个有效并使用它。如果您需要更安全的东西并且您不需要额外的检查，

new CustomContent({
    outFields: ["*"],
    creator: (eventOrGraphic) => {
        const graphic = eventOrGraphic instanceof Graphic ? eventOrGraphic : eventOrGraphic.graphic;
        const a = document.createElement("a");
        a.href = graphic.attributes.url;
        a.target = "_blank";
        a.innerText = graphic.attributes.url;
        return a;
    }
})