Arcgis Online - FeatureLayer-PopupTemplate篇

1.Popup

Popup弹出窗口通过显示信息以响应用户操作，提供了一种向ArcGIS JavaScript应用程序添加交互性的简便方法。每个View都有一个与之关联的弹出窗口。在大多数时候，弹出窗口的内容允许用户从图层（layers）和图形（graphics）访问数据属性。
虽然弹出窗口通常与图形层或要素层一起使用，但是您也可以使用显示弹出窗口以响应查询或不涉及图形或要素的某些其他操作。

Popup 官方文档

---

2.PopupTemplate

PopupTemplate格式化并定义特定Layer或Graphic的Popup的内容。当在视图中选择一个要素时，PopupTemplate允许用户访问要素属性中的值以及Arcade表达式返回的值。

PopupTemplate包含标题和内容属性，这些属性用作模板，用于将要素的属性转换为HTML表示形式。语法{fieldName}或{expression/expressionName}执行参数替换。图形上的默认行为是单击图形后显示视图的弹出窗口。此默认行为需要PopupTemplate。

PopupTemplate还允许您格式化Number和Date类型字段的值，并使用fieldInfos属性覆盖字段别名。还可以将动作添加到模板中，以使用户能够执行与功能相关的动作，例如缩放到该功能或基于功能的位置或属性执行查询。

PopupTemplate 官方文档

---

3.案例代码

首先配置好PopupTemplate对象，有两种方式配置：
（1）使用content属性直接配置

const lineTemplate = {
   title: "信息",
   content: `<div>
           <p>管点编号:{PipePointN}</p>
           <p>起点X坐标:{StartPotio}</p>
           <p>起点Y坐标:{StartPot_1}</p>
           <p>终点X坐标:{EndPotionX}</p>
           <p>终点Y坐标:{EndPotionY}</p>
           <p>起点点号:{StartPoint}</p>
           <p>终点点号:{EndPointNu}</p>
           <p>起点埋深:{StartBuryi}</p>
           <p>终点埋深:{EndBurying}</p>
           <p>起点高程:{StartAltit}</p>
           <p>终点高程:{EndAltitud}</p>
           <p>线段长度:{Shape__Length}</p>
           <p>材质:{Texture}</p>
           <p>埋设方式:{BuryingMet}</p>
           <p>线型:{LineType}</p>
           <p>管径:{PipeDiamet}</p>
           <p>建设日期:{Constructi}</p>
           <p>权属单位:{OwnershipU}</p>
           <p>使用状态:{UsageStatu}</p>
           <p>流向:{FlowDirect}</p>
           <p>所在道路:{Subordinat}</p>
           </div>`,
   actions: [{
       id: "search-upperInfo",
       image: "images/upperSearch.png",
       title: "上游管道"
   },
   {
       id: "search-lowerInfo",
       image: "images/lowerSearch.png",
       title: "下游管道"
   }]
};

显示效果：

（2）使用content属性中的fieldInfos子对象数组配置

var lineTemplate2 = {
     title: "管道数据",
     content: [{
         type: "fields",
         fieldInfos: [{
             fieldName: "PipePointN",
             label: "管点编号"
         }, {
             fieldName: "StartPotio",
             label: "起点X坐标"
             }, {
                 fieldName: "StartPot_1",
                 label: "起点Y坐标"
             }, {
                 fieldName: "EndPotionX",
                 label: "终点X坐标"
             }, {
                 fieldName: "EndPotionY",
                 label: "终点Y坐标"
             }, {
                 fieldName: "StartPotio",
                 label: "起点X坐标"
             }, {
                 fieldName: "StartPoint",
                 label: "起点点号"
             }, {
                 fieldName: "EndPointNu",
                 label: "终点点号"
             }, {
                 fieldName: "StartBuryi",
                 label: "起点埋深"
             }, {
                 fieldName: "EndBurying",
                 label: "终点埋深"
             }, {
                 fieldName: "StartAltit",
                 label: "起点高程"
             }, {
                 fieldName: "EndAltitud",
                 label: "终点高程"
             }, {
                 fieldName: "Shape__Length",
                 label: "线段长度"
             }, {
                 fieldName: "Texture",
                 label: "材质"
             }, {
                 fieldName: "BuryingMet",
                 label: "埋设方式"
             }, {
                 fieldName: "LineType",
                 label: "线型"
             }, {
                 fieldName: "PipeDiamet",
                 label: "管径"
             }, {
                 fieldName: "Constructi",
                 label: "建设日期"
             }, {
                 fieldName: "OwnershipU",
                 label: "权属单位"
             }, {
                 fieldName: "UsageStatu",
                 label: "使用状态"
             }, {
                 fieldName: "FlowDirect",
                 label: "流向"
             }, {
                 fieldName: "Subordinat",
                 label: "所在道路"
             }]
     }],
     actions: [{
         id: "search-upperInfo",
         image: "images/upperSearch.png",
         title: "上游管道"
     },
     {
         id: "search-lowerInfo",
         image: "images/lowerSearch.png",
         title: "下游管道"
     }]
 }

显示效果：

FeatureLayer配置代码如下：

 var linelayer1 = new FeatureLayer({
    url: `此处填写Service URL/对应图层的索引`,
    renderer: ysLineRenderer,
    popupTemplate: lineTemplate2,
    labelingInfo: [ysLineDirectionClass, ysAttributeClass],
    title: "雨水管道"
});

设置FeatureLayer对象的popupTemplate属性即可。

本案例代码比较简单，需要自定义设置模板的特殊样式、内容的同学，可以细看对应的官方文档进行学习。