第一步
-
下载地图瓦片下载器
全能地图下载器.png
第二步
vue项目安装依赖 openlayers
npm install ol
第三步
创建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], // 地图居中显示经纬度
mapZoom: 11, // 默认缩放比例
// 限制地图缩放最大级别为14，最小级别为10
minZoom: 10,
maxZoom: 13
}
},
mounted(){
this.initMap() // 执行地图初始化
},
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", // 坐标系
center: this.mapCenter, // 地图中心点
zoom: this.mapZoom, // 缩放
minZoom: this.minZoom, // 缩放最小级别 10
maxZoom: this.maxZoom, // 缩放最大级别 13
}),
});
// 方法手动添加一个使用离线瓦片地图的层
// const maplayer = new TileLayer({
// source: new XYZ({
// url: 'static/tiles/{z}/{x}/{y}.png' //本地瓦片地图的图片路径
// })
// })
// // 将图层添加到地图
// this.mapData.addLayer(maplayer)
// 添加鼠标点击事件
this.mapData.on("click", this.mapClick);
// 添加鼠标经过事件
this.mapData.on("pointermove", this.mapPointerMove);
},
// 鼠标点击地图事件
mapClick(evt) {
console.log(evt,'鼠标点击事件')
},
//鼠标划过事件
mapPointerMove(evt) {
console.log(evt,'鼠标划过事件')
}
}
}
</script>
<style>
.openlayer {
height: 100vh;
width: 100vw;
}
#map {
height: 100%;
width: 100vw;
}
</style>
