ArcGIS Javascript API 4.14 弹出字段属性未显示

Question

我正在使用 webamp 显示在 ArcGIS 中创建的地图（Javascript API 在 PHP 网站中）。在地图中，单击图层的点时也会出现一个弹出窗口。最近我从 4.13 更新了 4.14 版本。更新后，弹出窗口无法正常工作。我有一个自定义弹出模板。在研究了文档之后，我开始知道需要一个 return 函数来在弹出窗口中显示自定义 div。我添加的以下代码显示了我的自定义弹出窗口。

var template = { content: function(){ var div = document.createElement("div"); div.className = "myClass"; div.innerHTML = "<span>My custom content!</span>"; return div; } }

layers[layerIndex].popupTemplate = template;

现在弹出窗口显示正常。但我必须在弹出窗口中显示字段值。我在双括号中使用了必需的字段属性，例如：{Name}。但是在最新版本中，当我使用相同的字段值时，字段值没有出现。

我在 4.13 版中使用的代码并且可以正常工作，

popupTemplate = {
title: "{Name}",
content: '<div id="popup_address">{Address}</div><div class="right"><div href="#" id="popupRight" class="toggle"><p onClick="openPopupDetails({FACILITYID})">+</p></div></div>' };

layers[layerIndex].popupTemplate = popupTemplate;

请帮我解决这个问题。

谢谢。

Webmap 和自定义弹出窗口的完整代码 map.js

// The map classes and includ1a65d527bfd04cc180c87edf0908907bes
require([
  "esri/views/MapView",
  "esri/WebMap",
  "esri/widgets/Search",
  "esri/widgets/Zoom",
  "esri/widgets/Locate"
], function(MapView, WebMap, Search, Zoom, Locate) {
  var webmap = new WebMap({
    portalItem: {
      id: "d1ca798d8c7d4afab8983d911df8326b"
    }
  });

  var view = new MapView({
    map: webmap,
    container: "map",
    center: [-95.9406, 41.26],
    zoom: 16,
    maxZoom: 21,
    minZoom: 13,
    basemap: "topo",

    ui: {
      components: ["attribution"]
    }
  });

  webmap
    .load()
    .then(function() {
      return webmap.basemap.load();
    })
    .then(function() {
      let allLayers = webmap.allLayers;
      console.log(allLayers);

      var promises = allLayers.map(function(layer) {
        return layer.load();
      });
      return Promise.all(promises.toArray());
    })
    .then(function(layers) {
      // Position of the popup in relation to the selected feature.
      view.popup.alignment = "top-center";
      // To disable the collapse functionality
      view.popup.collapseEnabled = false;
      // A spinner appear at the pointer
      view.popup.spinnerEnabled = false;
      // To disable the dock (The popup will be appear in bottom or any corner of the window)
      view.popup.dockEnabled = false;
      // Disable the pagination
      view.popup.featureNavigationEnabled = false;
      // Popup template details, Keep only name and address in the popup and avoid all other details
      view.popup.viewModel.actions.getItemAt(0).visible = false;

      // view.on("click", function(event) {
      // keep a delay to align the popup and the pointer together positioned to the map center
      // Add animation only if the browser not IE
      // });

      layers.forEach(function(popupLayers, layerIndex) {
        console.log(popupLayers);

        var template = {
          title: "{Name}",
          content: function() {
            var div = document.createElement("div");
            div.className = "myClass";
            div.innerHTML = "<span>{Address}</span>";
            return div;
          }
        };
        layers[layerIndex].popupTemplate = template;

        // popupTemplate = {
        //   title: "{Name}",
        //   content:
        //     '<div id="popup_address">{Address}</div><div class="right"><div href="#" id="popupRight" class="toggle"><p onClick="openPopupDetails({FACILITYID})">+</p></div></div>'
        // };
        // layers[layerIndex].popupTemplate = popupTemplate;
      });

      // To close the popup when hit on esc button
      document.onkeyup = function(evt) {
        var key = evt.keyCode;
        if (key == 27) {
          view.popup.close();
        }
      };
    })
    .catch(function(error) {
      //   console.log(error);
    });
});

Index.php

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />

<title>Load a basic WebMap - 4.14</title>

    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

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

    <script src="https://js.arcgis.com/4.14/"></script>
<script src="map.js"></script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>

