在vuejs应用程序中集成openlayers

Question

他们，

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

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

干杯，

Answer 1

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

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

OL不会在组件的属性上拾取传播的更改，因此您可能需要在属性（或事件处理程序）上使用watchers，以便在出现更改时调用OL函数。

我遇到的一个问题是侧面板打开/关闭时的地图扭曲，因此更改了地图的视口。听一个事件并打电话给qazxsw poi来解决这个问题。

甚至还有一个用于vuejs的OL插件，map.updateSize()。我没有测试它，因为无论如何集成OL都很容易。

Answer 2

您可以使用将Openlayers与Vue.js集成的vuejs-openlayers ，称为VueLayers：

安装

this Vue.js UI library

用法

npm install vuelayers

Answer 3

以下是Vue组件中OL映射的简单示例：

import Vue from 'vue'
import VueLayers from 'vuelayers'
import 'vuelayers/lib/style.css' // needs css-loader

Vue.use(VueLayers)

// or individual components

import Vue from 'vue'
import { Map, TileLayer, OsmSource, Geoloc } from 'vuelayers'
import 'vuelayers/lib/style.css' // needs css-loader

Vue.use(Map)
Vue.use(TileLayer)
Vue.use(OsmSource)
Vue.use(Geoloc)