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閱讀 172,813評論 25 708
  • 轉了一篇譯丹老師和他的學生關于籃球和游戲的文章給少年看, 居然在文末留言解釋游戲的段位, 記得冬令營的自我介紹時少...
    千吉change閱讀 182評論 0 0
  • 2018年讀完的第一本書,讀后感:讀史書最膚淺的好處增加生僻字的辨認度。互聯網時代,網絡求知多是新中求知,而書本閱...
    孤獨像只流浪貓閱讀 182評論 0 0
  • 當你無意之間注意到樹葉上的光芒的時候,就是你放松的時候。 如何更好的應對壓力和緊張? 2011年的一個學期,但是我...
    郭青耀閱讀 182評論 2 0
  • 大家好,我是鳯孃。在這不太溫柔的光陰里,我依舊在陪著你。今天,你有沒有過的好一點?今天,你有沒有遇到感到幸福的事情...
    不知畏懼的瘦子閱讀 519評論 0 0