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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy