Echarts GL 结合mapbox趟坑记（使用appendData）

前言

echartsGL官网示例有个很炫酷的散点图，通过服务器分批加载实现了千万条以上数据的展示：

domo可以看这里。

其实就是分批加载服务器数据然后呈现。看上去很简单，其实坑不是一般的多。

二、数据转换

通过官网下载上述demo，放到本地，打开控制台，找到数据请求地址，修改demo里的ROOTPATH，尝试在本地跑起来。一看，报错。接口不支持跨域。没办法，只能模拟一下接口返回的数据，通过Float32Array进行数据封装。demo里的核心代码如下：

myChart.appendData({
   
    seriesIndex: 0,
     data: data
 });

可以看到核心代码就是调用的echarts的对象方法appendData;

data的数据格式，在我摸了半天的情况下，终于弄清楚：
假设这是我的元数据（并非最终数据）：

 [
   {
   
      lat:131.222,
	  lon:31.3333,
	  num:12
   } 
]

每一个数据可以由经度，维度，以及这个点的加权（记为num）组成。则我们需要一个Float32Array，其存储格式如下：

[131.22,31.33333,12,132.33,32.2222,24.....]

转换函数如下：

	_Scatter.prototype._transform = function(data_arr){
   

		const ret = new Float32Array