如何在 arcGIS 地图内容中添加嵌套对象作为 popupTemplates 中的内容?

How to add a nested object as content in arcGIS maps content in popupTemplates?

我正在尝试通过 JavaScript 将数据从 https://mapafrica.afdb.org/data/locations?d=4&lang=en 显示到 arcGIS 地图。我可以通过 {name} 将“name”属性添加到 popupTemplate,但如何在内容模板中添加嵌套值示例 activity.name。查看了文档,但看起来我只能从根级别添加内容。

已截断 json:{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"activity":{"identifier":"46002-P-DZ-D00-002","sectors":[{"id":9,"name":"Transport","sector-url":"https://www.afdb.org/en/topics-and-sectors/sectors/transport/","dashboards":[{"id":4,"name":"Integrate Africa","priority":4}]}],"totalDisbursement":0,"actual_start_date":{"year":2003,"month":"JUNE","monthValue":6,"era":"CE","dayOfYear":153,"dayOfWeek":"MONDAY","leapYear":false,"dayOfMonth":2,"chronology":{"calendarType":"iso8601","id":"ISO"}},"totalCommitment":71342035.94,"name":"Algeria - East-West Highway Construction Project - 13 km Section from Ain El Bey to the CW133 Interchange","planned_start_date":{"year":2002,"month":"DECEMBER","monthValue":12,"era":"CE","dayOfYear":338,"dayOfWeek":"WEDNESDAY","leapYear":false,"dayOfMonth":4,"chronology":{"calendarType":"iso8601","id":"ISO"}},"description":"The present intervention concerns ..","countries":["Algeria"],"url":null,"status":"Cancelled"},"latitude":"35.48668","name":"Aïn el Bey","longitude":"8.31921"},"geometry":{"type":"Point","coordinates":[8.31921,35.48668]},"id":"2219174"}

我可以使用 {name} 显示 "name":"Aïn el Bey",但是如何在 popupTemplate 中显示 "name":"Algeria - East-West Highway Construction Project - 13 km Section from Ain El Bey to the CW133 Interchange" 作为内容?

JavaScript: function (Map, GeoJSONLayer, MapView, Locate, BasemapToggle, locationRendererCreator) { const url = "https://mapafrica.afdb.org/data/locations?d=4&lang=en"; const template = { title: "{name}", content: "{activity.name}", };

如有任何帮助,我们将不胜感激。

您可以将 activity 字段作为对象处理。为此,只需将字段指定为 blob 类型,然后像在代码中那样访问属性。 看看我为你做的这个例子。

<!DOCTYPE html>
<html>

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

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

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

  <script>
    require([
      "esri/Map",
      "esri/layers/GeoJSONLayer",
      "esri/views/MapView"
    ], function (Map, GeoJSONLayer, MapView) {
      const url =
        "https://mapafrica.afdb.org/data/locations?d=4&lang=en";


      const template = {
        title: "{name}",
        content: "{activity.name}"
      };

      const renderer = {
        type: "simple",
        symbol: {
          type: "simple-marker",
          color: "orange",
          outline: {
            color: "white"
          }
        }
      };

      const geojsonLayer = new GeoJSONLayer({
        url: url,
        copyright: "USGS Earthquakes",
        popupTemplate: template,
        renderer: renderer,
        outFields: ['name', 'activity'],
        fields: [
          {
            name: "name",
            alias: "Name",
            type: "string"
          },
          {
            name: "activity",
            alias: "Activity",
            type: "blob"
          }
        ]
      });

      const map = new Map({
        basemap: "gray",
        layers: [geojsonLayer]
      });

      const view = new MapView({
        container: "viewDiv",
        center: [10, 10],
        zoom: 3,
        map: map
      });
    });
  </script>
</head>

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

</html>