ArcGIS API for JavaScript 4.2学习笔记[13] Layer的弹窗（PopupTemplate）

ArcGIS API for JavaScript 4.x：
从3.x版本升级到4.x，变化比较大，学习、开发体验也会不一样。

本系列是转载至博客园原创作者-秋意正寒-致敬!

原地址：https://www.cnblogs.com/onsummer/p/6399632.html

---

上一篇文章中讲到Popup是一个弹窗，是View对象的默认内置弹窗，并且在View对象构造时就顺便构造了。

那么这个PopupTemplate是什么呢？

后半截单词Template是“模板”的意思，我最初理解就是可以定制的弹窗。仔细阅读API ref后给出更为准确的定义：

PopupTemplate是一个针对Layer和Graphic的弹窗，它与Popup最大的不同的是作用对象不同（Popup主要是针对View）。它服务的对象是Layer中的要素类或者Graphic，它能从要素中获取字段，并用HTML的语法显示到弹窗的content属性中去。

大白话说，PopupTemplate定制程度更高，很多时候复杂的数据显示都要依靠PopupTemplate而不是简单的Popup。

查询得知，PopupTemplate的属性比较少，但是保留了Popup的重要的属性，如

actions、content、title

惊奇的发现，PopupTemplate的title和content有别于Popup的title和content，前者的title和content除了string类型外，还可以是一个方法，content更提供了Object[]的支持。这点很重要，对于后面要介绍的PopupTemplate with Function有关，这里先打个招呼，以后会详细介绍的。

在这个例子中，数据是基于FeatureLayer的。不认识FeatureLayer无妨，就当是桌面版的FeatureLayer即可，拥有简单的要素类和字段等。

---

给出引用

require(
    [
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "dojo/domReady!"
    ],
    function(Map, MapView, FeatureLayer){}
);

函数参数

function(Map, MapView, FeatureLayer){
    var map  = new Map({...});
    var view = new MapView({...});
    var template = {...};
    var featureLayer = new FeatureLayer({...});
    map.add(featureLayer);
}

抽出主干内容后，这个示例代码就显得十分简洁：

1. 照例实例化Map和MapView

2. var一个template匿名对象，这个就是PopupTemplate对象

3. new一个FeatureLayer

4. 把featureLayer添加到map中

最关键的部分就是template这个匿名对象的内容和featureLayer这个对象如何与template绑定了，其他都不是难事。

template对象是怎么组织的呢？

仍然是抽取主干，看看template有些什么：

var template = {
    title: "Marriage in NY, Zip Code: {ZIP}",
    content: "...",
    fieldInfos: [{...},{...},{...}]
}

显而易见，就是PopupTemplate的几个关键属性：title、content、fieldInfos

前两个是标题和内容。在content里，就用HTML的语法显示了“template”的威力：

content: "<p>As of 2015, <b>{MARRIEDRATE}%</b> of the population in this zip code is married.</p>" +
   "<ul><li>{MARRIED_CY} people are married</li>" +
   "<li>{NEVMARR_CY} have never married</li>" +
   "<li>{DIVORCD_CY} are divorced</li></ul>"

熟悉html语法的同学一定不陌生这几个标签是什么含义。但是——

{MARRIEDRATE}、{NEVMARR_CY}、{DIVORCD_CY}还有上面title的{ZIP}是什么鬼？

原来，这个就是featureLayer的各个字段名，当弹窗的时候，对应的字段值就会替换这个大括号。

那么fieldInfo里的Object数组又是什么？

fieldInfos: [
    {
      fieldName: "MARRIED_CY",
      format: {
        digitSeparator: true, 
        places: 0 
      }
    }, 
    {
      fieldName: "NEVMARR_CY",
      format: {//同上}
    },
    {
      fieldName: "DIVORCD_CY",
      format: {//同上}
    }
]

这里的//同上是完全相同的意思，为了省略就没有再写一次。

看得出，每一个Object里都含有fieldName，看来是和featureLayer的字段的字段名是对应的了。

而format，即格式，内含输出到弹窗的数字格式，其中digitSeparator就是分隔符，如这样的数字“10,000,000”，逗号就是分隔符；places就是小数位数。

所以这个fieldInfo也是描述数据及其格式的一个属性。

那么，template这个PopupTemplate对象（匿名的）如何与featureLayer绑定呢？

弹窗与要素图层绑定

其实，featureLayer里有一个属性，叫popupTemplate。这就很容易懂了吧？上代码：

var featureLayer = new FeatureLayer({
  url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0",
  outFields: ["*"],
  popupTemplate: template
});

其他什么的先不管，featureLayer这个对象绑定PopupTemplate的方法就是将template对象之间赋值给featureLayer的popupTemplate属性。

好了，我们来看看结果：

结果很明显了，刚刚设置的所有格式都在弹窗上有对应的显示。

MapView中多了一层矢量的图层，这是featureLayer。（看得出ESRI对矢量图形的描边算法还不是很好，尖锐的地方处理的不如桌面版的好，应该是缓冲区算法出的毛病）

---

总结一下。

给特定的要素图层或者图形设置定制好的弹窗步骤如下：

1. 实例化map和view对象

2. 创建PopupTemplate对象，可以匿名创建也可以new创建

3. 创建featureLayer时在构造函数中把popupTemplate属性赋值即可。

4. map中添加featureLayer

over~！