Skip to content

Commit 6520af5

Browse files
chenxianhuiichenxianhuii
committed
[example]新增多时相播放demo示例
1 parent 12fc838 commit 6520af5

File tree

14 files changed

+877
-0
lines changed

14 files changed

+877
-0
lines changed

‎examples/leaflet/config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -581,6 +581,13 @@ var exampleConfig = {
581581
version: "10.2.0",
582582
thumbnail: "imageService.png",
583583
fileName: "imageService"
584+
},
585+
{
586+
name: "多时相播放",
587+
name_en: "Multiphase play",
588+
version: '11.3.0',
589+
thumbnail: "multiphaseplay.png",
590+
fileName: "multiphaseplay"
584591
}
585592
]
586593
},

‎examples/leaflet/img/multiphaseplay.png

42.6 KB
Loading

‎examples/leaflet/multiphaseplay.html

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2024 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!--********************************************************************
5+
* 该示例需要引入
6+
* Echarts (https://github.com/apache/echarts)
7+
*********************************************************************-->
8+
<!DOCTYPE html>
9+
<html>
10+
11+
<head>
12+
<meta charset="UTF-8">
13+
<title data-i18n="resources.title_multiphaseplay"></title>
14+
<style>
15+
#timeline {
16+
position: absolute;
17+
bottom: 50px;
18+
width: 100%;
19+
height: 100px;
20+
z-index: 9999;
21+
}
22+
23+
#title {
24+
position: absolute;
25+
top: 50px;
26+
left: 50%;
27+
transform: translateX(-50%);
28+
z-index: 9999;
29+
text-align: center;
30+
font-size: 24px;
31+
font-weight: bold;
32+
color: rgba(0, 0, 0, 0.85);
33+
}
34+
.subTitle {
35+
font-size: 16px;
36+
font-weight: normal
37+
}
38+
</style>
39+
<script type="text/javascript" src="../js/include-web.js"></script>
40+
</head>
41+
42+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
43+
<div id="title">
44+
<div data-i18n="resources.text_multiphaseplay"></div>
45+
<div data-i18n="resources.text_2009To2016NDVI" class="subTitle"></div>
46+
</div>
47+
<div id="map" style="width: 100%;height:100%"></div>
48+
<div id="timeline"></div>
49+
<script type="text/javascript" include="echarts" src="../../dist/leaflet/include-leaflet.js"></script>
50+
<script type="text/javascript">
51+
var host = window.isLocal ? window.server : "https://iserver.supermap.io",
52+
url = host + "/iserver/services/map-china400/rest/maps/China_4326";
53+
var config = {
54+
imageService: host + "/iserver/services/imageservice-image/restjsr",
55+
imageWMSService: host + "/iserver/services/imageservice-image/wms130/nvdi",
56+
collection: "nvdi",
57+
tileSize: "1028,1028",
58+
};
59+
var map, allFeatures = [],
60+
myChart,
61+
layer, proj,
62+
wmsUrlCache = [];
63+
64+
initMap();
65+
66+
function initMap() {
67+
map = new L.map('map', {
68+
preferCanvas: true,
69+
crs: L.CRS.EPSG4326,
70+
center: {
71+
lon: 100,
72+
lat: 35
73+
},
74+
maxZoom: 18,
75+
zoom: 3
76+
});
77+
new L.supermap.TiledMapLayer(url).addTo(map);
78+
}
79+
80+
getAllFeatures();
81+
82+
function getAllFeatures() {
83+
var url = config.imageService + "/search.json?collections=" + config.collection;
84+
$.get(config.imageService + "/collections/" + config.collection + "/tileInfo.json").then(res => {
85+
proj = res.crs;
86+
});
87+
$.get(url).then(res => {
88+
res.features.forEach(feature => {
89+
allFeatures.push({
90+
collection: feature.collection,
91+
name: feature.assets.data.title,
92+
time: feature.properties.createtime,
93+
bbox: feature.bbox
94+
});
95+
});
96+
allFeatures.forEach(feature => {
97+
var imageExtent = feature.bbox;
98+
var wmsurl = formatWMSURL(feature.time, imageExtent);
99+
wmsUrlCache.push(wmsurl);
100+
});
101+
start();
102+
});
103+
}
104+
105+
function start() {
106+
addStaticImageLayer();
107+
layer.once("load", addTimeLine);
108+
}
109+
110+
function addStaticImageLayer() {
111+
var feature = allFeatures[0];
112+
var imageExtent = feature.bbox;
113+
var url = formatWMSURL(feature.time, imageExtent);
114+
layer = buildImageLayer(url, imageExtent);
115+
layer.addTo(map);
116+
}
117+
118+
function addTimeLine() {
119+
var allTime = allFeatures.map(feature => feature.time.split('/')[0]);
120+
myChart = echarts.init(document.getElementById('timeline'));
121+
var option = {
122+
timeline: {
123+
axisType: 'category',
124+
show: true,
125+
autoPlay: true,
126+
playInterval: 1000,
127+
data: allTime,
128+
label: {
129+
normal: {
130+
textStyle: {
131+
color: '#111'
132+
}
133+
},
134+
emphasis: {
135+
textStyle: {
136+
color: '#000'
137+
}
138+
}
139+
},
140+
controlStyle: {
141+
normal: {
142+
color: '#666',
143+
borderColor: '#666'
144+
}
145+
}
146+
}
147+
}
148+
myChart.setOption(option);
149+
myChart.on('timelinechanged', function (params) {
150+
var url = wmsUrlCache[params.currentIndex];
151+
layer.setUrl(url);
152+
changeTimelinePlay(false);
153+
layer.once("load", changeTimelinePlay);
154+
});
155+
}
156+
157+
function changeTimelinePlay(state = true) {
158+
myChart.dispatchAction({
159+
type: 'timelinePlayChange',
160+
playState: state
161+
})
162+
}
163+
164+
function formatWMSURL(time, extent) {
165+
var commentSetting = config.imageWMSService +
166+
'?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=0.0.3';
167+
var SQLFilter = "SQLFILTER=createtime='" + time.replaceAll("/", "-") + "'";
168+
var crs = "CRS=" + proj;
169+
var width = "WIDTH=" + config.tileSize.split(",")[0];
170+
var height = "HEIGHT=" + config.tileSize.split(",")[1];
171+
var bbox = [extent[1], extent[0], extent[3], extent[2]];
172+
var bboxStr = "BBOX=" + bbox.join(",");
173+
return commentSetting + "&" + SQLFilter + "&" + crs + "&" + width + "&" + height + "&" + bboxStr;
174+
}
175+
176+
function buildImageLayer(url, imageExtent) {
177+
var imageBounds = [
178+
[imageExtent[1], imageExtent[0]],
179+
[imageExtent[3], imageExtent[2]]
180+
];
181+
return L.imageOverlay(url, imageBounds, {
182+
opacity: 0.7
183+
});
184+
}
185+
186+
</script>
187+
</body>
188+
189+
</html>

