Hy guys,
有没有人在Vuejs应用程序中集成Openlayers的经验?
我需要在Vuejs应用上显示一些图层。
干杯,
答案 0 :(得分:0)
您可以使用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)
答案 1 :(得分:0)
这是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>