我修改了代码，

 for (let i = 2; i < layers.length; i++) {
        var template = {
          title: "{Name}",
          content: function() {
            var div = document.createElement("div");
            div.innerHTML =
              '<div id="popup_address">{Address}</div><div class="right"><div href="#" id="popupRight" class="toggle"><p onClick="openPopupDetails({FACILITYID})">+</p></div></div>';
            return div;
          }
        };
        layers[i].popupTemplate = template;
        console.log(layer[i]);
      }

当我应用自定义 div 时，{Address} 部分未呈现。它看起来像 {Address} 本身。

Answer 1

我看你有点糊涂了，弹窗模板的内容还是可以用字符串，也可以用函数。所以如果你想使用一个函数，你可以使用这样的东西，

popupTemplate = {
    title: "{Name}",
    content: popupContentChange
}

layers[layerIndex].popupTemplate = template;

function popupContentChange(feature) {
    let div = document.createElement("div");
    div.className = "myClass";
    div.innerHTML = "<span>"+feature.graphic.attributes.Address+"</span>";
    return div;
}

API 文档中有几个示例，请看一下。仅供参考，ArcGIS JavaScript API Examples - Intro to Popups

这是我为您制作的示例，以您的代码为基础添加一些修复程序以显示您想要的内容。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Sketch Feature Coords</title>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.14/"></script>
    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <script>
      require([
        "esri/views/MapView",
        "esri/WebMap",
        "esri/widgets/Search",
        "esri/widgets/Zoom",
        "esri/widgets/Locate"
      ], function(MapView, WebMap, Search, Zoom, Locate) {
        var webmap = new WebMap({
          portalItem: {
            id: "d1ca798d8c7d4afab8983d911df8326b"
          }
        });

        var view = new MapView({
          map: webmap,
          container: "map",
          center: [-95.9406, 41.26],
          zoom: 16,
          maxZoom: 21,
          minZoom: 13,
          basemap: "topo",
          ui: {
            components: ["attribution"]
          }
        });
        webmap
          .load()
          .then(function() {
            return webmap.basemap.load();
          })
          .then(function() {
            let allLayers = webmap.allLayers;
            console.log(allLayers);
            var promises = allLayers.map(function(layer) {
              return layer.load();
            });
            return Promise.all(promises.toArray());
          })
          .then(function(layers) {
            // Position of the popup in relation to the selected feature.
            view.popup.alignment = "top-center";
            // To disable the collapse functionality
            view.popup.collapseEnabled = false;
            // A spinner appear at the pointer
            view.popup.spinnerEnabled = false;
            // To disable the dock (The popup will be appear in bottom or any corner of the window)
            view.popup.dockEnabled = false;
            // Disable the pagination
            view.popup.featureNavigationEnabled = false;
            // Popup template details, Keep only name and address in the popup and avoid all other details
            view.popup.viewModel.actions.getItemAt(0).visible = false;

            // it is only going to work on the last two layers
            // those are the one that have fields: Name and Address
            for (let i = 2; i < layers.length; i++) {
              var template = {
                title: "{Name}",
                content: "<span>Address: {Address}</span>"
              };
              layers[i].popupTemplate = template;
              console.log(layer[i]);
            }
            
            // To close the popup when hit on esc button
            document.onkeyup = function(evt) {
              var key = evt.keyCode;
              if (key == 27) {
                view.popup.close();
              }
            };
          })
          .catch(function(error) {
            console.log(error);
          });
    });
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

如果要将函数用作内容，则必须设置 outFields 参数以包含要在函数中使用的字段。所选功能作为参数传递给函数，在内部使用 feature.graphic.attributes 访问属性。这应该有效，

var template = {
    title: "{Name}",
    // content: "<span>Address: {Address}</span>"
    content: function(feature) {
        console.log(feature);
        var div = document.createElement("div");
        div.className = "myClass";
        div.innerHTML = "<span>Address:"+feature.graphic.attributes.Address+"</span>";
        return div;
    },
    outFields: ["Name", "Address"]
};

Answer 2

featureNavigationEnabled 自 4.15 版起已弃用。请改用 Popup.visibleElements.featureNavigation。

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html#featureNavigationEnabled

ArcGIS Javascript API 4.14 弹出字段属性未显示

ArcGIS Javascript API 4.14 popup field attributes not showing

arcgis-js-api