ArcGIS-JS-API - 弹出模板中的自定义内容不显示任何内容（Angular 11）

Posted 2023-02-21

【中文标题】ArcGIS-JS-API - 弹出模板中的自定义内容不显示任何内容（Angular 11）

【英文标题】：ArcGIS-JS-API - Custom Content in Popup Template is display nothing (Angular 11)

【发布时间】：2022-01-15 15:23:33

【问题描述】：

我想在 arcgis esri 地图的弹出模板底部显示一个超链接。我添加了我尝试过的代码，但超链接未显示在弹出模板中。仅显示字段表。请你看看这段代码，如果我遗漏了什么，请告诉我。

.ts 文件

const popUpTemplate = new PopupTemplate(
  title: "name",
  content: [
      
          type: "fields",
          fieldInfos: [
              
                  fieldName: "PhysicianName",
                  label: "Physician Name"
              ,
              
                  fieldName: "Practice",
                  label: "Primary Practise",

              ,
          ]
      ,
    new CustomContent(
      outFields: ["*"],
      creator: (graphic) => 
          const a = document.createElement("a");
          a.href = "https://www.youtube.com/";
          a.target = "_blank";
          a.innerText = graphic.attributes.PhysicianName;
          return a;
      
  )
  ],
  outFields: ["*"]
);
   
    const myLayer = new FeatureLayer(
    source: physicianData.map((d,i)=>(
      
          geometry: new Point(
            longitude: d.Longitude,
            latitude: d.Latitude
          ),
          attributes: 
            ObjectID: i,
            name : d.PhysicianName,
            PhysicianName : d.PhysicianName,
            Practice : d.Practice,
            ...d
          
      
    )),
    fields: [
      name: "ObjectID",
      alias: "ObjectID",
      type: "oid"
    , 
    
      name: "name",
      alias: "Physician : ",
      type: "string"
    ,
    
      name: "PhysicianName",
      alias: "Physician Name",
      type: "string"
    ,
    
      name: "Practice",
      alias: "Practice",
      type: "string"
    ,
   ],
  objectIdField: 'ObjectID',
  geometryType: "point",
  popupTemplate : popUpTemplate,
);

.html 文件

    <div #mapViewNode></div>

【问题讨论】：

请创建一个stackblitz demo以便我们调试，这个问题也可能是因为CSS。请参阅：How to create a Minimal, Reproducible example。

嗨@VimalPatel。我发现了问题，它与 graphic.attributes 为空。谁能帮助解释为什么该值没有出现在图形对象中？

不调试它很难回答。请求您创建一个 stackblitz 演示以进行故障排除。

【参考方案1】：

我认为您的问题是您需要定义图层的字段。

如果您正在使用客户端图形和FeatureLayer，则需要设置：

source，图形集合（几何+属性） objectIdField，要识别图形的字段，输入oid (*) fields，图形属性各字段的名称、别名、类型

在你的情况下，只是通过推断可能的属性，它应该是这样的

const dataFeedLayer = new FeatureLayer(
    source: locationData.map((d,i)=>(
        
            geometry: new Point(
                longitude: d.longitude,
                latitude: d.latitude
            ),
            attributes: 
                ObjectID: i,
                ...d
            
        
    )),
    objectIdField: 'ObjectID',
    popupTemplate : popUpTemplate,
    fields: [
        
            name: "ObjectID",
            alias: "ID",
            type: "oid"
        ,
        
            name: "PhysicianName",
            alias: "Physician Name",
            type: "string"
        ,
        
            name: "PrimarySpecialty",
            alias: "Primary Specialty",
            type: "string"
        ,
        
            name: "url",
            alias: "Url",
            type: "string"
        
    ]
);

从客户端功能创建 FeatureLayer 时，此属性应与源属性一起在构造函数中设置。 objectId 字段也必须在此数组或 objectIdField 属性中设置。

来自ArcGIS JS API - FeatureLayer fields

【讨论】：

嗨@cabesuon。我尝试了您的建议，但对 graphic.attributes.PhysicianName 没有任何价值。你对此有什么想法吗？

能否打印CustomContent.creator方法的参数graphic以及参数的attributes属性？

您能否参考我在上一个问题中提到的这些控制台日志。这也是它在这里打印图形和属性的方式。 ***.com/questions/70330541/…

嗨@KalanaTebel，抱歉耽搁了......检查我几周前制作的this answer

在this related question 我发布了完整的角度示例