Vue结合Openlayers示例
文章目录
- 1、简单示例
-
- 1.1创建一个mapView组件
- 1.2 创建一个Vue实例，并注册mapView组件
- 1.3在页面中应用
- 2、地图配置
- 3、npm 构建
-
- 3.1 安装openlayers
- 3.2 在mapView组建中导入相关模块
1、简单示例
先看下以引入< JavaScript >的方式的使用方法
1.1创建一个mapView组件
mapView.js
export default {
template: '',
data() {
return {
map: null
}
},
mounted() {
this.initMap()
},
methods: {
initMap(){
let baseLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
})
})
let view = new ol.View({
projection: 'EPSG:4326',
zoom: 4,
center: [114, 32]
})
this.map = new ol.Map({
target: 'map',
layers: [baseLayer],
view: this.view
})
}
}
}
1.2 创建一个Vue实例，并注册mapView组件
import mapView from './components/mapView.js'
const app = new Vue({
components: {
mapView}
}).$mount('#app')
1.3在页面中应用
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue结合openlayerstitle>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript">script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<style>
head, body, .mapview{
height: 100%;
width: 100%;
}
style>
head>
<body>
<div id="app">
<map-view class="mapview">map-view>
div>
<script src="./main.js" type="module">script>
body>
html>
2、地图配置
通常，为了灵活使用地图起见，我们把地图的一些常用设置，提取出来单独配置。比如：地图的view（视图）配置，假设我们需要在地图初始化时设置地图的中心点在北京，我们写了一个配置文件
mapConfig.js
const mapConfig = {
viewOption: {
projection: 'EPSG:4326',
zoom: 12,
center: [116.405,39.9228], //北京中心点坐标
maxZoom: 16,
minZoom: 4
}
}
export default mapConfig
而后，修改mapView，让它的**initMap()**方法可以接收view参数配置
export default {
template: '',
data() {
return {
map: null
}
},
// mounted() {
// this.initMap()
// },
methods: {
initMap(options){
let viewOptions = options.view ? options.view : {
projection: 'EPSG:4326',
zoom: 15,
center: [108.944, 34.3615]
}
let baseLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
})
})
let view = new ol.View(viewOptions)
this.map = new ol.Map({
target: 'map',
layers: [baseLayer],
view: this.view
})
}
}
}
接着，修改main.js，把参数传递进去，
main.js
import mapView from './components/mapView.js'
import mapConfig from './config/mapConfig.js'
const app = new Vue({
components: {
mapView},
mounted() {
this.$refs['mapview'].initMap({
view: mapConfig.viewOption
})
},
}).$mount('#app')
同时，html也做微调，给mapview标签加上ref属性，这样就可以通过Vue.$refs访问到这个组建
<map-view class="mapview" ref="mapview">map-view>
假设后续要把地图中心点调整到其它地方，只要修改mapConfig.js中的配置就可以了。
3、npm 构建
如果时通过npm 的方式来在Vue框架中使用Openlayers，方法与此大同小异。
假设你项目中已经安装了Vue，接下来
3.1 安装openlayers
npm install ol
3.2 在mapView组建中导入相关模块
mapView.js
import {
Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ'
export default {
template: '',
data() {
return {
map: null
}
},
// mounted() {
// this.initMap()
// },
methods: {
initMap(options){
let viewOptions = options.view ? options.view : {
projection: 'EPSG:4326',
zoom: 15,
center: [108.944, 34.3615]
}
let baseLayer = new TileLayer({
source: new XYZ({
url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
})
})
let view = new View(viewOptions)
this.map = new Map({
target: 'map',
layers: [baseLayer],
view: this.view
})
}
}
}
示例下载