一、前言
最近工作上需要实现一个地图动画效果,简单的动画效果,是的,简单;不过在此之前,我并不认为它简单,需要有一点点的webgl、three.js的基础。
效果大概就是一个网格起伏热力图的动画,像心跳一样、heartbeat……,像这样。
上面这个动效,它好像是基于一个gltf模型来做的,它不给地图交互,现在我们也想实现类似的效果,我们最后实现的效果跟这个效果比还有点差距,我们慢慢靠近它,然后再做的更好。
现在有8个月的道路违法停车数据,基于这八个月的数据,做空间插值,生成规则网格。基于规则网格数据,使用mapboxgl和three.js来实现类似的这个效果。我的github地址。
https://github.com/limzgiser/mapbox-gl-grid-heatmapgithub.com二、数据准备
通过空间插值、生成渔网、统计网格违停数量,网格转出矩阵点,重复处理八个月的数据。熟悉ArcMap或QGIS的同学,这些数据处理过程应该比较熟悉的,如何服务化处理这个过程是需要考虑的。或者你采用一些图像处理的方式,来处理这些数据。这里不介绍数据处理过程。列出数据处理后的结果数据。