获取人口统计数据
了解如何使用地理丰富服务查找世界各地的人口统计信息。
步骤
创建新 Pen
导入 GeoScene REST JS
导入 GeoScene REST JS 模块以访问某些 GeoScene 位置服务，例如，从地理丰富服务中访问人口数据统计。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>GeoScene API for JavaScript Tutorials: 获取人口统计数据</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.geoscene-view .geoscene-popup__button.geoscene-popup__button--dock {
display: none;
}
</style>
<!-- require GeoScene REST JS libraries from https://unpkg.com -->
<script src="https://unpkg.com/@geoscene/geoscene-rest-request@3.0.0/dist/umd/request.umd.js"></script>
<script src="https://unpkg.com/@geoscene/geoscene-rest-auth@3.0.0/dist/umd/auth.umd.js"></script>
<script src="https://unpkg.com/@geoscene/geoscene-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script>
<link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
<script src="https://js.geoscene.cn/4.23/"></script>
<script>
require([
"geoscene/config",
"geoscene/Map",
"geoscene/views/MapView",
"geoscene/Graphic",
"geoscene/geometry/geometryEngine",
"geoscene/widgets/Search",
"geoscene/rest/locator",
"geoscene/core/watchUtils"
],
function (geosceneConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) {
const authentication = new geosceneRest.ApiKey({
key: "YOUR_API_KEY"
});
const map = new Map({
basemap: "geoscene-navigation"
});
const view = new MapView({
map: map,
center: [9.1900, 45.4642], // 意大利米兰
zoom: 4,
container: "viewDiv",
});
const search = new Search({
view: view
});
view.ui.add(search, "top-right");
view.when(() => {
watchUtils.once(search, "activeSource", (loaded) => {
if (loaded) {
search.popupEnabled = false;
search.activeSource.placeholder = "Find facts for cities or places";
}
getDemographicData("Milan", view.center)
});
});
search.on("select-result", (event) => {
if (!event.result) {
return;
}
getDemographicData(event.result.name, event.result.feature.geometry);
});
view.on("click", e => {
const params = {
location: e.mapPoint,
outFields: "*"
};
const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";
locator.locationToAddress(locatorUrl, params)
.then(function (response) { // 显示找到的地址
const city = response.attributes.City || response.attributes.Region;
getDemographicData(city, params.location);
}, function (err) { // 未找到地址时显示
view.graphics.removeAll();
console.log("No address found.");
});
});
function getDemographicData(city, point) {
// 请求人口数据
geosceneRest.queryDemographicData({
studyAreas: [{
"geometry": {
"x": point.longitude,
"y": point.latitude
}
}],
authentication: authentication
})
.then((response) => {
if (response.results[0].value.FeatureSet.length > 0 &&
response.results[0].value.FeatureSet[0].features.length > 0) {
const attributes = response.results[0].value.FeatureSet[0].features[0].attributes;
showData(city, attributes, point);
}
else {
console.log("No data found.");
}
});
}
function showData(city, attributes, point) {
if (!city || !attributes || !point) {
return;
}
const title = `Global facts near ${city}`;
const content =
`Population: ${attributes.TOTPOP}<br>Males: ${attributes.TOTMALES} <br>Females: ${attributes.TOTFEMALES}<br>Average Household Size: ${attributes.AVGHHSZ}`;
view.popup.open({
location: point,
title: title,
content: content
});
const buffer = geometryEngine.geodesicBuffer(point, 1, "miles");
const graphicBuffer = new Graphic({
geometry: buffer,
symbol: {
type: "simple-fill",
color: [50, 50, 50, 0.1],
outline: {
color: [0, 0, 0, 0.25],
width: .5
}
}
})
view.graphics.removeAll();
view.graphics.add(graphicBuffer);
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>添加模块
在
require语句中，添加 Graphic、geometryEngine、Search、locator 和 watchUtils 模块。GeoScene API for JavaScript 使用 AMD 模块。
require函数用于加载模块，以便它们可以在主function中使用。保持模块引用和函数参数的顺序一致很重要。Add line. Add line. Add line. Add line. Add line. Change line 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>GeoScene API for JavaScript Tutorials: 获取人口统计数据</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .geoscene-view .geoscene-popup__button.geoscene-popup__button--dock { display: none; } </style> <!-- require GeoScene REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@geoscene/geoscene-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/geometry/geometryEngine", "geoscene/widgets/Search", "geoscene/rest/locator", "geoscene/core/watchUtils" ], function (geosceneConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new geosceneRest.ApiKey({ key: "YOUR_API_KEY" }); const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // 意大利米兰 zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data geosceneRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } const title = `Global facts near ${city}`; const content = `Population: ${attributes.TOTPOP}<br>Males: ${attributes.TOTMALES} <br>Females: ${attributes.TOTFEMALES}<br>Average Household Size: ${attributes.AVGHHSZ}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
更新地图
街道底图图层通常用于地理编码应用程序。更新 basemap 属性以使用 geoscene-navigation 底图图层并将地图的位置更改为以意大利米兰为中心。
将
basemap属性从tianditu-vector更新为geoscene-navigation。Change line 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>GeoScene API for JavaScript Tutorials: 获取人口统计数据</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .geoscene-view .geoscene-popup__button.geoscene-popup__button--dock { display: none; } </style> <!-- require GeoScene REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@geoscene/geoscene-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/geometry/geometryEngine", "geoscene/widgets/Search", "geoscene/rest/locator", "geoscene/core/watchUtils" ], function (geosceneConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new geosceneRest.ApiKey({ key: "YOUR_API_KEY" }); const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data geosceneRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } const title = `Global facts near ${city}`; const content = `Population: ${attributes.TOTPOP}<br>Males: ${attributes.TOTMALES} <br>Females: ${attributes.TOTFEMALES}<br>Average Household Size: ${attributes.AVGHHSZ}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>将
center属性更新为[9.1900, 45.4642]，并将zoom属性设置为4。Change line Change line 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>GeoScene API for JavaScript Tutorials: 获取人口统计数据</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .geoscene-view .geoscene-popup__button.geoscene-popup__button--dock { display: none; } </style> <!-- require GeoScene REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@geoscene/geoscene-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/geometry/geometryEngine", "geoscene/widgets/Search", "geoscene/rest/locator", "geoscene/core/watchUtils" ], function (geosceneConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new geosceneRest.ApiKey({ key: "YOUR_API_KEY" }); const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data geosceneRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } const title = `Global facts near ${city}`; const content = `Population: ${attributes.TOTPOP}<br>Males: ${attributes.TOTMALES} <br>Females: ${attributes.TOTFEMALES}<br>Average Household Size: ${attributes.AVGHHSZ}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
添加搜索微件
接下来，我们将添加搜索微件，以便用户可以搜索他们想要查看人口统计数据的位置。
创建搜索微件并定义视图。然后，将微件添加至右上角。
Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>GeoScene API for JavaScript Tutorials: 获取人口统计数据</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .geoscene-view .geoscene-popup__button.geoscene-popup__button--dock { display: none; } </style> <!-- require GeoScene REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@geoscene/geoscene-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/geometry/geometryEngine", "geoscene/widgets/Search", "geoscene/rest/locator", "geoscene/core/watchUtils" ], function (geosceneConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new geosceneRest.ApiKey({ key: "YOUR_API_KEY" }); const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data geosceneRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } const title = `Global facts near ${city}`; const content = `Population: ${attributes.TOTPOP}<br>Males: ${attributes.TOTMALES} <br>Females: ${attributes.TOTFEMALES}<br>Average Household Size: ${attributes.AVGHHSZ}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>当用户选择搜索结果时，我们希望查询该位置处的人口统计数据。要实现此功能，我们将监听 Search 微件上的
select-result事件，然后调用getDemographicData()函数，我们将在获取人口统计数据部分中定义该函数。Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>GeoScene API for JavaScript Tutorials: 获取人口统计数据</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .geoscene-view .geoscene-popup__button.geoscene-popup__button--dock { display: none; } </style> <!-- require GeoScene REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@geoscene/geoscene-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/geometry/geometryEngine", "geoscene/widgets/Search", "geoscene/rest/locator", "geoscene/core/watchUtils" ], function (geosceneConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new geosceneRest.ApiKey({ key: "YOUR_API_KEY" }); const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data geosceneRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } const title = `Global facts near ${city}`; const content = `Population: ${attributes.TOTPOP}<br>Males: ${attributes.TOTMALES} <br>Females: ${attributes.TOTFEMALES}<br>Average Household Size: ${attributes.AVGHHSZ}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
在视图上添加单击事件
我们还希望用户可通过单击地图中的任意位置来搜索人口统计数据。为此，我们将观察 MapView 上的单击事件。
- 使用
click事件来查看何时单击 MapView。Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>GeoScene API for JavaScript Tutorials: 获取人口统计数据</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .geoscene-view .geoscene-popup__button.geoscene-popup__button--dock { display: none; } </style> <!-- require GeoScene REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@geoscene/geoscene-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/geometry/geometryEngine", "geoscene/widgets/Search", "geoscene/rest/locator", "geoscene/core/watchUtils" ], function (geosceneConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new geosceneRest.ApiKey({ key: "YOUR_API_KEY" }); const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data geosceneRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } const title = `Global facts near ${city}`; const content = `Population: ${attributes.TOTPOP}<br>Males: ${attributes.TOTMALES} <br>Females: ${attributes.TOTFEMALES}<br>Average Household Size: ${attributes.AVGHHSZ}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html> - 返回事件后，使用生成的
mapPoint设置参数，然后在定位器上执行locationToAddress()。这将返回我们想要查找人口统计的城市。Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>GeoScene API for JavaScript Tutorials: 获取人口统计数据</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .geoscene-view .geoscene-popup__button.geoscene-popup__button--dock { display: none; } </style> <!-- require GeoScene REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@geoscene/geoscene-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/geometry/geometryEngine", "geoscene/widgets/Search", "geoscene/rest/locator", "geoscene/core/watchUtils" ], function (geosceneConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new geosceneRest.ApiKey({ key: "YOUR_API_KEY" }); const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data geosceneRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } const title = `Global facts near ${city}`; const content = `Population: ${attributes.TOTPOP}<br>Males: ${attributes.TOTMALES} <br>Females: ${attributes.TOTFEMALES}<br>Average Household Size: ${attributes.AVGHHSZ}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html> - 解析
locationToAddress()方法后，即可使用结果来获取离单击点最近的城市名称。我们可以使用此城市和在地图上单击的点来调用下一步所定义的getDemographicData()方法。Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>GeoScene API for JavaScript Tutorials: 获取人口统计数据</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .geoscene-view .geoscene-popup__button.geoscene-popup__button--dock { display: none; } </style> <!-- require GeoScene REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@geoscene/geoscene-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/geometry/geometryEngine", "geoscene/widgets/Search", "geoscene/rest/locator", "geoscene/core/watchUtils" ], function (geosceneConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new geosceneRest.ApiKey({ key: "YOUR_API_KEY" }); const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data geosceneRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } const title = `Global facts near ${city}`; const content = `Population: ${attributes.TOTPOP}<br>Males: ${attributes.TOTMALES} <br>Females: ${attributes.TOTFEMALES}<br>Average Household Size: ${attributes.AVGHHSZ}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
获取人口统计数据
要获取地图上某个区域的人口统计数据，我们将使用 GeoScene REST JS queryDemographicData() 方法。
创建函数
getDemographicData()以从 GeoScene REST JS 获取人口统计数据并处理结果。我们将添加城市和点（可从中获取人口统计数据）作为函数的参数。Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>GeoScene API for JavaScript Tutorials: 获取人口统计数据</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .geoscene-view .geoscene-popup__button.geoscene-popup__button--dock { display: none; } </style> <!-- require GeoScene REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@geoscene/geoscene-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/geometry/geometryEngine", "geoscene/widgets/Search", "geoscene/rest/locator", "geoscene/core/watchUtils" ], function (geosceneConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new geosceneRest.ApiKey({ key: "YOUR_API_KEY" }); const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data geosceneRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } const title = `Global facts near ${city}`; const content = `Population: ${attributes.TOTPOP}<br>Males: ${attributes.TOTMALES} <br>Females: ${attributes.TOTFEMALES}<br>Average Household Size: ${attributes.AVGHHSZ}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>使用 GeoScene REST JS 中的
queryDemographicData()方法查询人口统计数据。将studyAreas设置为点参数的经度和纬度。使用之前在 apiKey 中设置的authentication变量来验证此请求。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>GeoScene API for JavaScript Tutorials: 获取人口统计数据</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .geoscene-view .geoscene-popup__button.geoscene-popup__button--dock { display: none; } </style> <!-- require GeoScene REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@geoscene/geoscene-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/geometry/geometryEngine", "geoscene/widgets/Search", "geoscene/rest/locator", "geoscene/core/watchUtils" ], function (geosceneConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new geosceneRest.ApiKey({ key: "YOUR_API_KEY" }); const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data geosceneRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } const title = `Global facts near ${city}`; const content = `Population: ${attributes.TOTPOP}<br>Males: ${attributes.TOTMALES} <br>Females: ${attributes.TOTFEMALES}<br>Average Household Size: ${attributes.AVGHHSZ}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>以上方法将返回一个带有响应的 promise。可以通过使用
.then()来处理此 promise，直到 promise 得到解决，然后再处理响应。Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>GeoScene API for JavaScript Tutorials: 获取人口统计数据</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .geoscene-view .geoscene-popup__button.geoscene-popup__button--dock { display: none; } </style> <!-- require GeoScene REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@geoscene/geoscene-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/geometry/geometryEngine", "geoscene/widgets/Search", "geoscene/rest/locator", "geoscene/core/watchUtils" ], function (geosceneConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new geosceneRest.ApiKey({ key: "YOUR_API_KEY" }); const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data geosceneRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } const title = `Global facts near ${city}`; const content = `Population: ${attributes.TOTPOP}<br>Males: ${attributes.TOTMALES} <br>Females: ${attributes.TOTFEMALES}<br>Average Household Size: ${attributes.AVGHHSZ}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>在
.then()中，可以检查结果是否返回，并通过将其添加到属性变量来处理这些结果。然后，可以调用showData()函数以在弹出窗口中显示结果。Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>GeoScene API for JavaScript Tutorials: 获取人口统计数据</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .geoscene-view .geoscene-popup__button.geoscene-popup__button--dock { display: none; } </style> <!-- require GeoScene REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@geoscene/geoscene-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/geometry/geometryEngine", "geoscene/widgets/Search", "geoscene/rest/locator", "geoscene/core/watchUtils" ], function (geosceneConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new geosceneRest.ApiKey({ key: "YOUR_API_KEY" }); const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data geosceneRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } const title = `Global facts near ${city}`; const content = `Population: ${attributes.TOTPOP}<br>Males: ${attributes.TOTMALES} <br>Females: ${attributes.TOTFEMALES}<br>Average Household Size: ${attributes.AVGHHSZ}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
在弹出窗口中显示数据
得到人口统计查询的结果后，我们希望在弹出窗口中向用户显示这些结果。
创建在上一步中所提到的
showData函数。Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>GeoScene API for JavaScript Tutorials: 获取人口统计数据</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .geoscene-view .geoscene-popup__button.geoscene-popup__button--dock { display: none; } </style> <!-- require GeoScene REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@geoscene/geoscene-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/geometry/geometryEngine", "geoscene/widgets/Search", "geoscene/rest/locator", "geoscene/core/watchUtils" ], function (geosceneConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new geosceneRest.ApiKey({ key: "YOUR_API_KEY" }); const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data geosceneRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } const title = `Global facts near ${city}`; const content = `Population: ${attributes.TOTPOP}<br>Males: ${attributes.TOTMALES} <br>Females: ${attributes.TOTFEMALES}<br>Average Household Size: ${attributes.AVGHHSZ}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>定义弹出窗口的
title和content。在标题中，我们将说明城市的名称。在内容中，将显示该城市的人口统计数据。Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>GeoScene API for JavaScript Tutorials: 获取人口统计数据</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .geoscene-view .geoscene-popup__button.geoscene-popup__button--dock { display: none; } </style> <!-- require GeoScene REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@geoscene/geoscene-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/geometry/geometryEngine", "geoscene/widgets/Search", "geoscene/rest/locator", "geoscene/core/watchUtils" ], function (geosceneConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new geosceneRest.ApiKey({ key: "YOUR_API_KEY" }); const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data geosceneRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } const title = `Global facts near ${city}`; const content = `Population: ${attributes.TOTPOP}<br>Males: ${attributes.TOTMALES} <br>Females: ${attributes.TOTFEMALES}<br>Average Household Size: ${attributes.AVGHHSZ}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>打开给定点处的弹出窗口，显示标题和内容。
Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>GeoScene API for JavaScript Tutorials: 获取人口统计数据</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .geoscene-view .geoscene-popup__button.geoscene-popup__button--dock { display: none; } </style> <!-- require GeoScene REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@geoscene/geoscene-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/geometry/geometryEngine", "geoscene/widgets/Search", "geoscene/rest/locator", "geoscene/core/watchUtils" ], function (geosceneConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new geosceneRest.ApiKey({ key: "YOUR_API_KEY" }); const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data geosceneRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } const title = `Global facts near ${city}`; const content = `Population: ${attributes.TOTPOP}<br>Males: ${attributes.TOTMALES} <br>Females: ${attributes.TOTFEMALES}<br>Average Household Size: ${attributes.AVGHHSZ}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>接下来，我们想在获得人口统计数据的区域周围显示一个缓冲区，以便用户知道查询中包含什么。我们将创建 1 英里的缓冲区并将其添加到视图中。
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>GeoScene API for JavaScript Tutorials: 获取人口统计数据</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .geoscene-view .geoscene-popup__button.geoscene-popup__button--dock { display: none; } </style> <!-- require GeoScene REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@geoscene/geoscene-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@geoscene/geoscene-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/geometry/geometryEngine", "geoscene/widgets/Search", "geoscene/rest/locator", "geoscene/core/watchUtils" ], function (geosceneConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new geosceneRest.ApiKey({ key: "YOUR_API_KEY" }); const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data geosceneRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } const title = `Global facts near ${city}`; const content = `Population: ${attributes.TOTPOP}<br>Males: ${attributes.TOTMALES} <br>Females: ${attributes.TOTFEMALES}<br>Average Household Size: ${attributes.AVGHHSZ}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
运行应用程序
在 CodePen 中，运行代码以显示地图。
单击地图或执行搜索以获取给定城市的人口统计信息。
下一步是什么？
要了解如何使用其他 API 功能，请参阅以下教程：
解决方案
估计时间
20 分钟