<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body,
#mapDiv {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.20/"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer"
], function(esriConfig, Map, MapView, FeatureLayer) {
esriConfig.apiKey = "YOUR-KEY";
const map = new Map({
basemap: "arcgis-topographic"
});
const mapView = new MapView({
map: map,
center: [-118.80543, 34.02700],
zoom: 13,
container: "mapDiv"
});
//创建一个点弹出框(显示属性)
const popupTrailheads = {
"title": "Trailhead",
"content": "<b>Trail:</b>{TRL_NAME}<br><b>city:</b> {CITY_JUR}<br><b>Cross Street:</b> {X_STREET}<br><b>Parking:</b> {PARKING}<br><b>Elevation:</b> {ELEV_FT} FT"
};
//创建一个点图层
const trailheads = new FeatureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0",
outFields: ["TRL_NAME", "CITY_JUR", "X_STREET", "PARKING", "ELEV_FT"],
popupTemplate: popupTrailheads
});
//将点图层添加到地图
map.add(trailheads);
//创建一个线弹出框(显示图表)
const popupTrails = {
title: "Trail Infomation",
content: [{
type: "media",
mediaInfos: [{
type: "column-chart",
caption: "",
value: {
fields: ["ELEV_MIN", "ELEV_MAX"],
normalizeField: null,
tooltipField: "min and max elevation values"
}
}]
}]
};
//创建一个线图层
const trails = new FeatureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0",
outFields: ["TRL_NAME", "ELEV_GAIN"],
popupTemplate: popupTrails
});
//将线层添加到地图
map.add(trails, 0);
//创建面弹出框(显示表格)
const popupOpenspaces = {
"title": "{PARK_NAME}",
"content": [{
"type": "fields",
"fieldInfos": [{
"fieldName": "AGNCY_NAME",
"label": "Agency",
"isEditable": "true",
"tooltip": "",
"visible": "true",
"format": "null",
"stringFieldOption": "text-box"
}, {
"fieldName": "TYPE",
"label": "Type",
"isEditable": "true",
"tooltip": "",
"visible": "true",
"format": "null",
"stringFieldOption": "text-box"
}, {
"fieldName": "ACCESS_TYP",
"label": "Access",
"isEditable": "true",
"tooltip": "",
"visible": "true",
"format": "null",
"stringFieldOption": "text-box"
}, {
"fieldName": "GIS_ACRES",
"label": "Acres",
"isEditable": "true",
"tooltip": "",
"visible": "true",
"format": {
"places": 2,
"digitSeparator": true
},
"stringFieldOption": "text-box"
}]
}]
};
//创建一个面层并加载到地图
const openspaces = new FeatureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space_Styled/FeatureServer/0",
opacity: 0.8,
outFields: ["TYPE", "PARK_NAME", "AGNCY_NAME", "ACCESS_TYP", "GIS_ACRES", "TRLS_MI", "TOTAL_GOOD", "TOTAL_FAIR", "TOTAL_POOR"],
popupTemplate: popupOpenspaces
});
map.add(openspaces, 0);
});
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>
WEBGIS添加弹出框(属性、图表、表格)
最新推荐文章于 2023-06-21 13:52:54 发布