尝试一下 在 CodePen 中打开 在线预览 T这个示例演示了如何使用最小配置的 TimeSlider 微件。TimeSlider 微件简化了在 JavaScript 应用程序中可视化时态数据的过程。
It它使用 FeatureLayer 实例以 6 小时间隔可视化整个美国连续 72 小时的增量降水预报。
该地图显示了美国本土未来 72 小时内的定量 雨量预测(QPF） 。 数据从国家气象局制作的 国家数字预报数据库 每小时更新一次。 访问 门户项目描述 页面以获取更多信息。
初始化 TimeSlider 微件时有四种不同的 模式 选项：instant, time-window, cumulative-from-start 和 cumulative-from-end 。 时间滑块的默认 模式是 time-window 。 该示例使用此默认模式，这意味着该滑块将显示落在给定时间范围内的降水数据，在本例中为 6 小时。
我们正在时间滑块部微件上设置 视图 属性。 每当时间滑块的 timeExtent 更改时，TimeSlider 微件将更新视图的 timeExtent 。 设置 视图 属性将影响视图中的任何时间感知图层。
1
2
3
4
5
6
7
// time slider widget initialization
const timeSlider = new TimeSlider({
container : "timeSlider" ,
mode : "time-window" ,
view : view
});
view.ui.add(timeSlider, "manual" );
加载图层视图后，将设置时间滑块微件的 fullTimeExtent ，如下所示。 服务 的 layer.timeInfo.fullTimeExtent 的 结束 时间不是整小时。 因此调用 TimeExtent.expandTo() 方法来围绕时间滑块的 fullTimeExtent 来适应整小时。
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
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport"
content = "initial-scale=1,maximum-scale=1,user-scalable=no" />
< title > TimeSlider widget | Sample | GeoScene API for JavaScript 4.22 </ title >
< link rel = "stylesheet" href = "https://js.geoscene.cn/4.23/geoscene/themes/light/main.css" />
< script src = "https://js.geoscene.cn/4.23/" > </ script >
< style >
html ,
body ,
#viewDiv {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
}
#timeSlider {
position : absolute;
left : 5% ;
right : 5% ;
bottom : 20px ;
}
#titleDiv {
padding : 10px ;
font-weight : 36 ;
text-align : center;
}
</ style >
< script >
require ([
"geoscene/Map" ,
"geoscene/views/MapView" ,
"geoscene/layers/FeatureLayer" ,
"geoscene/widgets/TimeSlider" ,
"geoscene/widgets/Expand" ,
"geoscene/widgets/Legend"
], ( Map , MapView, FeatureLayer, TimeSlider, Expand, Legend ) => {
const layer = new FeatureLayer({
url :
"https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/NDFD_Precipitation_v1/FeatureServer/0"
});
const map = new Map ({
basemap : "hybrid" ,
layers : [layer]
});
const view = new MapView({
map : map,
container : "viewDiv" ,
zoom : 4 ,
center : [- 100 , 30 ]
});
// time slider widget initialization
const timeSlider = new TimeSlider({
container : "timeSlider" ,
view : view,
timeVisible : true , // show the time stamps on the timeslider
loop : true
});
// add the UI for a title
view.ui.add( "titleDiv" , "top-right" );
view.whenLayerView(layer).then( ( lv ) => {
// around up the full time extent to full hour
timeSlider.fullTimeExtent = layer.timeInfo.fullTimeExtent.expandTo( "hours" );
timeSlider.stops = {
interval : layer.timeInfo.interval
};
});
const legend = new Legend({
view : view
});
const legendExpand = new Expand({
expandIconClass : "esri-icon-legend" ,
expandTooltip : "图例" ,
view : view,
content : legend,
expanded : false
});
view.ui.add(legendExpand, "top-left" );
});
</ script >
</ head >
< body >
< div id = "viewDiv" > </ div >
< div id = "timeSlider" > </ div >
< div id = "titleDiv" class = "geoscene-widget" >
< div id = "titleText" > Precipitation forecast for next 72 hours </ div >
</ div >
</ body >
</ html >
1
2
3
4
view.whenLayerView(layer).then( function ( lv ) {
// around up the full time extent to full hour
timeSlider.fullTimeExtent = layer.timeInfo.fullTimeExtent.expandTo( "hours" );
});