MapBox Echarts路线大数据渲染

大数据渲染mapboxecharts
eCharts可以实现大量数据迅速渲染，笔者在项目中，测试包含25w余拐点的总计7w余条线渲染总共用时1秒左右，性能表现相当优秀，显示效果也相当不错。

eCharts天生支持mapbox，就像其天生支持百度地图一样，而选择前者的原因是其地图相当漂亮，而且支持相当程度的用户自定义地图。

效果图

1、添加相关JS引用

包含mapbox底图引用以及eCharts引用

    <script src='https://api.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet'/>
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v0.10.0/mapbox-gl-language.js'></script>
    <script src="http://www.echartsjs.com/dist/echarts-gl.min.js"></script>
    <script src="http://www.echartsjs.com/dist/echarts-gl.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

以上引用为在线引用，可以直接添加到项目而不必下载相关文件。

2、在HTML中添加相关容器

<div id="main"><div>

之后新建的 JS文件或标签 书写JS。

3、在JS中引入mapbox

mapboxgl.accessToken = 'pk.eyJ1Ijoibmlld3poIiwiYSI6ImNqbjRvM2F4ODA5ZDEzd2xkd2oxZnB4Y2UifQ.phMvmLw9t9lDxobKyYVbPw';

4、初始化底图及图表

var chart = echarts.init(document.getElementById('MapDiv'));
chart.setOption({
    mapbox: {
        center: [117, 39],
        zoom: 10,
        altitudeScale: 10000000,
        style: 'mapbox://styles/mapbox/dark-v9',
        postEffect: {
            enable: true,
            FXAA: {
                enable: true
            }
        },
        light: {
            main: {
                intensity: 1,
                shadow: true,
                shadowQuality: 'high'
            },
            ambient: {
                intensity: 0.
            }
        }
    },
    series: [{
        type: 'lines3D',
        coordinateSystem: 'mapbox',
        blendMode: 'lighter',
        polyline: true,
        data: []
    }]
})

数据的数据在此可以先填为空，之后可以动态追加。
**

5、追加数据并渲染

            chart.setOption({
                series: [{
                    type: 'lines3D',
                    coordinateSystem: 'mapbox',
                    blendMode: 'lighter',
                    polyline: true,
                    lineStyle: {
                        width: 1,
                        color: 'red',
                        opacity: 1
                    },
                    data: callback[0]
                },
                    {
                        type: 'lines3D',
                        coordinateSystem: 'mapbox',
                        blendMode: 'lighter',
                        polyline: true,
                        lineStyle: {
                            width: 1,
                            color: 'green',
                            opacity: 1
                        },
                        data: callback[1]
                    },
                    {
                        type: 'lines3D',
                        coordinateSystem: 'mapbox',
                        blendMode: 'lighter',
                        polyline: true,
                        lineStyle: {
                            width: 1,
                            color: 'blue',
                            opacity: 1
                        },
                        data: callback[2]
                    },
                    {
                        type: 'lines3D',
                        coordinateSystem: 'mapbox',
                        blendMode: 'lighter',
                        polyline: true,
                        lineStyle: {
                            width: 1,
                            color: 'yellow',
                            opacity: 1
                        },
                        data: callback[3]
                    },
                    {
                        type: 'lines3D',
                        coordinateSystem: 'mapbox',
                        blendMode: 'lighter',
                        polyline: true,
                        lineStyle: {
                            width: 1,
                            color: 'orange',
                            opacity: 1
                        },
                        data: callback[4]
                    }
                ]
            })

6、数据格式

三维数组： 数据整体为一个数组，数组中，每条线又为一个数组，其中，线上每个点又构成**[X,Y]**数组，即;

[[[0,0],[1,1],[1,2]],[[10,10],[100,100]]]

数据数组中，有两个子数组，表示两条线，其中每个最低级数组表示线上点的坐标。