先看结果截图吧（不看过程可以直接看总结，在文末）：

随便点击了两个城市斑块，出现结果如图。

我来解读一下这结果和以前的有什么不同：

这个例子使用了PopupTemplate，数据是Layer（使用PortalID创建的Layer）。

但是我们看到图中有个地方不同：当Percent change is这个东西是负数的时候，就是红色+红色下箭头，反之则是绿色字+绿色上箭头。

实际上，这两个箭头是两个png图片。

见html同目录下的两个文件：

所以说，这种特定格式，能随着数字正负自动判断使用什么图片、什么样式的content是怎么实现的呢？

解读开始。

一、给出引用（用到的模块）

require(

    [

        "esri/Map", "esri/views/MapView", "esri/layers/Layer",

        "dojo/dom", "dojo/number", "dojo/on", "dojo/domReady!"

    ],

    function(){...}

);

二、函数参数（第二参数/回调函数）

function(Map, MapView, Layer, dom, number, on){

    var map = new Map({...});

    var view = MapView({...});

    Layer.fromPortalItem({...})

    .then(function(layer)

        {

            map.add(layer);

            var popupTemplate = {...};

            layer.popupTemplate = popupTemplate;

            populationChange = function(...){...};

        });

}

省略了部分代码。在Layer.fromPortalItem返回的Promise对象中，使用了then()方法回调一个函数，操作此Promise返回的layer对象。

首先使用map的add()方法添加layer到地图中去。

然后是定义一个popupTemplate，并赋给layer的popupTemplate属性。

到这里，都很正常，问题是，

到现在为止都没说那个自定义的content是怎么弄的？后面的populationChange方法又是干什么用的？

三、popupTemplate的content属性

直接看下文代码块中的content属性：

var popupTemplate = {

  title: "Population in {NAME}",

  content: "As of 2010, the population in this area was <b>{POP2010:NumberFormat}</b> " +

    "and the density was <b>{POP10_SQMI:NumberFormat}</b> sq mi. " +

    "As of 2013, the population here was <b>{POP2013:NumberFormat}</b> " +

    "and the density was <b>{POP13_SQMI:NumberFormat}</b> sq mi. <br/> <br/>" +

    "Percent change is {POP2013:populationChange}"

};

可以看到，有5个{}在content中，也就是说有5个值是动态变化的，在弹窗时会改变。

前4个使用的格式是NumbreFormat，当然这个是可以指定一个方法给它的，

就是第5个{}中的POP2013字段，它的格式就指定为了populationChange方法。我们来看看populationChange方法：

populationChange = function(value, key, data) {

  var diff = data.POP2013 - data.POP2010;

  var pctChange = (diff * 100) / data.POP2010;

  var result = diff > 0 ? "up.png" : "down.png";

  return "<img src='" + result + "'/>" +

    "<span style='color: " +

    (pctChange < 0 ? "red" : "green") + ";'>" +

    number.format(pctChange, {

      places: 3

    }) +

    "%</span>";

}

result中有一个三元判断符 “A?B:C”，意思是若A为真，则选择B作为结果，否则选择C。

看样子就知道diff就是变化数了，它>0就"up.png"，否则就"down.png"。

返回一串html代码，看就知道是什么了，这与我们在开头看到的例子的结果一致。

这个方法的参数中data即各个字段的集合。

四、总结

popupTemplate的content中如何用自己的规则去控制样式？

这样即可对变化值进行格式自定义控制：

content: "...{字段：Function名}..."

在代码后补全同名方法即可。

就是这么简单！熟悉html组织文本样式的童鞋就能创造更多好看复杂的样式了。

给出源代码：

