今天快乐十分开奖结果: 轨迹系列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 李晓晖 阅读(...) 评论(...) 编辑 收藏
  • 溃疡恶变也会腹痛 这些肿瘤最容易被误诊 2018-09-04
  • 候选企业:光大证券股份有限公司 2018-09-04
  • 25年全球健康三大变化 2018-07-26
  • 林肯中心室内乐协会再掀浪潮 完整录音入驻中国 亚洲巡演整装待发 室内乐 厂牌 2018-07-25
  • 社会主义是过渡阶段,最终实现共产主义才是其目的。社会主义是在消灭私有制,建立公有制直至无私,实现共产主义。 2018-07-25
  • 呼死你团伙被摧毁 封停83万余个账号抓获210余人 2018-07-25
  • 回复@老老保老张工:伪高工不仅智力低下,知识也很匮乏也!连啥叫计划经济都没搞懂! 2018-07-24
  • 中国经济充当了世界经济发展的火车头。但是,作为世界经济火车头的中国,在世界主要经济体股市都走牛的情况下,为何熊途漫漫?这种不正常的现象,背后是我们资本市场的投融 2018-07-24
  • 社评:中国打的是对美贸易自卫反击战 2018-07-24
  • 世界献血者日 近距离接触一袋合格血的成长历程 2018-07-23
  • 便道汛期被淹学生上学遇阻 来凤老伯坚持背娃过河40年 2018-07-23
  • 以朝鲜民主主义人民共和国为例,难道特金会是由朝鲜工人、农民主导的?[哈哈] 2018-07-23
  • 设计众议院:神奇的MQB让全新一代宝来重生 2018-07-22
  • 回复@不能这样啊:那你不是可以啥事不做天天甩起手耍?你自己不求上进还不准别人有所追求么? 2018-07-22
  • 三位基层书记的一周:思想不转换 其他都白扯 2018-07-22
  • 957| 710| 78| 992| 597| 210| 523| 259| 269| 809|