‎examples/locales/en-US/resources.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -812,6 +812,7 @@ window.examplesResources = {
812812
"title_ugcResample": "Resample Analysis",
813813
"title_ugcPointPosition": "Point And Line Analysis",
814814
"title_ugcSpatial": "Spacial Analysis",
815+
"title_multiphaseplay": "Multiphase Play",
815816

816817
"text_graphmap_shortest_analysis": "Shortest Path Analysis",
817818
"text_startNode": "start node",
@@ -1692,6 +1693,8 @@ window.examplesResources = {
16921693
"text_lastPage": "Last",
16931694
"text_queryDistance": "Query Distance(Degree)",
16941695
"text_queryDistanceLimit": "The query distance must be greater than zero",
1696+
"text_multiphaseplay": "Multiphase Play(2009-2016 years of NDVI)",
1697+
"text_2009To2016NDVI": "2009-2016 years of NDVI",
16951698

16961699
"btn_previous":"Previous",
16971700
"btn_next":"Next",

‎examples/locales/zh-CN/resources.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -777,6 +777,7 @@ window.examplesResources = {
777777
"title_l7_3d_terrain": "自定义3D地形（LOD）",
778778
"title_l7_snow_particle": "雪花粒子",
779779
"title_l7_rain_particle": "雨滴粒子",
780+
"title_multiphaseplay": "多时相播放",
780781

781782
"text_district_search": "行政区检索",
782783
"text_rectangle_search": "矩形检索",
@@ -1648,6 +1649,8 @@ window.examplesResources = {
16481649
"text_lastPage": "尾页",
16491650
"text_queryDistance": "查询距离(度)",
16501651
"text_queryDistanceLimit": "查询距离必须大于零",
1652+
"text_multiphaseplay": "多时相播放",
1653+
"text_2009To2016NDVI": "2009-2016年5月植被指数",
16511654

16521655

16531656

‎examples/mapboxgl/config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -522,6 +522,13 @@ var exampleConfig = {
522522
version: "10.2.0",
523523
thumbnail: "imageService.png",
524524
fileName: "imageService"
525+
},
526+
{
527+
name: "多时相播放",
528+
name_en: "Multiphase play",
529+
version: '11.3.0',
530+
thumbnail: "multiphaseplay.png",
531+
fileName: "multiphaseplay"
525532
}
526533
]
527534
},

‎examples/mapboxgl/img/multiphaseplay.png

42.6 KB
Loading

0 commit comments

Comments
 (0)