ArcGIS API For Js 的PopTemplete擴展

最新推荐文章于 2023-05-25 14:53:52 发布

原创最新推荐文章于 2023-05-25 14:53:52 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#arcgis #javascript

ArcGIS-API 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用 ArcGIS API 4.3 的 PopupTemplate 功能来增强地图图层的属性信息展示效果。通过示例代码演示如何自定义图层的弹出窗口样式，并加入图片及动态计算的百分比变化等复杂信息。

實現功能

哦，忘記説了，這是ArcGIS API 4.0版本下的操作，更炫酷，更絲滑的感覺。
說正經功能吧，我就是想看看popTemplete到底有多大的能力，然後就任性的在其中加載了圖層屬性和圖片信息。

相関代碼

<!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">
  <meta name="description" content="[PopupTemplate Function - 4.3]">
  <!-- 
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the popupTemplate-function sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/popupTemplate-function/index.html  
  -->
  <title>PopupTemplate Function - 4.3</title>

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

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    #title{
      background-color:rgba(240,65,32,0.4);
      border-radius:4px;
      display:"block";
    }
  </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: "streets"
        });

        // 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 img="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1494037046&di=2cc42ad6c658ead3624b1cde09db0eac&src=http://www.zhiyinlady.com/d/file/yule/tuku/2016-11-28/smallc8a40348b6a7d7e9a2def3eec4aaf47c.jpg";
          var popupTemplate = {
            title: "<div id='title'>Population in {NAME}</div>",
            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}"+"<img src='" + img + "'>"
          };

          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 ? "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494047482825&di=430ef25b49e7a8eee75fdc7639e39db1&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F14%2F12%2F08%2F66h58PICBjM_1024.jpg" : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494047551834&di=3986daac30d2e903e67c8cd2ca05b53d&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F14%2F97%2F65%2F69458PICWaA_1024.jpg";

            // 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>";
          }
          zoomOut();
        });
      function zoomOut() {
  // In this case the view zooms out two LODs on each click
        view.goTo({
      center: view.center,
      zoom: view.zoom + 2
    });
}
      });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>