Skip to content

Commit 2a5222b

Browse files
tangqinGisertangqinGiser
committed
mbgl/l/ol 新增echarts 增量高性能图层示例。review by zhurc.
1 parent fa35b3d commit 2a5222b

35 files changed

+2500
-684
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,7 @@
178178

179179
- 新增链家房价数据可视化示例
180180

181+
- 新增`echarts` 增量高性能图层示例
181182

182183
### for OpenLayers
183184

@@ -195,6 +196,8 @@
195196

196197
- 新增链家房价数据可视化示例
197198

199+
- 新增`echarts` 增量高性能图层示例
200+
198201
### for MapboxGL
199202

200203
- 新增几何要素批量空间分析示例
@@ -205,6 +208,8 @@
205208

206209
- 新增高性能点图层示例
207210

211+
- 新增`echarts` 增量高性能图层示例
212+
208213
### Classic
209214

210215
## Web Site && Docs

‎examples/leaflet/config.js‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -606,78 +606,86 @@ var exampleConfig = {
606606
name_en: "scatter",
607607
thumbnail: "l_echartsEffectScatter.png",
608608
fileName: "echartsEffectScatter"
609-
},
610-
{
609+
}, {
611610
name: "迁徙图",
612611
name_en: "migration",
613612
thumbnail: "l_echartsGeoLines.gif",
614613
fileName: "echartsGeoLines"
615-
},
616-
{
614+
}, {
617615
name: "热力图",
618616
name_en: "heat map",
619617
thumbnail: "l_echartsHeatmap.png",
620618
fileName: "echartsHeatmap"
621-
},
622-
{
619+
}, {
623620
name: "线路图",
624621
name_en: "line",
625622
thumbnail: "l_echartsLinesBus.png",
626623
fileName: "echartsLinesBus"
627-
},
628-
{
624+
}, {
629625
name: "线特效",
630626
name_en: "line effect",
631627
thumbnail: "l_echartsLinesEffect.gif",
632628
fileName: "echartsLinesEffect"
633-
},
634-
{
629+
}, {
635630
name: "折线图",
636631
name_en: "line chart",
637632
thumbnail: "l_echartsLineMarker.png",
638633
fileName: "echartsLineMarker"
639-
},
640-
{
634+
}, {
641635
name: "柱状图",
642636
name_en: "bar chart",
643637
thumbnail: "l_echartsBar.png",
644638
fileName: "echartsBar"
645-
},
646-
{
639+
}, {
647640
name: "散点图",
648641
name_en: "scatter chart",
649642
thumbnail: "l_echartsScatter.png",
650643
fileName: "echartsScatter"
651-
},
652-
{
644+
}, {
653645
name: "饼图",
654646
name_en: "pie chart",
655647
thumbnail: "l_echartsPie.png",
656648
fileName: "echartsPie"
657-
},
658-
{
649+
}, {
659650
name: "世界飞机航线图",
660651
name_en: "Airplane route map",
661652
thumbnail: "l_echartsLinesAirline.png",
662653
fileName: "echartsLinesAirline"
663-
},
664-
{
654+
}, {
665655
name: "微博签到图",
666656
name_en: "weibo scatter",
667657
thumbnail: "l_echartsScatterWeibo.png",
668658
fileName: "echartsScatterWeibo"
669-
},
670-
{
659+
}, {
671660
name: "方形图",
672661
name_en: "binning on Map",
673662
thumbnail: "l_echartsCellMap.png",
674663
fileName: "echartsCellMap"
675-
},
676-
{
664+
}, {
677665
name: "2008到2017年地震情况统计",
678666
name_en: "2008 to 2017 years of earthquake statistics",
679667
thumbnail: "l_echartsEarthquake.png",
680668
fileName: "echartsEarthquake"
669+
}, {
670+
name: "2百万点数据绘制北京道路网络图",
671+
name_en: "Use lines to draw 2 millions Beijing streets",
672+
thumbnail: "l_echartsLinesMillionsBeijingRoads.png",
673+
fileName: "echarts_linesDrawMillionsBeijingRoadsNetwork"
674+
}, {
675+
name: "4百万点数据绘制全国铁路网络图",
676+
name_en: "Use lines to draw 4 millions Chinese railways",
677+
thumbnail: "l_echartsLinesMillionsRailway.png",
678+
fileName: "echarts_linesDrawMillionsRailwaysNetwork"
679+
}, {
680+
name: "1千4百万数据绘制全国水系图",
681+
name_en: "Use lines to draw 14 millions Chinese water system",
682+
thumbnail: "l_echartsLinesMillionsWaterSystem.png",
683+
fileName: "echarts_linesDrawMillionsWaterSystem"
684+
}, {
685+
name: "2千5百万数据绘制全国道路网络图",
686+
name_en: "Use lines to draw 25 millions Chinese roads",
687+
thumbnail: "l_echartsLinesMillionsRoads.png",
688+
fileName: "echarts_linesDrawMillionsRoadsNetwork_50WFeatures"
681689
}
682690
]
683691

