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

Question

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

所以，现在我想要的是当用户点击一个特定的精确点时，我想显示一个弹出模板并显示一个包含其地址、经度、纬度等的 table。我想动态遍历我已经拥有的位置 objects 数组 (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 Invalid property value, value needs to be one of 'esri.popup.content.MediaContent', 'esri.popup.content.CustomContent', 'esri.popup.content.TextContent', 'esri.popup.content.AttachmentsContent', 'esri.popup.content.FieldsContent', or a plain object that can autocast (having .type = 'media', 'custom', 'text', 'attachments', 'fields')

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

Answer 1

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

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

字段内容，生成一个字段：值 table，您可以在其中设置显示哪些字段以及如何使用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 (also from the documentation) or this 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;
    }
})

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

Issue when displaying a Popup window in the ESRI Map

javascript

esri

esri-arc-engine

arcgis-js-api

esri-maps