第一步
-
下載地圖瓦片下載器
全能地圖下載器.png
第二步
vue項(xiàng)目安裝依賴 openlayers
npm install ol
第三步
創(chuàng)建openlayersvue頁面
<template>
<div class="openlayer">
<div id="map" ref="openlayerMap"></div>
</div>
</template>
<script>
import { Map, View } from "ol";
import TileLayer from 'ol/layer/Tile'
import { XYZ } from 'ol/source'
import "ol/ol.css";
export default {
data(){
return {
mapData: null,
mapCenter: [120.165264,33.34847], // 地圖居中顯示經(jīng)緯度
mapZoom: 11, // 默認(rèn)縮放比例
// 限制地圖縮放最大級(jí)別為14，最小級(jí)別為10
minZoom: 10,
maxZoom: 13
}
},
mounted(){
this.initMap() // 執(zhí)行地圖初始化
},
methods:{
initMap(){
const mapContainer = this.$refs.openlayerMap;
// 加載瓦片地圖
const tileMap = new TileLayer({
source: new XYZ({
url: 'static/tiles/{z}/{x}/{y}.png' //本地瓦片地圖的圖片路徑
})
})
this.mapData = new Map({
layers: [tileMap], // 直接在配置上加載
target: mapContainer, // 地圖容器
view: new View({
projection: "EPSG:4326", // 坐標(biāo)系
center: this.mapCenter, // 地圖中心點(diǎn)
zoom: this.mapZoom, // 縮放
minZoom: this.minZoom, // 縮放最小級(jí)別 10
maxZoom: this.maxZoom, // 縮放最大級(jí)別 13
}),
});
// 方法手動(dòng)添加一個(gè)使用離線瓦片地圖的層
// const maplayer = new TileLayer({
// source: new XYZ({
// url: 'static/tiles/{z}/{x}/{y}.png' //本地瓦片地圖的圖片路徑
// })
// })
// // 將圖層添加到地圖
// this.mapData.addLayer(maplayer)
// 添加鼠標(biāo)點(diǎn)擊事件
this.mapData.on("click", this.mapClick);
// 添加鼠標(biāo)經(jīng)過事件
this.mapData.on("pointermove", this.mapPointerMove);
},
// 鼠標(biāo)點(diǎn)擊地圖事件
mapClick(evt) {
console.log(evt,'鼠標(biāo)點(diǎn)擊事件')
},
//鼠標(biāo)劃過事件
mapPointerMove(evt) {
console.log(evt,'鼠標(biāo)劃過事件')
}
}
}
</script>
<style>
.openlayer {
height: 100vh;
width: 100vw;
}
#map {
height: 100%;
width: 100vw;
}
</style>
