[英]Integrate openlayers in vuejs application
有没有人有在 Vuejs 应用程序中集成 Openlayers 的经验?
我需要在 Vuejs 应用程序上显示一些图层。
干杯,
是的,我目前正在使用 Vuejs 和 OpenLayers 4 重写现有应用程序。该应用程序具有表单和几乎全屏的地图(类似于谷歌地图的路由功能)。
OL npm 库将 OpenLayers 公开为 ES2015 文件,与常见的 vuejs 设置很好地配合使用。 我创建了一个包装器组件,它在mounted()
中初始化地图对象并将其存储为属性。
OL 不会获取组件属性上的传播更改,因此您可能需要在属性(或事件处理程序)上使用观察程序,以便在发生更改时调用 OL 函数。
我遇到的一个问题是当侧面板打开/关闭时地图失真,因此改变了地图的视口。 监听事件并调用map.updateSize()
解决了这个问题。
甚至还有一个用于 vuejs 的 OL 插件vuejs-openlayers 。 不过我没有测试它,因为无论如何集成 OL 都很容易。
您可以使用this Vue.js UI library
,它将 Openlayers 与 Vue.js 集成在一起,称为VueLayers :
安装
npm install vuelayers
用法
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)
这是 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.