本文共 4256 字，大约阅读时间需要 14 分钟。

我们在开发过程中，有时难免会需要展示上百万，甚至上千万的点或者线数据。今天咱们就介绍下SuperMap iClient对于对接百万，千万数据量的展示。

SuperMap iClient不仅集成了GIS前端开源框架Leaflet，Openlayers，Mapbox，还集成了众多优秀的第三方插件，使得SuperMap iClient的功能更加完善，性能更加卓越。其中就包括Echarts，在Echarts 4.0发布之后，Echarts通过增量渲染技术，和各种优化能够达到展现千万级别的数据量。SuperMap iClient对引入的Echarts插件进行了相应的升级，并且能和地图完美结合流畅展现千万级别数据量。下面我们将具体操作使用此功能。

我们以iClient for Leaflet为例，对接纽约140万个出租车分布点数据

引入开发文件

初始化底图

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

转载地址：http://hkpxi.baihongyu.com/