149 lines
3.5 KiB
Vue
149 lines
3.5 KiB
Vue
<template>
|
|
<div class="HomeMap">
|
|
<div class="zoom-level">当前缩放等级: {{ zoomLevel }}</div>
|
|
<div id="map" ref="olMap" class="map-container"></div>
|
|
<div class="pointingNorth" @click="mapNorth">
|
|
<img src="@/assets/img/menu/zhibeizhen.png" alt="指北" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
import Map from "ol/Map";
|
|
import View from "ol/View";
|
|
import TileLayer from "ol/layer/Tile";
|
|
import { fromLonLat } from "ol/proj";
|
|
import XYZ from "ol/source/XYZ";
|
|
|
|
export default {
|
|
name: "HomeMap",
|
|
data() {
|
|
return {
|
|
map: null,
|
|
zoomLevel: null
|
|
};
|
|
},
|
|
created() {
|
|
// 清空控制台（可选）
|
|
// console.clear();
|
|
},
|
|
mounted() {
|
|
this.initMap();
|
|
},
|
|
computed: {
|
|
...mapGetters(["statePage", "cityCode"])
|
|
},
|
|
methods: {
|
|
initMap() {
|
|
// 初始化 OpenLayers 地图
|
|
|
|
this.map = new Map({
|
|
target: this.$refs.olMap,
|
|
layers: [
|
|
new TileLayer({
|
|
visible: true,
|
|
source: new XYZ({
|
|
visible: true,
|
|
url: "http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scale=1&style=8"
|
|
})
|
|
})
|
|
],
|
|
view: new View({
|
|
projection: "EPSG:4326",
|
|
center: [116.4, 39.9], // 经纬度转投影坐标
|
|
zoom: 10,
|
|
minZoom: 3,
|
|
maxZoom: 18,
|
|
constrainRotation: false // 允许旋转
|
|
})
|
|
});
|
|
|
|
// 保存地图实例到全局（与 Mars3D 的 window.marsMap 类似）
|
|
window.olMap = this.map;
|
|
|
|
// 处理地图加载完成后的逻辑
|
|
this.onMapLoad(this.map);
|
|
|
|
// 绑定点击事件
|
|
this.map.on("click", this.mapClickHandler);
|
|
|
|
// 绑定缩放/移动结束事件
|
|
this.map.getView().on("change:resolution", this.mapZoomHandler);
|
|
this.map.getView().on("change:center", this.mapZoomHandler);
|
|
},
|
|
mapClickHandler(event) {
|
|
// 处理地图点击事件
|
|
console.log("地图点击:", event);
|
|
},
|
|
mapZoomHandler() {
|
|
// 获取当前缩放等级
|
|
this.zoomLevel = Math.round(this.map.getView().getZoom());
|
|
},
|
|
onMapLoad(map) {
|
|
// 地图加载完成后的处理
|
|
const camera = window.mapConfig || {};
|
|
if (camera.isCamera) {
|
|
// 设置视角约束
|
|
map
|
|
.getView()
|
|
.setCenter(
|
|
fromLonLat([camera.cameraLon || 0, camera.cameraLat || 0])
|
|
);
|
|
map.getView().setMinZoom(3); // 最小缩放等级
|
|
map.getView().setMaxZoom(18); // 最大缩放等级
|
|
}
|
|
},
|
|
mapNorth() {
|
|
// 指北：将地图旋转角度重置为 0
|
|
const view = this.map.getView();
|
|
const currentCenter = view.getCenter();
|
|
const currentZoom = view.getZoom();
|
|
view.animate({
|
|
center: currentCenter,
|
|
zoom: currentZoom < 3 ? 10 : currentZoom, // 确保最小缩放等级
|
|
rotation: 0, // 指北
|
|
duration: 500 // 动画持续时间
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.HomeMap {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
.zoom-level {
|
|
position: absolute;
|
|
bottom: 0.8%;
|
|
left: 1%;
|
|
z-index: 1000;
|
|
color: #fff;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
padding: 5px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.map-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.pointingNorth {
|
|
position: absolute;
|
|
bottom: 5%;
|
|
right: 25%;
|
|
cursor: pointer;
|
|
z-index: 1000;
|
|
|
|
img {
|
|
width: 35px;
|
|
height: 35px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|