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

1,187 5

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即可,拥有简单的要素类和字段等。


给出引用

1
2
3
4
5
6
7
8
9
require(
[
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"dojo/domReady!"
],
function(Map, MapView, FeatureLayer){}
);

函数参数

1
2
3
4
5
6
7
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有些什么:

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

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

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

1
2
3
4
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数组又是什么?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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。这就很容易懂了吧?上代码:

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

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

好了,我们来看看结果:

img

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

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


总结一下。

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

  1. 实例化map和view对象

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

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

  4. map中添加featureLayer

over~!


关注公众号

当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器