如何在 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>
我正在尝试通过 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>