@@ -731,7 +739,7 @@ var exampleConfig = {
731739
thumbnail: "l_mapvLayer_polygon.png",
732740
fileName: "mapVLayerPolygon"
733741
}, {
734-
name: "北京乡镇分布",
742+
name: "北京",
735743
name_en: "village of beijing",
736744
thumbnail: "l_mapvLayer_polygonBuildings.png",
737745
fileName: "mapVLayerPolygonBuildings"

‎examples/leaflet/echarts_linesDrawMillionsBeijingRoadsNetwork.html‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<html>
2+
<head>
3+
<meta charset='utf-8'/>
4+
<title>Use lines to draw 2 millions Beijing streets</title>
5+
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
6+
<script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
7+
<script type="text/javascript" include="echarts" src="../../dist/include-leaflet.js"></script>
8+
<style>
9+
body {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
#map {
15+
position: absolute;
16+
top: 0;
17+
bottom: 0;
18+
width: 100%;
19+
}
20+
</style>
21+
</head>
22+
<body>
23+
<div id='map'></div>
24+
<script type="text/javascript">
25+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
26+
var tileURL = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
27+
28+
map = L.map('map', {
29+
center: [39.98, 116.36],
30+
maxZoom: 18,
31+
zoom: 10
32+
});
33+
L.supermap.tiledMapLayer(tileURL).addTo(map);
34+
35+
option = {
36+
progressive: 20000,
37+
title: {
38+
top: '10px',
39+
text: resources.text_echartsLinesMillions_bjRoads,
40+
subtext: resources.text_echartsLinesMillions_bjRoads_subtext,
41+
left: 'center',
42+
textStyle: {
43+
color: '#fff'
44+
},
45+
subtextStyle: {
46+
color: '#fff'
47+
}
48+
},
49+
series: [{
50+
type: 'lines',
51+
blendMode: 'lighter',
52+
coordinateSystem: 'leaflet',
53+
dimensions: ['value'],
54+
data: new Float64Array(),
55+
polyline: true,
56+
large: true,
57+
lineStyle: {
58+
color: 'orange',
59+
width: 1,
60+
opacity: 0.3
61+
}
62+
}]
63+
};
64+
65+
var echartsLayer = L.supermap.echartsLayer(option).addTo(map);
66+
67+
var CHUNK_COUNT = 19;
68+
69+
function fetchData(idx) {
70+
if (idx > CHUNK_COUNT) {
71+
return;
72+
}
73+
var dataURL = `http://iclient.supermap.io/web/data/bigdata_beijingroads/bigDta_${idx}.bin`;
74+
var xhr = new XMLHttpRequest();
75+
xhr.open('GET', dataURL, true);
76+
xhr.responseType = 'arraybuffer';
77+
78+
xhr.onload = function (e) {
79+
var rawData = new Float32Array(this.response);
80+
echartsLayer._ec.appendData({
81+
seriesIndex: 0,
82+
data: rawData
83+
});
84+
85+
fetchData(idx + 1);
86+
};
87+
88+
xhr.send();
89+
}
90+
91+
fetchData(0);
92+
93+
</script>
94+
</body>
95+
</html>

‎examples/leaflet/echarts_linesDrawMillionsRailwaysNetwork.html‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<html>
2+
<head>
3+
<meta charset='utf-8'/>
4+
<title>Use lines to draw 4 millions Chinese railways</title>
5+
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
6+
<script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
7+
<script type="text/javascript" include="echarts" src="../../dist/include-leaflet.js"></script>
8+
<style>
9+
body {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
#map {
15+
position: absolute;
16+
top: 0;
17+
bottom: 0;
18+
width: 100%;
19+
}
20+
</style>
21+
</head>
22+
<body>
23+
<div id='map'></div>
24+
<script type="text/javascript">
25+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
26+
var tileURL = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
27+
28+
map = L.map('map', {
29+
center: [37.94, 106],
30+
maxZoom: 18,
31+
zoom: 5
32+
});
33+
L.supermap.tiledMapLayer(tileURL).addTo(map);
34+
35+
option = {
36+
progressive: 20000,
37+
title: {
38+
top: '10px',
39+
text: resources.text_echartsLinesMillions_railways,
40+
subtext: resources.text_echartsLinesMillions_railways_subtext,
41+
left: 'center',
42+
textStyle: {
43+
color: '#fff'
44+
},
45+
subtextStyle: {
46+
color: '#fff'
47+
}
48+
},
49+
series: [{
50+
type: 'lines',
51+
blendMode: 'lighter',
52+
coordinateSystem: 'leaflet',
53+
dimensions: ['value'],
54+
data: new Float64Array(),
55+
polyline: true,
56+
large: true,
57+
lineStyle: {
58+
color: 'orange',
59+
width: 1,
60+
opacity: 0.3
61+
}
62+
}]
63+
};
64+
65+
var echartsLayer = L.supermap.echartsLayer(option).addTo(map);
66+
67+
var CHUNK_COUNT = 19;
68+
69+
function fetchData(idx) {
70+
if (idx > CHUNK_COUNT) {
71+
return;
72+
}
73+
var dataURL = `http://iclient.supermap.io/web/data/bigdata_railway_10w/bigDta_${idx}.bin`;
74+
var xhr = new XMLHttpRequest();
75+
xhr.open('GET', dataURL, true);
76+
xhr.responseType = 'arraybuffer';
77+
78+
xhr.onload = function (e) {
79+
var rawData = new Float32Array(this.response);
80+
echartsLayer._ec.appendData({
81+
seriesIndex: 0,
82+
data: rawData
83+
});
84+
85+
fetchData(idx + 1);
86+
};
87+
88+
xhr.send();
89+
}
90+
91+
fetchData(0);
92+
93+
</script>
94+
</body>
95+
</html>

0 commit comments

Comments
 (0)