[英]Integrate openlayers in vuejs application
Has anyone have any experience in integrating Openlayers in a Vuejs application?有没有人有在 Vuejs 应用程序中集成 Openlayers 的经验?
I need to display some layers on a Vuejs app.我需要在 Vuejs 应用程序上显示一些图层。
Cheers,干杯,
Yes, I'm currently rewriting an existing application with Vuejs and OpenLayers 4. The app has forms and an almost-fullscreen map (similar to google map's routing feature).是的,我目前正在使用 Vuejs 和 OpenLayers 4 重写现有应用程序。该应用程序具有表单和几乎全屏的地图(类似于谷歌地图的路由功能)。
The OL npm lib exposes OpenLayers as ES2015 files, which works nicely with common vuejs setups. OL npm 库将 OpenLayers 公开为 ES2015 文件,与常见的 vuejs 设置很好地配合使用。 I created a wrapper component which initializes the map object in
mounted()
and stores it as a property.我创建了一个包装器组件,它在
mounted()
中初始化地图对象并将其存储为属性。
OL won't pick up propagated changes on your component's properties, so you might need to use watchers on the properties (or event handlers) to call OL functions whenever something changes. OL 不会获取组件属性上的传播更改,因此您可能需要在属性(或事件处理程序)上使用观察程序,以便在发生更改时调用 OL 函数。
One issue I had was map disortion when sidepanels opened/closed and therefore changed the map's viewport.我遇到的一个问题是当侧面板打开/关闭时地图失真,因此改变了地图的视口。 Listening to an event and calling
map.updateSize()
solved that.监听事件并调用
map.updateSize()
解决了这个问题。
There is even a OL plugin for vuejs, vuejs-openlayers .甚至还有一个用于 vuejs 的 OL 插件vuejs-openlayers 。 I didn't test it though, since integrating OL was quite easy anyway.
不过我没有测试它,因为无论如何集成 OL 都很容易。
You could use this Vue.js UI library
that integrates Openlayers with Vue.js which is called VueLayers :您可以使用
this Vue.js UI library
,它将 Openlayers 与 Vue.js 集成在一起,称为VueLayers :
Installation安装
npm install vuelayers
Usage用法
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)
Here is a simple example of an OL map inside a Vue component:这是 Vue 组件中的 OL 映射的简单示例:
<template>
<div id="mapOL">
Hi, i'm a map!
</div>
</template>
<script>
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js'
import OSM from "ol/source/OSM"
export default {
name: "map-openlayers",
mounted() {
let map = new Map({
target: 'mapOL',
layers: [
new TileLayer({source: new OSM()})
],
view: new View({
center: [0, 0],
zoom: 2
})
})
}
}
</script>
<style scoped lang="stylus">
@import "~ol/ol.css"
#mapOL
height 300px
</style>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.