<!DOCTYPE html>

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

  <title>PopupTemplate Function - 4.2</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">

  <script src="https://js.arcgis.com/4.2/"></script>

  <style>

    html,

    body,

    #viewDiv {

      padding: 0;

      margin: 0;

      height: 100%;

      width: 100%;

    }

  </style>

  <script>

    var populationChange;

    require([

        "esri/Map",

        "esri/views/MapView",

        "esri/layers/Layer",

        "dojo/dom",

        "dojo/number",

        "dojo/on",

        "dojo/domReady!"

      ],

      function(

        Map, MapView, Layer,

        dom, number, on

      ) {

        var map = new Map({

          basemap: "dark-gray"

        });

        // Create the MapView

        var view = new MapView({

          container: "viewDiv",

          map: map,

          zoom: 7,

          center: [-87, 34]

        });

        Layer.fromPortalItem({

          portalItem: { // autocast as esri/portal/PortalItem

            id: "e8f85b4982a24210b9c8aa20ba4e1bf7"

          }

        }).then(function(layer) {

          // add the layer to the map

          map.add(layer);

          // create a new popupTemplate for the layer

          // format the numeric field values using out of the box

          // NumberFormat function. Call populationChange() custom

          // function to calculate percent change for the county.

          var popupTemplate = {

            title: "Population in {NAME}",

            content: "As of 2010, the population in this area was <b>{POP2010:NumberFormat}</b> " +

              "and the density was <b>{POP10_SQMI:NumberFormat}</b> sq mi. " +

              "As of 2013, the population here was <b>{POP2013:NumberFormat}</b> " +

              "and the density was <b>{POP13_SQMI:NumberFormat}</b> sq mi. <br/> <br/>" +

              "Percent change is {POP2013:populationChange}"

          };

          layer.popupTemplate = popupTemplate;

          populationChange = function(value, key, data) {

            // calculate the population percent change from 2010 to 2013.

            var diff = data.POP2013 - data.POP2010;

            var pctChange = (diff * 100) / data.POP2010;

            var result = diff > 0 ? "up.png" : "down.png";

            // add green arrow if the percent change is positive.

            // red arrow for negatice percent change.

            return "<img src='" + result + "'/>" +

              "<span style='color: " +

              (pctChange < 0 ? "red" : "green") + ";'>" +

              number.format(pctChange, {

                places: 3

              }) +

              "%</span>";

          }

        });

      });

  </script>

</head>

<body>

  <div id="viewDiv"></div>

</body>

</html>

本例html源代码

ArcGIS API for JavaScript 4.2学习笔记[15] 弹窗内容的格式与自定义格式的更多相关文章

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

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

  2. ArcGIS API for JavaScript 4.2学习笔记[14] 弹窗的位置、为弹窗添加元素

    这一节我们来看看弹窗的位置和弹窗上能放什么. 先一句话总结: 位置:可以随便(点击时出现或者一直固定在某个位置),也可以指定位置 能放什么:四种,文字.媒体(图片等).表格.附件. [Part I 位 ...

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

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

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

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

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

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

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

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

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

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

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

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

  9. ArcGIS API for JavaScript 4.2学习笔记[31] (补充学习)Task类

    Task这个东西很有用,是AJS中用于解决各种乱七八糟任务的一个类.它有很多子类,有用于空间分析的,有用于空间查询的,等等. 这篇作为补充学习的第一篇,也是进阶学习的第一篇,我就改个写法. 我将使用思 ...

随机推荐

  1. SQL Server 结构分解

    关系引擎和存储引擎是SQL Server 的两大组件,其中关系引擎也叫查询处理器,它包括查询优化器.命令解析器.查询执行器.存储引擎管理所有的数据及涉及的IO,它包括事务管理器和数据访问方法和缓冲区管 ...

  2. 正确释放Vector的内存

    http://blog.jobbole.com/37700/ 今天在看微博的时候, 有人提出了一个对于Vector内存泄露的疑问( Link). 博主采用 Vector存储一些数据,但是发现在执行 c ...

  3. Git详解及 github与gitlab使用

    1.1 关于版本控制 1.1.1 本地版本控制 本地版本控制系统 许多人习惯用复制整个项目目录的方式来保存不同的版本,或许还会改名加上备份时间以示区别.这么做唯一的 好处就是简单,但是特别容易犯错.有 ...

  4. MongoDB一：入门（安装与配置）

    一.简介 MongoDB  是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. mongoDB MongoDB 是一个介于关系数据库和非关系数据库 ...

  5. display:box和display:flex填坑之路

    背景分析:最近做移动端项目时,遇到一个常见的需求: 可以滑动的导航,如下图 虽然是很常见的一个布局,但在移动端没有做过,想当然的写下以下的样式,简单描述下: 父元素 width:100%: overf ...

  6. python并发编程之多线程二

    一,开启线程的两种方式 方法一: from threading import Thread import random,time def eat(name): print('%s is eating. ...

  7. Codeforces 890A - ACM ICPC 暴力

    A. ACM ICPCtime limit per test2 secondsmemory limit per test256 megabytesinputstandard inputoutputst ...

  8. Qt---自定义界面之QStyle

    最近想学习下Qt的自定义界面,因此花了点时间看了下QStyle,,,,结果很难受,这一块涉及到一大块GUI的具体实现方式,看得我很头疼.想看第一手资料并且英语功底不错的可以直接上qt文档,下面我会以易 ...

  9. 【下一代核心技术DevOps】：（五）微服务CI与Rancher持续集成

    1. 引言 DevOps的核心魅力是快速的持续集成交付,降低研发和实施运维之间的交互,使得传统的各种扯皮现象统统消失.最重要的是降低成本 保障产品交付可靠性. 使用Rancher作为持续集成的关键环节 ...

  10. 使用css修改radio、checkbox样式

    input[type=radio],input[type=checkbox]  { display: inline-block; vertical-align: middle; width: 20px ...