了解如何使用弹出窗口显示要素图层属性。
要素图层是要素服务的数据集。要素图层的每个要素都具有相同的几何类型 (点、线或面) 和属性。当用户单击某个要素时，可以使用弹出窗口显示属性。弹出窗口支持显示原始属性值、计算值、图表或媒体等内容。
在本教程中，将使用 PopupTemplate 在三个不同的托管要素图层的弹出窗口中以不同方式显示要素属性。
步骤
创建新 Pen
- 在此之前，先了解显示地图教程 。
添加模块
通过 require 引入FeatureLayer 模块。
GeoScene Maps SDK for JavaScript 提供了 AMD 模块和 ES 模块，本教程中我们是以 AMD 为例。AMD require 函数使用引用来确定加载哪些模块 - 例如，您可以指定 "geoscene/Map" 来加载 Map 模块。加载模块后，它们将作为参数 (例如，Map) 传递给回调函数，以便在应用程序中使用。保持模块引用和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息，请访问工具指南主题。
添加行。添加行。更改行
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
require([
"geoscene/config",
"geoscene/Map",
"geoscene/views/MapView",
"geoscene/layers/FeatureLayer"
],
function(geosceneConfig, Map, MapView, FeatureLayer){
显示属性
显示要素属性最简单的方法是利用弹出窗口的标题或内容区域显示字段名。使用 PopupTemplate 类可为 登山点 要素图层定义弹窗。
创建 popupTrailheads 对象，content 属性值设置为自定义 HTML 字符串，HTML 字符串由步道名称和城市辖区等信息组成。
添加行。添加行。添加行。添加行。添加行。
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
const view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80543,34.02700], //Longitude, latitude
zoom: 13
});
// Define a pop-up for Trailheads
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"
}
创建 trailheads FeatureLayer。在将 trailheads 添加到 map 之前，请设置 url、outFields 和 popupTemplate 属性。FeatureLayer 将自动转换 popupTemplate 以创建对象的类实例。
添加行。添加行。添加行。添加行。添加行。添加行。添加行。
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
// Define a pop-up for Trailheads
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);
单击徒步旅行者，显示弹出窗口。
显示图表
也可以在弹出窗口中显示不同类型的图表 (也称为媒体内容)。通过定义图表类型和字段 (属性) 值来创建图表。接下来我们使用 PopupTemplate 类来定义柱状图，显示 徒步路线 要素图层的最小和最大高程值。
创建 popupTrails 对象。在 content 属性中，type 设置为 media，定义显示路线最小、最大高程值的 column-chart柱状图。
添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。
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
map.add(trailheads);
// Define a popup for Trails
const popupTrails = {
title: "Trail Information",
content: [{
type: "media",
mediaInfos: [{
type: "column-chart",
caption: "",
value: {
fields: [ "ELEV_MIN","ELEV_MAX" ],
normalizeField: null,
tooltipField: "Min and max elevation values"
}
}]
}]
}
创建 trails FeatureLayer，设置 url、outFields 和 popupTemplate 属性，将 trails 添加到 map。FeatureLayer 将自动转换 popupTemplate 以创建对象的类实例。
添加行。添加行。添加行。添加行。添加行。添加行。添加行。
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
// Define a popup for Trails
const popupTrails = {
title: "Trail Information",
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);
单击线可查看包含高程数据柱状图的弹出窗口。
显示表格
弹窗还支持以表格展示要素属性。接下来我们使用 PopupTemplate 和 fieldInfos 类在表中显示 公园和广场 要素图层的属性名称和值。
创建 popupOpenspaces 对象。在 content 属性中，将 type 设置为 fields 并定义 fieldInfos 数组。
添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。
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
map.add(trails,0);
// Define popup for Parks and Open Spaces
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"
}
]
}]
}
创建 openspaces FeatureLayer，设置 url、outFields 和 popupTemplate 属性，最后将 openspaces 添加到 map。FeatureLayer 将自动转换 popupTemplate 以创建对象的类实例。
添加行。添加行。添加行。添加行。添加行。添加行。添加行。
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
"stringFieldOption": "text-box"
}
]
}]
}
const openspaces = new FeatureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space_Styled/FeatureServer/0",
outFields: ["TYPE","PARK_NAME", "AGNCY_NAME","ACCESS_TYP","GIS_ACRES","TRLS_MI","TOTAL_GOOD","TOTAL_FAIR", "TOTAL_POOR"],
popupTemplate: popupOpenspaces
});
map.add(openspaces,0);
运行应用程序
在 CodePen 中，运行代码以显示地图。
单击地图中的每类要素都可查看对应弹出窗口，每个弹出窗口将以独特的方式显示要素属性。
下一步是什么？
要了解如何使用其他 API 功能和 GeoScene 服务，请参阅以下教程：