iClient 对接千万级数据展示_supermap.echartslayer

作者：Gausst松鼠会 | 2024-06-12 16:54:31

踩

supermap.echartslayer

我们在开发过程中，有时难免会需要展示上百万，甚至上千万的点或者线数据。今天咱们就介绍下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>
1
2
3
4
5
6
7
8
9
10

初始化底图

var map = L.map('map', {
        center: [40.765654, -73.931577],
        maxZoom: 18,
        zoom: 12
    });
L.supermap.tiledMapLayer(tileURL).addTo(map);
1
2
3
4
5
6

初始化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()
        }]
};

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

将echarts图层添加到map中

var echartsLayer = L.supermap.echartsLayer(option).addTo(map);
1

数据准备

由于数据量巨大，并且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);

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

以上代码我们循环下载了20次数据

运行代码
在这里插入图片描述
第二个例子我们将绘制1400万点构成的全国水系图

初始化底图

map = L.map('map', {
        center: [37.94, 106],
        maxZoom: 18,
        zoom: 5
    });
    L.supermap.tiledMapLayer(tileURL).addTo(map);
1
2
3
4
5
6

初始化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
            }
        }]
    };
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

将echarts图层添加到map中

var echartsLayer = L.supermap.echartsLayer(option).addTo(map);
1

数据准备

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);
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

分批次将数据追加到echarts图层中
运行代码
在这里插入图片描述

以上就是使用SuperMap iClient对接百万，千万级数据量的实现例子。如果需要了解更多，可以参考我们的SuperMap iClient 官网例子
http://iclient.supermap.io/examples/leaflet/examples.html#viz-ECharts

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/708814