javascript - 在 vuejs 应用程序中集成 openlayers

Question

有没有人有在 Vuejs 应用程序中集成 Openlayers 的经验？

我需要在 Vuejs 应用程序上显示一些图层。

干杯，

Answer 1

是的，我目前正在使用 Vuejs 和 OpenLayers 4 重写现有的应用程序。该应用程序具有表单和几乎全屏的 map (类似于谷歌地图的路由功能)。

OL npm lib将 OpenLayers 公开为 ES2015 文件，这与常见的 vuejs 设置很好地配合。我创建了一个包装器组件，它在 mounted() 中初始化 map 对象并将其存储为一个属性。

OL 不会获取组件属性的传播更改，因此您可能需要使用 watchers在属性(或事件处理程序)上调用 OL 函数，每当发生变化时。

我遇到的一个问题是当侧面板打开/关闭并因此改变 map 的视口(viewport)时 map 失真。监听事件并调用 map.updateSize() 解决了这个问题。

甚至还有vuejs的OL插件，vuejs-openlayers .不过我没有测试它，因为集成 OL 还是很容易的。