Skip to content

Commit cc3eb40

Browse files
luoxiao-supermapluoxiao-supermap
committed
【feature】新增时间轴组件例子 review by songym
1 parent a251610 commit cc3eb40

File tree

6 files changed

+520
-108
lines changed

6 files changed

+520
-108
lines changed

‎examples/component/components_echarts_vue.html‎

Lines changed: 112 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -3,113 +3,117 @@
33
*********************************************************************-->
44
<!DOCTYPE html>
55
<html>
6-
<head>
7-
<meta charset="UTF-8" />
8-
<title data-i18n="resources.title_componentsEcharts_Vue"></title>
9-
<script type="text/javascript" include="vue,jquery" src="../js/include-web.js"></script>
10-
<script include="iclient-mapboxgl-vue,mapbox-gl-enhance,echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
11-
<style>
12-
#main {
13-
margin: 0 auto;
14-
width: 100%;
15-
height: 100%;
16-
}
17-
</style>
18-
</head>
6+
<head>
7+
<meta charset="UTF-8" />
8+
<title data-i18n="resources.title_componentsEcharts_Vue"></title>
9+
<script type="text/javascript" include="vue,jquery" src="../js/include-web.js"></script>
10+
<script
11+
include="iclient-mapboxgl-vue,mapbox-gl-enhance,echarts"
12+
src="../../dist/mapboxgl/include-mapboxgl.js"
13+
></script>
14+
<style>
15+
#main {
16+
margin: 0 auto;
17+
width: 100%;
18+
height: 100%;
19+
}
20+
21+
</style>
22+
</head>
1923

20-
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
21-
<div id="main">
22-
<sm-web-map :map-options="mapOptions">
23-
<sm-echarts-layer :options="echartsOptions"></sm-echarts-layer>
24-
</sm-web-map>
25-
</div>
26-
<script>
27-
$.get('../data/changchunBus.json', function(data) {
28-
var echartsOptions = {
29-
animation: false,
30-
GLMap: {
31-
roam: true,
32-
},
33-
coordinateSystem: 'GLMap',
34-
geo: {
35-
map: 'GLMap',
36-
},
37-
series: [
38-
{
39-
type: 'lines',
40-
polyline: true,
41-
data: data,
42-
silent: true,
43-
lineStyle: {
44-
normal: {
45-
opacity: 0.2,
46-
width: 1,
47-
},
48-
},
49-
progressiveThreshold: 500,
50-
progressive: 100,
51-
},
52-
{
53-
type: 'lines',
54-
coordinateSystem: 'GLMap',
55-
polyline: true,
56-
data: data,
57-
lineStyle: {
58-
normal: {
59-
width: 0.2,
60-
},
61-
},
62-
effect: {
63-
constantSpeed: 40,
64-
show: true,
65-
trailLength: 0.02,
66-
symbolSize: 2,
67-
},
68-
},
69-
],
70-
};
71-
new Vue({
72-
el: '#main',
73-
data() {
74-
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
75-
var attribution =
76-
"<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
77-
" with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
78-
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
79-
return {
80-
echartsOptions: echartsOptions,
81-
mapOptions: {
82-
container: 'map', // container id
83-
style: {
84-
version: 8,
85-
sources: {
86-
'raster-tiles': {
87-
attribution: attribution,
88-
type: 'raster',
89-
tiles: [
90-
host +
91-
'/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}',
92-
],
93-
tileSize: 256,
94-
},
95-
},
96-
layers: [
97-
{
98-
id: 'simple-tiles',
99-
type: 'raster',
100-
source: 'raster-tiles',
101-
minzoom: 0,
102-
maxzoom: 22,
103-
},
104-
],
105-
},
106-
center: [125.35, 43.86],
107-
zoom: 10,
108-
},
109-
};
110-
},
111-
});
112-
});
113-
</script>
114-
</body>
24+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
25+
<div id="main">
26+
<sm-web-map :map-options="mapOptions">
27+
<sm-echarts-layer :options="echartsOptions"></sm-echarts-layer>
28+
</sm-web-map>
29+
</div>
30+
<script>
31+
$.get('../data/changchunBus.json', function(data) {
32+
var echartsOptions = {
33+
animation: false,
34+
GLMap: {
35+
roam: true
36+
},
37+
coordinateSystem: 'GLMap',
38+
geo: {
39+
map: 'GLMap'
40+
},
41+
series: [
42+
{
43+
type: 'lines',
44+
polyline: true,
45+
data: data,
46+
silent: true,
47+
lineStyle: {
48+
normal: {
49+
opacity: 0.2,
50+
width: 1
51+
}
52+
},
53+
progressiveThreshold: 500,
54+
progressive: 100
55+
},
56+
{
57+
type: 'lines',
58+
coordinateSystem: 'GLMap',
59+
polyline: true,
60+
data: data,
61+
lineStyle: {
62+
normal: {
63+
width: 0.2
64+
}
65+
},
66+
effect: {
67+
constantSpeed: 40,
68+
show: true,
69+
trailLength: 0.02,
70+
symbolSize: 2
71+
}
72+
}
73+
]
74+
};
75+
new Vue({
76+
el: '#main',
77+
data() {
78+
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
79+
var attribution =
80+
"<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
81+
" with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
82+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
83+
return {
84+
echartsOptions: echartsOptions,
85+
mapOptions: {
86+
container: 'map', // container id
87+
style: {
88+
version: 8,
89+
sources: {
90+
'raster-tiles': {
91+
attribution: attribution,
92+
type: 'raster',
93+
tiles: [
94+
host +
95+
'/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}'
96+
],
97+
tileSize: 256
98+
}
99+
},
100+
layers: [
101+
{
102+
id: 'simple-tiles',
103+
type: 'raster',
104+
source: 'raster-tiles',
105+
minzoom: 0,
106+
maxzoom: 22
107+
}
108+
]
109+
},
110+
center: [125.35, 43.86],
111+
zoom: 10
112+
}
113+
};
114+
}
115+
});
116+
});
117+
</script>
118+
</body>
115119
</html>

0 commit comments

Comments
 (0)