From 5206e7a4f4c5b71c9ddeccdbbe5e7fba5b3eeb9b Mon Sep 17 00:00:00 2001
From: lixuliang <lixuliang_hd@126.com>
Date: 星期五, 22 三月 2024 01:05:38 +0800
Subject: [PATCH] YOUHAU
---
src/components/rightMenu/bottom2.vue | 248 +++++++++++++++++++------------------------------
1 files changed, 97 insertions(+), 151 deletions(-)
diff --git a/src/components/rightMenu/bottom2.vue b/src/components/rightMenu/bottom2.vue
index a8f7553..e716acf 100644
--- a/src/components/rightMenu/bottom2.vue
+++ b/src/components/rightMenu/bottom2.vue
@@ -1,185 +1,111 @@
<template>
- <div class="bottom" id="bottom">
- <div class="mapTools" v-show="show">
- <div class="mapTool" v-show="test.fwval">
- <el-button class="tool-rotate" @click="zoomIn" title="鏀惧ぇ">
- <img src="../../../static/img/image/zoomIn.png" />
- </el-button>
+ <div class="bottom" id="bottom" :style="customStyle" v-if="state1.show">
+ <div class="mapTool">
+ <div class="tool-rotate" @click="flyToCurrentPosition" title="瀹氫綅">
+ <img src="@/assets/img/collection/compass.png" />
</div>
- <div class="mapTool" v-show="test.fwval">
- <el-button class="tool-rotate" @click="zoomOut" title="缂╁皬">
- <img src="../../../static/img/image/zoomOut.png" />
- </el-button>
+ </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>
-.bottom {
- position: absolute;
- bottom: 0.4rem;
- height: 0.76rem;
- right: 0.4rem;
-}
-.mapModeControl {
- position: absolute;
- right: 0.05rem;
- background: rgba(90, 90, 90, 0.5);
- bottom: 0.05rem;
- height: 0.76rem;
- width: 1.03rem;
- transition: all 1s;
-}
-.bottom .mapModeControl:hover {
- transition: all 0.6s;
- -webkit-transition: all 0.6s;
- width: 3.2rem;
-}
-.mapMode {
- display: inline-block;
-}
-.mapMode dl {
- width: 0.88rem;
- height: 0.6rem;
- border: 1px solid #494949;
- cursor: pointer;
- margin: 0.08rem;
-}
-
-.mapMode dl:hover {
- border-color: #0553b4;
-}
-
-.mapMode dl {
- position: relative;
-}
-#history {
- background: url(../../../static/img/1.png) no-repeat;
-}
-#mode-3d {
- background: url(../../../static/img/2.png) no-repeat;
-}
-#mode-2d {
- background: url(../../../static/img/4.png) no-repeat;
-}
-.mapMode dt {
- width: 100%;
- height: 0.2rem;
- line-height: 0.2rem;
- position: absolute;
- left: 0;
- bottom: 0px;
- font-size: 0.12rem;
- text-align: center;
- color: #fff;
- text-shadow: 1px 1px 2px #000;
- background: rgba(0, 0, 0, 0.5);
-}
-.mapModeActive {
- background: rgba(1, 37, 80, 0.5) !important;
-}
-
-.mapTools {
- position: absolute;
- /* bottom: 2rem; */
- bottom: 0.2rem;
- /* right: 0.1rem; */
-}
.mapTool {
- margin: 0.1rem 0;
-}
-.mapTool .el-button {
- padding: 0 !important;
- font-size: 0.24rem;
- border: unset;
- float: unset;
- display: block;
- background: rgba(18, 126, 255, 1);
+ width: 0.42rem;
+ /* border-radius: 10px; */
+ /* background: #ffffff; */
+ /* margin-bottom: 8px; */
}
-/* .button-group-vertical {
- text-align: center;
- position: relative;
-} */
-.fgx {
- position: absolute;
- width: 80%;
- height: 1px;
- height: 1px;
- border: 1px solid #dcdfe6;
- z-index: 999;
- margin: 0 10%;
+.mapTool .tool-rotate img {
+ width: 100%;
}
-/* .button-group-vertical .el-button-group > .el-button:first-child {
- border-top-right-radius: 0.04rem !important;
- border-bottom-left-radius: 0px !important;
+
+.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;
}
-.button-group-vertical .el-button-group > .el-button:last-child {
- border-top-right-radius: 0;
- border-bottom-left-radius: 0.04rem !important;
-} */
-.mapTool img {
- width: 24px;
- margin: 3px;
- /* height: 0.4rem; */
+.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 {
- show: true,
- parentdata: {
- fwval: false,
- zbzval: false,
- qpval: false,
- zymlval: false,
- kjcxval: false,
- dxmsval: false,
- snmsval: false,
- ssval: false,
+ state1: store.mapTools,
+ state: store.layerPanel,
+ customStyle: {
+ position: "absolute",
+ bottom: "0.4rem",
+ right: "0.1rem",
},
- clickIndex: 0,
- // isShowHistory: false,
- camera: {
- position: [116.52217697339846, 39.75979421847914, 17045.47005612415],
- orientation: {
- heading: 0,
- pitch: -90,
- roll: 0,
- },
- },
- modes: [
- {
- id: "mode-3d",
- name: "3D",
- mode: 3,
- },
- {
- id: "mode-2d",
- name: "2D",
- mode: 2,
- },
- ],
};
},
- mounted() {
- Bus.$on("myMsg", (myMsg) => {
- this.show = myMsg;
- });
+ 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(), // 涓績鐐�
+ projection: "EPSG:3857",
zoom: zoom + 1, // 缂╂斁绾у埆
rotation: undefined, // 缂╂斁瀹屾垚view瑙嗗浘鏃嬭浆寮у害
duration: 1000, // 缂╂斁鎸佺画鏃堕棿锛岄粯璁や笉闇�瑕佽缃�
@@ -188,15 +114,35 @@
zoomOut() {
const view = window.mapapi.getView();
const zoom = view.getZoom();
-
window.mapapi.getView().animate({
// 鍙缃渶瑕佺殑灞炴�у嵆鍙�
center: window.mapapi.getView().getCenter(), // 涓績鐐�
+ projection: "EPSG:3857",
zoom: zoom - 1, // 缂╂斁绾у埆
rotation: undefined, // 缂╂斁瀹屾垚view瑙嗗浘鏃嬭浆寮у害
duration: 1000, // 缂╂斁鎸佺画鏃堕棿锛岄粯璁や笉闇�瑕佽缃�
});
},
+ flyBack() {
+ window.mapapi.getView().animate({
+ // 鍙缃渶瑕佺殑灞炴�у嵆鍙�
+ center: ol.proj.fromLonLat([116.52217697339846, 39.75979421847914]), // 涓績鐐�
+ projection: "EPSG:3857",
+ zoom: 12, // 缂╂斁绾у埆
+ rotation: undefined, // 缂╂斁瀹屾垚view瑙嗗浘鏃嬭浆寮у害
+ duration: 1000, // 缂╂斁鎸佺画鏃堕棿锛岄粯璁や笉闇�瑕佽缃�
+ });
+ },
+ flyToCurrentPosition() {
+ window.mapapi.getView().animate({
+ // 鍙缃渶瑕佺殑灞炴�у嵆鍙�
+ center: window.personalPoi, // 涓績鐐�
+ projection: "EPSG:3857",
+ zoom: 17, // 缂╂斁绾у埆
+ rotation: undefined, // 缂╂斁瀹屾垚view瑙嗗浘鏃嬭浆寮у害
+ duration: 1500, // 缂╂斁鎸佺画鏃堕棿锛岄粯璁や笉闇�瑕佽缃�
+ });
+ },
},
};
</script>
\ No newline at end of file
--
Gitblit v1.9.3