ArcGIS JavaScript API 弹出窗口未引用 REST 服务图层答案

【问题标题】：ArcGIS JavaScript API Popup Not Referencing REST Service LayerArcGIS JavaScript API 弹出窗口未引用 REST 服务图层
【发布时间】：2021-01-31 09:45:08
【问题描述】：

通过变量“popupCustom”创建的弹出窗口中的内容正在显示字符串，而不是引用指定的字段 {IN_COUNTRY}。我遵循了 ArcGIS JS API 弹出式教程，并且看不到我的错误是未能获取与该字段关联的属性。这是代码 - 非常感谢任何帮助！

*注意：“Cyber_Areas”变量中的要素图层 url 指向引用要素类的 REST URL。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Search widget with multiple sources - 4.6</title>

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

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

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/widgets/BasemapToggle",
      "esri/widgets/Legend",
      "esri/layers/TileLayer",
      "esri/layers/FeatureLayer",
      "esri/widgets/Search",
      "esri/widgets/LayerList",
      "esri/PopupTemplate",
      "dojo/on",
      "dojo/domReady!"
      
    ], function(
      Map,
      MapView,
      BasemapToggle,
      Legend,
      TileLayer,
      FeatureLayer,  
      Search,
      LayerList,
      PopupTemplate,
      on
      ) {

      var Cyber_Areas = new FeatureLayer({
        url: "*inserturl*",
        outFields: ["IN_COUNTRY"],
        popupTemplate: popupCustom 
      });

      var map = new Map({
        basemap: "osm"
      });

      map.add(Cyber_Areas);

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-87.172865, 34.077613], // lon, lat
        zoom: 16
      });

      var searchWidget = new Search({
        view: view,
        popupOpenOnSelect: false
      });
      
      view.ui.add(searchWidget, {
        position: "top-left",
        index: 0
      });
      
      var popupCustom = searchWidget.on('select-result', function(evt){
       //console.info(evt);     
        view.popup.open({
          location: evt.result.feature.geometry,  // location of the click on the view
          title: "Service Availability:",  // title displayed in the popup
          content: "<p><b>{IN_COUNTRY}"
        });
      });

    });
      
  </script>
</head>

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

【问题讨论】：

您好，如果您仔细查看教程，您应该能够发现您的代码中的不一致之处......这是金钱线：content:"${Date:DateFormat(selector: 'date', datePattern: 'MMMM d,yyyy')}<br>${City}, ${State}"。这里有一些额外的细节：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
嗨 Luckyape，感谢您的回答。我认为格式化变量前面的“$”可以用于 ArcGIS 之外的网络制图，但是 ESRI 没有采用这种语法。

标签： rest popup arcgis arcgis-js-api

【解决方案1】：

从您的代码中，您将弹出模板值与何时显示它混合在一起。这是两个不同的东西。

首先，您没有正确设置图层的弹出模板。应该是PopupTemplate。

在我看来，在您的代码中，层定义应该是这样的，

var Cyber_Areas = new FeatureLayer({
  url: "*inserturl*",
  popupTemplate: {
    outFields: ["IN_COUNTRY"],
    title: "Service Availability:",
    content: "<p><b>{IN_COUNTRY}</b></p>"
  } 
});

现在，如果您不希望弹出窗口的默认行为（左键单击某个功能），则不能像这样禁用它，

view.popup.autoOpenEnabled = false; // <- disable view popup auto open

然后你可以像这样在任何你想要的地方打开它，

view.popup.open({ // <- open popup
  location: evt.result.feature.geometry, // <- use map point of the event result
  fetchFeatures: true // <- fetch the selected features (if any)
});

您必须了解您在弹出模板的内容中使用的字段与图层相关。这就是为什么我在视图的弹出窗口中设置以获取结果。

【讨论】：