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

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

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

    看本文前最好对第二章(Mapping and Views)中的Map和View类有理解. 视图类有一个属性是Popup类型的popup,查阅API知道这个就是视图的弹窗,每一个View的实例都有一个p ...

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

    放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...

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

    ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...

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

    内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...

  5. ArcGIS API for JavaScript 4.2学习笔记[21] 对3D场景上的3D要素进行点击查询【Query类学习】

    有人问我怎么这个系列没有写自己做的东西呢? 大哥大姐,这是"学习笔记"啊!当然主要以解读和笔记为主咯. 也有人找我要实例代码(不是示例),我表示AJS尚未成熟,现在数据编辑功能才简 ...

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

    好吧,我都要吐了. 接连三个例子都是类似的套路,使用某个查询参数类的实例,结合对应的Task类,对返回值进行取值.显示. 这个例子是Identify识别,使用了TileLayer这种图层,数据来自Se ...

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

    这节对Popups这一章的最后两个例子进行介绍和解析. 第一个[Popup Actions]介绍了弹窗中如何自定义工具按钮(名为actions),以PopupTemplate+FeatureLayer ...

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

    文前说明:关于style就是页面的css暂时不做评论,因为官方给的例子的样式实在太简单了,照抄阅读即可. 这篇文章有着大量AJS 4.x版本添加的内容,如监听watch.Promise对象.回调函数. ...

  9. ArcGIS API for JavaScript 4.2学习笔记[19] 搜索小部件——使用更多数据源

    上一篇中提到,空间搜索小部件是Search这个类的实例化,作为视图的ui属性添加进去后,视图就会出现搜索框了. 这节的主体代码和上篇几乎一致,区别就在上篇提及的sources属性. 先看看结果: 由于 ...

随机推荐

  1. Gitlab自动触发Jenkins构建打包

    一.目的 在部门的测试环境中,开发人员一旦向gitlab仓库提交成功代码,gitlab就会自动触发jenkins构建项目.当然在构建后还可以添加项目部署或者自动化测试的脚本.这里只针对测试环境. 二. ...

  2. 一个页面tab标签切换,都有scroll事件的解决办法

    当前页有多个tab,如果都有scroll事件, 先解绑$(window).off('scroll') 再执行scroll就不可以了,多个标签就不会互相干扰: 给你们个例子: //标签切换    $(' ...

  3. linux环境变量的配置

    1.全局环境变量 vi /etc/profile JAVA_HOME=/opt/modules/jdk1.8.0_11/   export PATH=$PATH:$JAVA_HOME/bin:$JAV ...

  4. Java基础回顾(3)

    数组:用一种数据类型的集合 ★数组元素下标从0开始. 数组的复制.扩容: ①.System.arraycopy(源数组, 源数组的初始下标,                     目标数组, 目标数 ...

  5. MySql的简单数据类型区别与认识

    date     3字节,日期,格式:2014-09-18time     3字节,时间,格式:08:42:30datetime     8字节,日期时间,格式:2014-09-18 08:42:30 ...

  6. UnityShader-菲涅尔反射(Fresnel Reflection)

    菲涅耳公式(或菲涅耳方程),由奥古斯丁·让·菲涅耳导出.用来描述光在不同折射率的介质之间的行为.由公式推导出的光的反射称之为"菲涅尔反射".菲涅尔公式是光学中的重要公式,用它能解释 ...

  7. Yahoo网站性能优化的34条军规

    1.尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容,这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数,这是提高网页速 ...

  8. 预防onion比特币勒索病毒,如何快速关闭135,137,138,139,445端口

    预防onion比特币勒索病毒,如何快速关闭135,137,138,139,445等端口   如果这种网络端口关闭方法行不通,可以尝试一种新的关闭网络端口方法(比较繁琐)见106楼,补丁安装教程见126 ...

  9. 自学Python全栈开发第一次笔记

           我已经跟着视频自学好几天Python全栈开发了,今天决定听老师的,开始写blog,听说大神都回来写blog来记录自己的成长. 我特别认真的跟着这个视频来学习,(他们开课前的保证书,我也写 ...

  10. 什么是BSD?

       BSD (Berkeley Software Distribution,伯克利软件套件)是Unix的衍生系统,1970年代由加州大学伯克利分校开创.BSD用来代表由此派生出的各种套件集合. BS ...