在OL3中创建自己的动态图层类型

Creating own dynamic layer type in OL3

本文关键字:动态 图层 类型 自己的 创建 OL3      更新时间:2023-09-26

我目前正在将我为OpenLayers创建的特殊动态层类型从OL2迁移到OL3。该层显示在预定义的轨迹上移动的标记(一个批次,通常在1000左右)。轨迹以特殊的JSON格式从服务器加载。

我目前的OL2方法非常高效,大量优化并使用Raphael库(http://raphaeljs.com/)。一般的应用程序布局看起来像这样:

  • OpenLayers2被加载,地图被创建
  • 一个特殊的层"DynLayer"被创建,这是OL2自己的VectorLayer建模后。这一层处理与OL2的通信(缩放,平移,拖动等),并提供一个非常复杂的异步机制,以基于当前交互(例如,如果用户当前正在平移到地图,刷新率会下降,以防止口吃效果)来重新绘制地图(即移动标记)。在构造过程中,DynLayer创建一个Raphael svg层并将其附加到DOM中。如果地图被平移或缩放,Raphael层由DynLayer同步。
  • 然后在svg层上创建标记,并定期更新其位置

这个方法工作得非常好,因为Raphael支持旧的IE版本,它也可以在IE8和IE7中运行。它还使我能够基于Raphaels内置的animate方法提供动画。

我现在正试图将这个应用程序迁移到OL3,我不是100%确定最好的方法是什么。在OL3中是否可以在OL3加载后添加定制层?如果有,有什么文件吗?我试着实现我自己版本的VectorLayer,但是OL3抛出了大量与Closure API提供的goog对象相关的错误。

更一般地说:重建我的老方法并在OL3上画一个Raphael层会更好吗?这个方法允许我重用以前的大部分代码。或者我应该使用OL3提供的方法直接在HTML5画布上绘制?如果是这样,我如何获得对画布刷新率的控制?

我看了看http://ol3js.org/en/vector-api/examples/dynamic-data.html?q=dynamic的例子,但它并没有真正满足我的需要。标记是无限循环的动画,我需要对刷新率进行特定的控制。更一般地说,我如何防止我的标记在OL3自己的画布刷新时被删除(例如,如果加载了新的磁贴)。

我对OL3的总体印象是,与OL2相比,添加自己的扩展更困难,OL2对我来说似乎比OL3更"开放"。

谢谢你的帮助!

请注意,OL3并不意味着可以很好地与IE7或其他"旧"浏览器一起工作。据我所知,OL3是为了性能和快速矢量渲染而构建的。它还集成了d3,所以它可能可以与其他技术集成。