实时定位可视化展现

启明星产品新增了实时数据后,使得实时获取各种amap客户端各种数据成为了可能。理所当然地,我们一定好奇作为一款交通出行软件,能不能将正在使用的用户展示出来?于是

Screen-Shot-2015-11-11-at-17.34.25

aos接口请求中有很多是带有用户位置经纬度的,将所有带经纬度的接口日志部署到我们的实时任务中,实时定位的数据服务就有了。

 

页面展现部分,首先我们根据预期效果需要一个中国地图,但又不是那种带有道路poi的地图,我们只需要一个地图轮廓就可以了。而且地图还要能支持一定级别的放大缩小,方便聚焦到某个地区查看地图用户的分布情况。

 

这里使用的是d3用来展现地图,d3里有各种各样的地图展现例子,只需要一个中国地图边界的geojson文件就可以画出来。

 

所以整个的背景就是一个大的svg,因为是svg,所以也可以很方便的添加缩放操作。
其中地图局中问题处理的比较粗暴,由于窗口缩放,地图总是偏左偏右,各种设置都未果的情况下,就想采用直接算的方式,在各个不同的窗口下将地图剧中,记录下此时的projection(映射)位移点,然后找出符合这个关系的函数。结果恰好位移点和窗口的变化是线性的。
然后是位置点展现。

 

仍然使用svg画点浏览器性能显然是不够的,所以使用的是canvas。

 

首先要解决的是地图经纬度和canvas图层位置对应问题,借助d3将经纬度映射为屏幕坐标就可以了,不过canvas定位要和屏幕位置一致。

 

根据预想效果,我们很自然的想到一个定位使用一个点来表示,canvas里自然就用circle来画这个点,但结果非常糟糕,性能很差。

 

在canvas上表示大量数据时有一些技巧,<code>arc</code>,<code>rect</code>等api支持不了太多的数据,在渲染动画的时候帧率会下降的非常厉害。考虑到这里画出的点其实很小,精细展现的时候甚至只需要一个像素,并不需要对每一个点添加什么样式。canvas的<code>fillRect</code>只填充一个色块,并不涉及样式的变化,效率相比<code>arc</code>,<code>rect</code>就好很多了。
更高效的方式是通过取得canvas的ImageData数据,直接操作像素数据。
有了点之后就是添加动画了,预期效果需要一闪一闪的效果,可以通过改变点的透明度来实现。但是随着数据点越来越多,数据需要循环遍历每一个点做处理,计算量也会越来越大,所以这里引入了多图层的机制。

Screen-Shot-2015-11-11-at-17.17.18

里面使用了三个canvas图层,一个图层用来展现闪烁的点,闪烁点闪烁一段时间后就移入另一个图层&mdash;&mdash;背景图层,在背景图层上做缓慢渐变,慢慢淡出画布,直到消失。

 

这才两个图层,第三个图层是做什么用的呢?其实是用来做临时数据转存的,因为背景图层数据量远比闪烁层大,而变化却很缓慢,所以先将数据转移,计算完以后再做展现。背景图层上的点每一次渐变变化都将数据先移到暂存图层上,然后做数据处理,处理完成之后再移回背景图层。所以这一层是不会显示到页面上的。

 

这样一来,两层效果叠加之后,密密麻麻的定位点便此起彼伏地闪烁在地图上了。

 

如果禁用背景图层的渐变消失,让定位点不断累积在地图上,便渲染出来一个全国路网的线路图。

屏幕快照-2015-08-04-16.48.53

 

 

发表评论