文章目錄
1、簡單示例
先看下以引入< JavaScript >的方式的使用方法
1.1創建一個mapView組件
mapView.js
export default {
template: '<div id="map"></div>',
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在頁面中應用
<!DOCTYPE html>
<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結合openlayers</title>
<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: '<div id="map"></div>',
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: '<div id="map"></div>',
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
})
}
}
}