具有 VectorFieldRenderer 的托管 ImageryTileLayer
此示例显示如何将托管 ImageryTileLayer 的实例添加到 MapView 中的地图。VectorFieldRenderer 应用于 ImageryTileLayer 实例，以显示应用程序加载时 2011 年 10 月 1 日记录的风速和风向。然后，当 TimeSlider 对时态数据进行动画处理时，用户可以显示 10 月份的每日风速和风向。
此示例中使用的影像图层包含来自 NASA 的 2011 年北美土地数据同化系统 （NLDAS） 风数据。它包含地表以上 10 米处测量的震级和方向数据。
风速和风向变量可以使用 VectorFieldRenderer 可视化，如下所示：
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Hosted ImageryTileLayer with VectorFieldRenderer | Sample | GeoScene API for JavaScript 4.22</title>
<link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/dark/main.css" />
<script src="https://js.geoscene.cn/4.23/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"geoscene/Map",
"geoscene/views/MapView",
"geoscene/layers/ImageryTileLayer",
"geoscene/widgets/Legend",
"geoscene/widgets/TimeSlider",
"geoscene/widgets/Expand",
], (Map, MapView, ImageryTileLayer, Legend, TimeSlider, Expand) => {
// create a new instance of an imagery tile layer and apply
// VectorFieldRenderer to show the speed and direction of wind
// as recorded on Oct 1, 2011
const layer = new ImageryTileLayer({
url: "https://tiledimageservices.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/NLDAS2011_daily_wind_magdir/ImageServer",
title: "2011 wind - 10 meters above surface",
renderer: {
type: "vector-field",
style: "classified-arrow",
flowRepresentation: "flow-to", // show flow to angle for wind direction
symbolTileSize: 30,
visualVariables: [
{
type: "size",
field: "Magnitude", // values read from the first band
maxDataValue: 32,
maxSize: "60px",
minDataValue: 0.04,
minSize: "20px"
},
{
type: "rotation",
field: "Direction", // values read from the second band
rotationType: "geographic"
}
]
}
});
const map = new Map({
basemap: "geoscene-blue",
layers: [layer]
});
const view = new MapView({
map: map,
container: "viewDiv",
center: [-100, 38],
zoom: 3
});
// time slider widget initialization
// users can visualize daily wind information
// for the month of Oct 2011 using time slider
const timeSlider = new TimeSlider({
container: "timeSlider",
mode: "instant",
view: view,
timeVisible: true,
// Oct 1 - Oct 31
fullTimeExtent: {
start: new Date(1317427200000), // Oct 1, 2021,
end: new Date(1320019200000) // Oct 31, 2021
},
stops: {
interval: {
value: 24,
unit: "hours"
}
}
});
view.ui.add(timeSlider, "bottom-left");
// add a legend for the wind direction and speed layer
const legendExpand = new Expand({
collapsedIconClass: "esri-icon-collapse",
expandIconClass: "esri-icon-expand",
expandTooltip: "图例",
view,
content: new Legend({
view
}),
expanded: false
});
view.ui.add(legendExpand, "top-left");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>在 4.22 版中，我们添加了对 ImageryTileLayer 的时间支持。此示例已更新，以展示如何将 TimeSlider 微件与时间感知 ImageryTileLayer 配合使用。TimeSlider 将显示10月份随时间推移的每日风速和风向。TimeSlider 微件简化了在 JavaScript 应用程序中可视化时态数据的过程。
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Hosted ImageryTileLayer with VectorFieldRenderer | Sample | GeoScene API for JavaScript 4.22</title>
<link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/dark/main.css" />
<script src="https://js.geoscene.cn/4.23/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"geoscene/Map",
"geoscene/views/MapView",
"geoscene/layers/ImageryTileLayer",
"geoscene/widgets/Legend",
"geoscene/widgets/TimeSlider",
"geoscene/widgets/Expand",
], (Map, MapView, ImageryTileLayer, Legend, TimeSlider, Expand) => {
// create a new instance of an imagery tile layer and apply
// VectorFieldRenderer to show the speed and direction of wind
// as recorded on Oct 1, 2011
const layer = new ImageryTileLayer({
url: "https://tiledimageservices.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/NLDAS2011_daily_wind_magdir/ImageServer",
title: "2011 wind - 10 meters above surface",
renderer: {
type: "vector-field",
style: "classified-arrow",
flowRepresentation: "flow-to", // show flow to angle for wind direction
symbolTileSize: 30,
visualVariables: [
{
type: "size",
field: "Magnitude", // values read from the first band
maxDataValue: 32,
maxSize: "60px",
minDataValue: 0.04,
minSize: "20px"
},
{
type: "rotation",
field: "Direction", // values read from the second band
rotationType: "geographic"
}
]
}
});
const map = new Map({
basemap: "geoscene-blue",
layers: [layer]
});
const view = new MapView({
map: map,
container: "viewDiv",
center: [-100, 38],
zoom: 3
});
// time slider widget initialization
// users can visualize daily wind information
// for the month of Oct 2011 using time slider
const timeSlider = new TimeSlider({
container: "timeSlider",
mode: "instant",
view: view,
timeVisible: true,
// Oct 1 - Oct 31
fullTimeExtent: {
start: new Date(1317427200000), // Oct 1, 2021,
end: new Date(1320019200000) // Oct 31, 2021
},
stops: {
interval: {
value: 24,
unit: "hours"
}
}
});
view.ui.add(timeSlider, "bottom-left");
// add a legend for the wind direction and speed layer
const legendExpand = new Expand({
collapsedIconClass: "esri-icon-collapse",
expandIconClass: "esri-icon-expand",
expandTooltip: "图例",
view,
content: new Legend({
view
}),
expanded: false
});
view.ui.add(legendExpand, "top-left");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>