在 ESRI Map 中顯示彈出窗口 window 時出現問題

Question

目前，在我將位置詳細信息（緯度、經度等）傳遞給 Esri Z46F3EA056CAA3126B91F3F70BEEA0 后，我的 Esri Map 將 Esri Map 上的位置顯示為精確點。

所以，現在我想要的是當用戶點擊一個特定的精確點時，我想顯示一個彈出模板並顯示一個包含其地址、經度、緯度等的表格。我想動態迭代我的位置對象數組已經有(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' 或可以自動投射的普通 object（具有.type = 'media'、'custom'、'text'、'attachments'、'fields ')

關於如何解決這個問題的任何想法。 提前致謝。

Answer 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: ["*"]
});