0

目前，在我将位置详细信息（纬度、经度等）传递给 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'、'fields ')

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

4

1 回答 1

1

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

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

  • 字段内容，生成字段：值表，您可以在其中设置将出现哪些字段以及如何使用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 文档，也就是说，creator函数的参数是 type 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;
    }
})

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

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

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

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;
    }
})
于 2021-11-24T21:19:45.197 回答