2019-05-19

ArcGIS API for JavaScript 4.2学习笔记[15] 弹窗内容的格式与自定义格式

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

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

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

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

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

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

这个例子使用了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>

本文标题:ArcGIS API for JavaScript 4.2学习笔记[15] 弹窗内容的格式与自定义格式

文章作者:ibrucekong

文章字数:1,276字

阅读时长:6分钟

全站字数:71.0k字

发布时间:2019年05月19日 - 18时07分

最后更新:2019年05月19日 - 18时07分

原始链接:https://ibrucekong.github.io/posts/2569294447/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。