如何在传单地图上设置动画形状

时间:2013-01-22 07:19:38

标签: javascript canvas html5-canvas gis leaflet

我是传单的新手,正在寻找一些建议。

我想创建某种标记的动画(​​例如,填充html5的圆弧或形状)来重放地图上的GPS轨迹。我可能想要几个动画标记,我希望保持灵活的行为和性能。任何人都可以推荐一个很好的方法来创建这种类型的动画?

看起来我可以创建一个画布层(L.TileLayer.Canvas)并使用线性动画技术(例如http://www.html5canvastutorials.com/advanced/html5-canvas-linear-motion-animation/)绘制它,但我还不确定这是否有效,或者如果我需要调用redraw()以及性能如何。或者我可以尝试制作客户标记并通过在某个时间间隔上设置纬度/经度来移动它们。

有没有人遇到这个并且可以推荐一个解决方案(上面的想法或其他)?理想情况下,当我更改缩放级别时,动画将“缩放”并具有良好的性能。谢谢!

2 个答案:

答案 0 :(得分:1)

RaphaelLayer插件可让您创建一些非常精美的动画:

http://dynmeth.github.com/RaphaelLayer/

答案 1 :(得分:1)

是的,有几种方法可以解决这个问题...... 绘制到交互式地图上非常具有挑战性,因为您需要重新计算平移和缩放事件的位置;除了管理你的实际动画。

这是一个很好的例子,使用D3库来连续循环管理动画,您可以修改多个动画的代码。 http://zevross.com/blog/2014/09/30/use-the-amazing-d3-library-to-animate-a-path-on-a-leaflet-map/

如果您想了解绘图过程的工作原理,那么这个项目可能是一个更好的起点 http://bl.ocks.org/Sumbera/11114288#L.CanvasOverlay.js 这会抓取叠加窗格(您可以在其上绘制的小册子画布)并且...在其上绘制...

并且您绝对想要查看此链接,该链接描述了交互式地图的drawing流程