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

Posted 2023-02-21

【中文标题】在 ESRI 地图中显示弹出窗口时出现问题

【英文标题】：Issue when displaying a Popup window in the ESRI Map

【发布时间】：2022-01-03 03:31:21

【问题描述】：

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

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

【参考方案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;
    
)

【讨论】：

谢谢，@cabesuon。 a.href = event.graphic.attributes.url; 在这里你所说的图形是什么意思？我收到"Property 'graphic' does not exist on type 'Graphic'.ts(2339)"

的错误

嗨@HarshaW，我已经更新了答案，为您的问题提供解决方案，如果清楚，请告诉我。

工作。谢谢。

对这个问题有任何想法吗？ ***.com/questions/70151194/…