forked from SuperMap/iClient-JavaScript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathecharts_linesBus.html
More file actions
112 lines (105 loc) · 3.67 KB
/
echarts_linesBus.html
File metadata and controls
112 lines (105 loc) · 3.67 KB
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
<!--********************************************************************
* Copyright© 2000 - 2018 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<html>
<head>
<meta charset='utf-8'/>
<title data-i18n="resources.title_linesBus"></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
<script type="text/javascript" include="echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
<script type="text/javascript">
var data;
var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
" with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
" Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
" <a href='http://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts</a>";
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
var tileURL = host + "/iserver/services/maps/rest/maps/世界地图_Gray/zxyTileImage.png?z={z}&x={x}&y={y}";
var map = new mapboxgl.Map({
container: 'map',
style: {
"version": 8,
"sources": {
"raster-tiles": {
"attribution": attribution,
"type": "raster",
"tiles": [tileURL],
"tileSize": 256,
},
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 18
}]
},
center: [116.5, 39.8],
zoom: 8
});
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
var uploadedDataURL = "../data/lines-bus.json";
$.get(uploadedDataURL, function (data) {
var busLines = [].concat.apply([], data.map(function (busLine, idx) {
var prevPt;
var points = [];
for (var i = 0; i < busLine.length; i += 2) {
var pt = [busLine[i], busLine[i + 1]];
if (i > 0) {
pt = [
prevPt[0] + pt[0],
prevPt[1] + pt[1]
];
}
prevPt = pt;
points.push([pt[0] / 1e4, pt[1] / 1e4]);
}
return {
coords: points
};
}));
option = {
GLMap: {
roam: true
},
coordinateSystem: 'GLMap',
series: [{
type: 'lines',
coordinateSystem: 'GLMap',
polyline: true,
data: busLines,
silent: true,
lineStyle: {
normal: {
color: 'rgb(200, 35, 45)',
opacity: 0.2,
width: 1
}
},
progressiveThreshold: 500,
progressive: 200
}]
};
var echartslayer = new EchartsLayer(map);
echartslayer.chart.setOption(option);
});
</script>
</body>
</html>