我们在开发过程中,有时难免会需要展示上百万,甚至上千万的点或者线数据。今天咱们就介绍下SuperMap iClient对于对接百万,千万数据量的展示。
SuperMap iClient不仅集成了GIS前端开源框架Leaflet,Openlayers,Mapbox,还集成了众多优秀的第三方插件,使得SuperMap iClient的功能更加完善,性能更加卓越。其中就包括Echarts,在Echarts 4.0发布之后,Echarts通过增量渲染技术,和各种优化能够达到展现千万级别的数据量。SuperMap iClient对引入的Echarts插件进行了相应的升级,并且能和地图完美结合流畅展现千万级别数据量。下面我们将具体操作使用此功能。
我们以iClient for Leaflet为例,对接纽约140万个出租车分布点数据
引入开发文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
<link rel="stylesheet" href="http://iclient.supermap.io/dist/leaflet/iclient9-leaflet.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
<script type="text/javascript" src="http://iclient.supermap.io/dist/leaflet/iclient9-leaflet.js"></script>
</head>
</html>
初始化底图
var map = L.map('map', {
center: [40.765654, -73.931577],
maxZoom: 18,
zoom: 12
});
L.supermap.tiledMapLayer(tileURL).addTo(map);
初始化echarts图层并且设置参数
var option = {
title: { //标题,可选
top: '10px',
text: resources.text_echartsLinesMillions_nyTaxi,
subtext: resources.text_echartsLinesMillions_nyTaxi_subtext,
left: 'center',
textStyle: {
color: '#fff'
},
subtextStyle: {
color: '#fff'
}
},
series: [{
type: 'scatter', //渲染类型
progressive: 1e5, //每个渐进渲染的数量
coordinateSystem: 'leaflet', //使用的坐标系
symbolSize: 0.5, //标记的大小
blendMode: 'lighter', //混合模式,lighter是叠加模式,可以使区域中的数据进行叠加产生高亮的效果
large: true, //是否开启大数据优化
itemStyle: {
color: '#FF3300'
},
postEffect: {
enable: true
},
silent: true,
dimensions: ['lng', 'lat'], //定义数据维度
data: new Float32Array()
}]
};
将echarts图层添加到map中
var echartsLayer = L.supermap.echartsLayer(option).addTo(map);
数据准备
由于数据量巨大,并且echarts是以增量渲染的方式进行渲染海量点数据的,所以我们可以逐步下载获取需要渲染的点数据
var CHUNK_COUNT = 19;
function fetchData(idx) {
if (idx >= CHUNK_COUNT) {
return;
}
var dataURL = "http://iclient.supermap.io/web/data/bigdata_nytaxi/data_" + idx + ".bin";
var xhr = new XMLHttpRequest();
xhr.open('GET', dataURL, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
var rawData = new Float32Array(this.response); //解析arraybuffer
echartsLayer._ec //将数据追加到echarts图层中
.appendData({
seriesIndex: 0,
data: rawData
});
fetchData(idx + 1);
};
xhr.send();
}
fetchData(0);
以上代码我们循环下载了20次数据
运行代码
第二个例子我们将绘制1400万点构成的全国水系图
初始化底图
map = L.map('map', {
center: [37.94, 106],
maxZoom: 18,
zoom: 5
});
L.supermap.tiledMapLayer(tileURL).addTo(map);
初始化echarts图层设置参数
option = {
progressive: 20000,
title: {
top: '10px',
text: resources.text_echartsLinesMillions_waterSystem,
subtext: resources.text_echartsLinesMillions_waterSystem_subtext,
left: 'center',
textStyle: {
color: '#fff'
},
subtextStyle: {
color: '#fff'
}
},
series: [{
type: 'lines', //渲染类型设置成lines
blendMode: 'lighter',
coordinateSystem: 'leaflet',
dimensions: ['value'], //定义数据维度
data: new Float64Array(),
polyline: true, //多段线设置成true
large: true,
lineStyle: {
color: '#0099FF',
width: 1,
opacity: 0.3
}
}]
};
将echarts图层添加到map中
var echartsLayer = L.supermap.echartsLayer(option).addTo(map);
数据准备
var CHUNK_COUNT = 19;
function fetchData(idx) {
if (idx > CHUNK_COUNT) {
return;
}
var dataURL = "http://iclient.supermap.io/web/data/bigdata_water_10w/data_" + idx + ".bin";
var xhr = new XMLHttpRequest();
xhr.open('GET', dataURL, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
var rawData = new Float32Array(this.response);
echartsLayer._ec.appendData({ //将数据追加到图层中
seriesIndex: 0,
data: rawData
});
fetchData(idx + 1);
};
xhr.send();
}
fetchData(0);
分批次将数据追加到echarts图层中
运行代码
以上就是使用SuperMap iClient对接百万,千万级数据量的实现例子。如果需要了解更多,可以参考我们的SuperMap iClient 官网例子
http://iclient.supermap.io/examples/leaflet/examples.html#viz-ECharts