OpenLayers这个库在前端操作地图自然是数一数二的存在，但是对于在地图上海量数据的绘制就显得有点力不从心，虽然目前Openlayers4以后地图上数据的绘制相关绘制接口已经开始基于WebGL进行封装，一定程度上决解决了数据绘制速度问题但对于海量数据绘制到客户端所带来的内存占用问题并没有得到解决，这其实也怪不得OL的开发者，人家本来就不是为了数据可视化打造的，之所以开始采用WebGL进行绘图API的封装也仅仅是为了给地图相关应用的开发起到锦上添花的作用，这时deck.gl Echarts等便可提枪上马了，目前对于前端点绘制优化相关的例子都是针对矢量地图进行的，这里采用栅格瓦片作为底图实现对于10W级别点的前端绘制
OpenLayers4结合setInterval函数实现简单的地图动画----以溢油粒子的漂移扩散为例 这个小功能实现之后甲方提出了新要求，目前在OpenLayers加载的栅格瓦片上绘制的最大点数为72000个，在拖动时发现出现卡顿，并且又提出最终需要在地图上展示30多万个点（这尼玛这么密的点不做聚类全部展示出来有意义吗）没有办法，甲方这样要求老师说让这样整，那我就照做，初步想法有下面几种 1 Openlayers cluster实现聚类（或者有其它相关包实现聚类） 2 使用imagecanvas将绘制的点作为图片加载地图上 3 利用第三方专门做可视化的库与OpenLayers结合 1 2 都被老师华丽的否决了，那就沿着第三条路走到黑了
其实解决前端地图拖动过程中的卡顿问题其实要解决并不是绘制效率的问题而是要解决前端内存占用过大的问题，这里首先想到的时就是向地图上加图片，将要绘制的内容绘制到图片上然后按照经纬度加到ImageCanvas对象中，结果如下图所示，不卡顿但放大后失真 方法3才是本文重点~敲黑板
本着项目研发过程中不到万不得已不重复造轮子原则，我开始了寻找 当然主流的前端可视化库都有相关的以前端绘制海量数据为“卖点”的demo比如deck.gl 当我看到Echarts的这个demo的时候感觉做好了可以羞辱甲方Echarts绘制1000W个gps点之前用原生openlayers做的时候7w个点就已经卡的不像话了 找到了轮子就开搞了，首先要把这些将原来的项目移到Echarts环境中实现 现在问题是整个项目前端相关的操作都是通过ol API做的，一个很明显的问题就是底图的问题，首先ECharts跟地图相关的可视化要不使用geo属性要不加载百度/高德地图，怎么将两者结合起来实现Echarts绘制结果随着OpenLayers所加载底图的移动而移动呢。 一开始想法是将利用ol的addoverlay接口将Ecahrt图层加载到ol加载的底图上但事实证明这二个方法具体实施起来十分复杂 后来找到了一个老哥写的ol与echarts结合的js包，虽然这个项目不算太规范，但抱着试一试的原则我还是想省事 OL结合Echarts的包 溢油粒子加载都与本人之前写的那篇博文类似，不同之处在于加数据时通过appendData方法实现高性能的增量渲染
echartslayer.appendData({ seriesIndex: 0, data:typeOil });下面看看绘制10W个点，对比一下这两种方法的内存占用你就不会奇怪为啥用OL加载要素的方法进行图层的时候卡顿的原因了！！！！
------------------------------END------------------------------
For everything there is a season,and a time for every matter under heaven
