在vuejs应用中集成openlayers
在vuejs应用中集成openlayers
提问于 2017-11-25 04:23:29
有没有人有在Vuejs应用中集成Openlayers的经验？
我需要在Vuejs应用程序上显示一些层。
干杯,
回答 3
Stack Overflow用户
发布于 2017-11-27 16:28:37
是的，我目前正在用Vuejs和OpenLayers 4重写一个现有的应用程序。这个应用程序有表单和几乎全屏的地图(类似于谷歌地图的路由功能)。
OL npm lib将OpenLayers公开为ES2015文件，这可以很好地与常见的vuejs设置配合使用。我创建了一个包装器组件，它在mounted()中初始化地图对象并将其存储为属性。
OL不会获取组件属性上的传播更改，因此您可能需要在属性(或事件处理程序)上使用watchers，以便在发生更改时调用OL函数。
我遇到的一个问题是当侧面板打开/关闭时地图混乱，因此更改了地图的视口。侦听事件并调用map.updateSize()解决了这个问题。
甚至还有一个用于vuejs的OL插件，vuejs-openlayers 。我没有测试它，因为集成OL无论如何都很容易。
Stack Overflow用户
发布于 2019-03-26 18:34:50
您可以使用集成了Openlayers和Vue.js的this Vue.js UI library，称为VueLayers：
Installation
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)Stack Overflow用户
发布于 2019-04-03 20:53:04
以下是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> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47479583
复制相关文章
相似问题
腾讯云开发者
