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 | 70 ++++++++++++++++++++++++++--------
1 files changed, 53 insertions(+), 17 deletions(-)
diff --git a/src/components/rightMenu/bottom2.vue b/src/components/rightMenu/bottom2.vue
index 2517718..e716acf 100644
--- a/src/components/rightMenu/bottom2.vue
+++ b/src/components/rightMenu/bottom2.vue
@@ -1,11 +1,16 @@
<template>
<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>
+ <div class="mapTool">
<div class="tool-rotate" @click="flyBack" title="澶嶄綅">
<img src="@/assets/img/collection/recover.png" />
</div>
</div>
- <div class="mapTool" v-show="test.fwval">
+ <div class="mapTool2">
<div class="tool-rotate" @click="zoomIn" title="鏀惧ぇ">
<img src="@/assets/img/collection/add.png" />
</div>
@@ -19,25 +24,43 @@
<style scoped>
.mapTool {
- border-radius: 10px;
+ 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;
- margin-bottom: 8px;
+ 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 {
- border: 0.5px solid #efecec;
-}
-
-.tool-rotate {
- padding: 8px;
-}
-
-.tool-rotate img {
- width: 20px;
- height: 20px;
+ width: 100%;
+ height: 1px;
+ border: 0.005rem solid #f3f3f3;
}
</style>
-
+
<script>
import Bus from "../../js/bus.js";
import store from "@/utils/store2";
@@ -45,7 +68,7 @@
props: ["test"],
data() {
return {
- state1:store.mapTools,
+ state1: store.mapTools,
state: store.layerPanel,
customStyle: {
position: "absolute",
@@ -61,7 +84,7 @@
if (newVal) {
this.customStyle = {
position: "absolute",
- top: "2rem",
+ top: "calc(0.75rem + 51px)",
right: "0.1rem",
};
} else {
@@ -82,6 +105,7 @@
window.mapapi.getView().animate({
// 鍙缃渶瑕佺殑灞炴�у嵆鍙�
center: window.mapapi.getView().getCenter(), // 涓績鐐�
+ projection: "EPSG:3857",
zoom: zoom + 1, // 缂╂斁绾у埆
rotation: undefined, // 缂╂斁瀹屾垚view瑙嗗浘鏃嬭浆寮у害
duration: 1000, // 缂╂斁鎸佺画鏃堕棿锛岄粯璁や笉闇�瑕佽缃�
@@ -93,6 +117,7 @@
window.mapapi.getView().animate({
// 鍙缃渶瑕佺殑灞炴�у嵆鍙�
center: window.mapapi.getView().getCenter(), // 涓績鐐�
+ projection: "EPSG:3857",
zoom: zoom - 1, // 缂╂斁绾у埆
rotation: undefined, // 缂╂斁瀹屾垚view瑙嗗浘鏃嬭浆寮у害
duration: 1000, // 缂╂斁鎸佺画鏃堕棿锛岄粯璁や笉闇�瑕佽缃�
@@ -101,12 +126,23 @@
flyBack() {
window.mapapi.getView().animate({
// 鍙缃渶瑕佺殑灞炴�у嵆鍙�
- center: [116.52217697339846, 39.75979421847914], // 涓績鐐�
+ 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