了解如何格式化弹出窗口以显示要素图层中的属性。
要素图层是托管要素服务中的数据集。每个要素图层均包含具有单一几何类型和属性组的要素。当用户单击某个要素时，可以使用弹出窗口显示属性。可将弹出窗口配置为以不同方式 (包括图表或媒体) 显示原始属性值、计算值或内容。
在本教程中，将使用 PopupTemplate 在三个不同的托管要素图层的弹出窗口中以不同方式显示要素属性。
步骤
创建新 Pen
- 要开始使用，请完成显示地图教程 或 使用此 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 类可为 Trailheads 要素图层定义具有属性的内容。
创建 popupTrailheads 并将 content 属性设置为自定义 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 类定义条形图，以显示 Trails 要素图层的最小和最大高程值。
创建 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。在将 trails 添加到 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 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 类在表中显示 Parks and Open Spaces 要素图层的属性名称和值。将表与 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。在将 openspaces 添加到 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
"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 功能，请参阅以下教程：