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

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

MapBox Echarts路线大数据渲染 - 图1

效果图

1、添加相关JS引用

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

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

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

2、在HTML中添加相关容器

  1. <div id="main"><div>

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

3、在JS中引入mapbox

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

4、初始化底图及图表

  1. var chart = echarts.init(document.getElementById('MapDiv'));
  2. chart.setOption({
  3. mapbox: {
  4. center: [117, 39],
  5. zoom: 10,
  6. altitudeScale: 10000000,
  7. style: 'mapbox://styles/mapbox/dark-v9',
  8. postEffect: {
  9. enable: true,
  10. FXAA: {
  11. enable: true
  12. }
  13. },
  14. light: {
  15. main: {
  16. intensity: 1,
  17. shadow: true,
  18. shadowQuality: 'high'
  19. },
  20. ambient: {
  21. intensity: 0.
  22. }
  23. }
  24. },
  25. series: [{
  26. type: 'lines3D',
  27. coordinateSystem: 'mapbox',
  28. blendMode: 'lighter',
  29. polyline: true,
  30. data: []
  31. }]
  32. })

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

5、追加数据并渲染

  1. chart.setOption({
  2. series: [{
  3. type: 'lines3D',
  4. coordinateSystem: 'mapbox',
  5. blendMode: 'lighter',
  6. polyline: true,
  7. lineStyle: {
  8. width: 1,
  9. color: 'red',
  10. opacity: 1
  11. },
  12. data: callback[0]
  13. },
  14. {
  15. type: 'lines3D',
  16. coordinateSystem: 'mapbox',
  17. blendMode: 'lighter',
  18. polyline: true,
  19. lineStyle: {
  20. width: 1,
  21. color: 'green',
  22. opacity: 1
  23. },
  24. data: callback[1]
  25. },
  26. {
  27. type: 'lines3D',
  28. coordinateSystem: 'mapbox',
  29. blendMode: 'lighter',
  30. polyline: true,
  31. lineStyle: {
  32. width: 1,
  33. color: 'blue',
  34. opacity: 1
  35. },
  36. data: callback[2]
  37. },
  38. {
  39. type: 'lines3D',
  40. coordinateSystem: 'mapbox',
  41. blendMode: 'lighter',
  42. polyline: true,
  43. lineStyle: {
  44. width: 1,
  45. color: 'yellow',
  46. opacity: 1
  47. },
  48. data: callback[3]
  49. },
  50. {
  51. type: 'lines3D',
  52. coordinateSystem: 'mapbox',
  53. blendMode: 'lighter',
  54. polyline: true,
  55. lineStyle: {
  56. width: 1,
  57. color: 'orange',
  58. opacity: 1
  59. },
  60. data: callback[4]
  61. }
  62. ]
  63. })

6、数据格式

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

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

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