快乐十分钟开奖结果: 轨迹系列12——单轨迹展示效果的进一步优化(流动箭头)

山西快乐十分走势 www.yfhdr.cn 文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处://www.yfhdr.cn/naaoveGIS/

1.    背景

在PC端展示轨迹的探索中,我们分别针对轨迹纠正、单轨迹播放、多轨迹播放做了研究和实现。其核心抓手便是轨迹的美观、数据的动态。而除了对监控点实现播放以达到数据的动态展示外,我们还可以从表示轨迹方向的箭头入手,将其优化为流动的效果以实现轨迹的动态。这一点可以参考易到用车。

2.箭头描绘的实现(字体方案)

以下为滴滴打车的轨迹描绘:

 

在前面的博客中《WebGIS中使用ZRender实现轨迹前端动态播放特效》(//www.yfhdr.cn/naaoveGIS/p/6718822.html),我提到了通过数学公式以固定距离构造箭头的各坐标点以实现轨迹箭头描绘的方案。

但是该方案对于数学要求相对较高,这里给出另外一种方案来实现箭头的描绘。

a.在图标网站上选择需要的箭头样式。

 

 b.将箭头图标导出生成为字体库

 

c.前端将该字体库引入

 

d.组织绘制箭头对应的样式

 

3.箭头流动的实现

 该效果需要完成如下几个功能点:

 a.无论线路方向如何,线段之间的箭头是等距离

 b.箭头匀速移动

 c.箭头为循环播放

3.1 定时刷新要素重绘机制

 目前采用的OpenLayers来进行H5地图开发,OL中可以通过注册地图渲染事件,实现每一次渲染结束时触发对应函数。

 进入到对应的postCompose函数内部后,再通过timer来控制下一次绘制的触发。

 

3.2箭头重绘函数实现

其中涉及到一定的平面几何,主要集中在箭头等距的计算,箭头移动的计算以及箭头的循环播放计算上。这里直接贴出对应代码:

 

4.效果展示

                         

 

                              -----欢迎转载,但保留版权,请于明显处标明出处://www.yfhdr.cn/naaoveGIS/

                                                                              如果您觉得本文确实帮助了您,可以微信扫一扫,进行小额的打赏和鼓励,谢谢 ^_^

                                                                                                                           

 

posted @ 2018-07-13 16:23 李晓晖 阅读(...) 评论(...) 编辑 收藏
  • 高温“烤验”,品读这些自带凉意的避暑诗词 2019-05-19
  • 2015科教频道中秋晚会《天涯共此时》 2019-05-19
  • 特朗普政府用政治“边缘政策”处理贸易问题是玩火 2019-05-17
  • 高清:探访苟坝见证历史 红军在此留下珍贵遗物 2019-05-15
  • 交通小事故,几分钟就能处理完 2019-05-15
  • 在现时代,无论中国还是西方发达国家都是社会财富公有制和私有制并存的社会,由于仍旧存在社会财富私有制,所以必然存在贫富差别,离开私有制来谈“贫”和“富”... 2019-05-15
  • 【学习时刻·经济实说②】管清友:中央经济工作会议的十大亮点 2019-05-15
  • 绿染江源,千湖归来——三江源生态保护建设取得阶段性成效 2019-05-13
  • 把握和传承好“变则通”思想(大家手笔) 2019-05-13
  • 5月份70个大中城市商品住宅销售情况:一线城市商品房价格同比持续下降 2019-05-08
  • 官方:装备管理失职 恒大俱乐部总经理等人遭处罚 2019-05-01
  • 中共一大代表中最早辞世的王尽美:3首小诗与27年人生 2019-04-29
  • 不管怎么修饰辞藻,只要放弃革命,就是苏联的结果,还用证明吗? 2019-04-27
  • 新和县:12333为参保群众提供咨询便利 2019-04-22
  • 秋冬进补“小人参” 称霸国人餐桌3000年 2019-04-22
  • 942| 349| 944| 490| 786| 737| 963| 100| 645| 830|