<template>
|
<div class="bottom" id="bottom" :style="customStyle" v-if="state1.show">
|
<!-- <div class="mapTool">
|
<div class="tool-rotate" @click="PointingNorth" title="指北">
|
<img src="@/assets/img/collection/compass.png" />
|
</div>
|
</div> -->
|
<div class="mapTool">
|
<div class="tool-rotate" @click="flyBack" title="复位">
|
<img src="@/assets/img/collection/recover.png" />
|
</div>
|
</div>
|
<div class="mapTool2">
|
<div class="tool-rotate" @click="zoomIn" title="放大">
|
<img src="@/assets/img/collection/add.png" />
|
</div>
|
<div class="border"></div>
|
<div class="tool-rotate" @click="zoomOut" title="缩小">
|
<img src="@/assets/img/collection/reduce.png" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
|
.mapTool {
|
width: 0.42rem;
|
/* border-radius: 10px; */
|
/* background: #ffffff; */
|
/* margin-bottom: 8px; */
|
}
|
|
.mapTool .tool-rotate img {
|
width: 100%;
|
}
|
|
.mapTool2 {
|
width: 0.32rem;
|
margin: auto;
|
background: #ffffff;
|
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.21);
|
border-radius: 10px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
.mapTool2 .tool-rotate{
|
height: 0.33rem;
|
line-height: 0.33rem;
|
}
|
|
.mapTool2 .tool-rotate img {
|
width: 0.17rem;
|
}
|
|
.border {
|
width: 100%;
|
height: 1px;
|
border: 0.005rem solid #f3f3f3;
|
}
|
</style>
|
|
<script>
|
import Bus from "../../js/bus.js";
|
import store from "@/utils/store2";
|
export default {
|
props: ["test"],
|
data() {
|
return {
|
state1: store.mapTools,
|
state: store.layerPanel,
|
customStyle: {
|
position: "absolute",
|
bottom: "0.4rem",
|
right: "0.1rem",
|
},
|
};
|
},
|
mounted() { },
|
watch: {
|
"state.show": {
|
handler(newVal) {
|
if (newVal) {
|
this.customStyle = {
|
position: "absolute",
|
top: "calc(0.75rem + 51px)",
|
right: "0.1rem",
|
};
|
} else {
|
this.customStyle = {
|
position: "absolute",
|
bottom: "0.4rem",
|
right: "0.1rem",
|
};
|
}
|
},
|
immediate: true,
|
},
|
},
|
methods: {
|
zoomIn() {
|
const view = window.mapapi.getView();
|
const zoom = view.getZoom();
|
window.mapapi.getView().animate({
|
// 只设置需要的属性即可
|
center: window.mapapi.getView().getCenter(), // 中心点
|
zoom: zoom + 1, // 缩放级别
|
rotation: undefined, // 缩放完成view视图旋转弧度
|
duration: 1000, // 缩放持续时间，默认不需要设置
|
});
|
},
|
zoomOut() {
|
const view = window.mapapi.getView();
|
const zoom = view.getZoom();
|
window.mapapi.getView().animate({
|
// 只设置需要的属性即可
|
center: window.mapapi.getView().getCenter(), // 中心点
|
zoom: zoom - 1, // 缩放级别
|
rotation: undefined, // 缩放完成view视图旋转弧度
|
duration: 1000, // 缩放持续时间，默认不需要设置
|
});
|
},
|
flyBack() {
|
window.mapapi.getView().animate({
|
// 只设置需要的属性即可
|
center: ol.proj.fromLonLat([116.52217697339846, 39.75979421847914]), // 中心点
|
zoom: 12, // 缩放级别
|
rotation: undefined, // 缩放完成view视图旋转弧度
|
duration: 1000, // 缩放持续时间，默认不需要设置
|
});
|
},
|
PointingNorth() {
|
alert("指北针开发中");
|
// console.log("指北针开发中")
|
},
|
},
|
};
|
</script>
|
