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

上一篇文章中讲到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~!

时间: 2024-08-05 17:55:40

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

ArcGIS API for JavaScript 4.2学习笔记[12] View的弹窗(Popup)

看本文前最好对第二章(Mapping and Views)中的Map和View类有理解. 视图类有一个属性是Popup类型的popup,查阅API知道这个就是视图的弹窗,每一个View的实例都有一个popup. 这个popup属性在View对象实例化的时候就实例化了的,即随着View的出生,它也会出生,它拥有默认的样子,它显示的文字也是默认的样式. 我们看看Popup这个类: 直接继承自Accessor,位于widgets模块下,说明Popup(弹窗)也是小部件的一种.但是为什么要单独拿出来讲呢

ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录

放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 诸君,我喜欢嫩的--呸呸呸 诸君,我喜欢3D咋了?新事物会替代旧事物不是~ ArcGIS API for JavaScript 4.2概述 AJS 4.2,即ArcGIS API for JavaScript 4.2,是美国ESRI公司针对WebGIS市场推出的.利用JavaScript和Dojo开发的一款产品,它在2016年12月发布.而AJS 4.0 beta则在一年前就发布了. 关于AJS3和AJS4选择的问题,

ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. 什么是ArcGIS API for JS?这里就不多介绍了,最关键的一点是4.x版本与3.x版本的变化,按官方的意思是重新写了底层. 笔记中规定: ArcGIS API for JavaScript简称AJS 使用CDN(即不配置本地环境)进行测试开发 其余根据需要进行修改.增删. 要将地图显示在h

ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译

内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View,加载layers,使用弹出窗口,视觉化,与使用窗口小部件.(wtf居然没有分析你想搞事情啊web除了展示难道不应该有()&&*--@) [Mapping and Views] (点击进入我写的章节详细介绍) 最基础的,知道地图和视图的区别,能使用2D和3D地图,对地图的布局有一定的了解,对地图

ArcGIS API for JavaScript 4.2学习笔记[24] 【IdentifyTask类】的使用(结合IdentifyParameters类)(第七章完结)

好吧,我都要吐了. 接连三个例子都是类似的套路,使用某个查询参数类的实例,结合对应的Task类,对返回值进行取值.显示. 这个例子是Identify识别,使用了TileLayer这种图层,数据来自Server的MapServer. 结果演示 戳不同的地方会有不同的识别结果. 我对TileLayer不是很了解,这一例仅针对有了解的同学,做一个IdentifyTask的解释. IdentifyTask/IdentifyParameter/IdentifyResult三个类 既然是一样的套路,那么先对

ArcGIS API for JavaScript 4.2学习笔记[16] 弹窗自定义功能按钮及为要素自定义按钮(第五章完结)

这节对Popups这一章的最后两个例子进行介绍和解析. 第一个[Popup Actions]介绍了弹窗中如何自定义工具按钮(名为actions),以PopupTemplate+FeatureLayer的形式测量要素的长度为例子进行介绍. 第二个[Custom popup actions per feature]则是上一个的升级,如果说上一个例子的功能是写死的,那么这个例子就把这个功能写活了.什么意思呢?上个例子的测距仅仅能测距,没有什么别的特别的.而这个例子以啤酒店的分布(点要素图层)为例,在自

ArcGIS API for JavaScript 4.2学习笔记[7] 鹰眼(缩略图的实现及异步处理、Promise、回调函数、监听的笔记)

文前说明:关于style就是页面的css暂时不做评论,因为官方给的例子的样式实在太简单了,照抄阅读即可. 这篇文章有着大量AJS 4.x版本添加的内容,如监听watch.Promise对象.回调函数.异步处理等内容,原理性的东西我会在文末解释,各位看官不用担心看不懂,我尽量用通俗的语言解释这些. 惯例,如果不习惯从头看到尾,可以直接跳到后面看总结. 大家应该看过商业地图的缩略图功能吧?以度娘地图为例,在使用街景地图的时候,左下角会出现一个地点一样的2D小地图: 这个就是鹰眼功能的应用,在很多桌面

ArcGIS API for JavaScript 4.2学习笔记[9] 同一种视图不同数据(Map)同步

本例子核心:对MapView对象的map属性值进行替换即可达到更改地图数据的效果. 这个例子用的不是Map对象了,而是用的发布在服务器上的专题地图(WebMap)来加载到MapView上进行显示. 在html标签中,使用了section标签,不过没什么稀奇的,就把仨按钮放一块而已. 先给出预览图 三张专题地图:失踪人口密度分布.难民迁徙路线.2015年欧洲来港者. 这个东西很有用,尤其是在展示同一地区的专题地图的时候,这里也展示了什么叫View,什么叫Map. 因为中心点.比例尺是由View对象

ArcGIS API for JavaScript 4.2学习笔记[23] 没有地图如何进行查询?【FindTask类的使用】

从第一篇到现在都是基于地图的,不管怎么样,不管是2D还是3D,至少有个图. 这次来个没有图的例子,看看纯文字的空间查询是什么样的. 本例适用于后台查询或低性能电脑的查询. 预览图 由于4.3和4.2的这个例子没有任何实质性的改动,我直接从官方运行的4.3的例子: 默认打开的时候,按下Find按钮,右边就会出现转圈圈的图,其实是个GIF图片. 结果如上,将Spokane这个County的信息列举出来了,列出的字段有County Name.State.Population(2012).%Popula