Openlayers4.6.3模仿迁徙图

一、最终效果

模仿迁徙图效果

二、制作思路
1.根据给定线段生成,贝塞尔曲线;我这里暂时限制,每个线段为三个点。
贝塞尔曲线

1) A、B、C三个点为已知点,F点为贝塞尔曲线上的点,我们要求出F点的点坐标。
2)根据DF:DE= AD:AB= BE:BC 的关系我们根据极限法求出,点的位置。
贝塞尔曲线求比例的函数

求贝塞尔曲线的辅助函数

2.根据Style的render函数,控制线上的点进行移动,其中render函数的两个参数,第一个为当前点所在的像素位置,由此我们可以控制点的头和尾的位置。
3.然后用feature的setCoordinates不断来移动点来展示动画。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,475评论 25 709
  • 转了一篇译丹老师和他的学生关于篮球和游戏的文章给少年看, 居然在文末留言解释游戏的段位, 记得冬令营的自我介绍时少...
    千吉change阅读 1,293评论 0 0
  • 2018年读完的第一本书,读后感:读史书最肤浅的好处增加生僻字的辨认度。互联网时代,网络求知多是新中求知,而书本阅...
    孤独像只流浪猫阅读 1,196评论 0 0
  • 当你无意之间注意到树叶上的光芒的时候,就是你放松的时候。 如何更好的应对压力和紧张? 2011年的一个学期,但是我...
    郭青耀阅读 1,274评论 2 0
  • 大家好,我是鳯孃。在这不太温柔的光阴里,我依旧在陪着你。今天,你有没有过的好一点?今天,你有没有遇到感到幸福的事情...
    不知畏惧的瘦子阅读 3,440评论 0 0