From 295cfad7ed701e75ae154c73b2fa4ccb4a9efff8 Mon Sep 17 00:00:00 2001
From: qubiaobiao <3294694717@qq.com>
Date: Tue, 5 Mar 2024 17:58:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=82=B9=E5=87=BB=E5=9C=B0?=
 =?UTF-8?q?=E7=82=B9=E6=A0=87=E7=82=B9=EF=BC=8C=E5=BC=B9=E7=AA=97=E5=9C=B0?=
 =?UTF-8?q?=E7=82=B9=E4=BF=A1=E6=81=AF=E5=BC=B9=E7=AA=97=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                        |  1 +
 src/components/Earth.vue          | 17 ++++++++++-------
 src/components/HotLandmark.vue    | 23 ++++++++++-------------
 src/components/LandMarkShow.vue   | 13 ++++++-------
 src/components/LandMarkWindow.vue |  2 +-
 src/components/LonlatForm.vue     | 11 +++++++++++
 src/components/Pin.vue            |  3 +++
 src/information/landmark.js       |  2 +-
 src/stores/flyto.js               | 24 ++++++++++++++++++++++++
 9 files changed, 67 insertions(+), 29 deletions(-)
 create mode 100644 src/stores/flyto.js

diff --git a/.gitignore b/.gitignore
index 95aa5fe..494ac70 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,7 @@ dist
 dist-ssr
 *.local
 public/Cesium
+public/landmarkImg
 
 # Editor directories and files
 .vscode/*
diff --git a/src/components/Earth.vue b/src/components/Earth.vue
index a68f62d..85d271a 100644
--- a/src/components/Earth.vue
+++ b/src/components/Earth.vue
@@ -35,6 +35,7 @@
 import Compass from '/@/components/Compass.vue'
 import { usePointStore } from "/@/stores/point";
 import { usePositionStore } from "/@/stores/position";
+import { useFlytoStore } from "/@/stores/flyto";
 import {
   VcViewer,
   VcStatusBar,
@@ -91,13 +92,6 @@ const cartesian2Lonlat = (cartesian) => {
 
 const position = usePositionStore();
 position.$subscribe((_, state) => {
-  // import { MutationType } from 'pinia' 改变触发的类型
-  // mutation.type // 'direct' | 'patch object' | 'patch function'
-  // same as cartStore.$id
-  // mutation.storeId // 'cart'
-  // only available with mutation.type === 'patch object'
-  // mutation.payload // patch object passed to cartStore.$patch()
-
   // 侦听到state变化时，把state存在localStorage中
   // localStorage.setItem('cart', JSON.stringify(state))
   if (!isLnglat(state)) return;
@@ -107,6 +101,15 @@ position.$subscribe((_, state) => {
   });
 });
 
+const flyto = useFlytoStore();
+flyto.$subscribe((_, state) => {
+  if (!isLnglat(state)) return;
+
+  viewer.camera.flyTo({
+    destination: Cesium.Cartesian3.fromDegrees(state.lng, state.lat, 2000.0),
+  });
+});
+
 // 默认值 天安门广场经纬度 116.39140105, 39.90452844 高度 2000.0
 const pointTo = () => {
   let initialPosition = Cesium.Cartesian3.fromDegrees(position.lng?position.lng:116.39140105, position.lat?position.lat:39.90452844, 2000.0);
diff --git a/src/components/HotLandmark.vue b/src/components/HotLandmark.vue
index e36fe4e..a7533e0 100644
--- a/src/components/HotLandmark.vue
+++ b/src/components/HotLandmark.vue
@@ -6,7 +6,7 @@
       style="position: absolute; top: -40px; right: 0; z-index: 99; cursor: pointer"
       @click="showLandmark"
     >
-      <img class="icon" src="../assets/toup.png" />
+      <img class="icon" src="../assets/up.png" />
     </div>
     <div
       v-show="showit"
@@ -14,7 +14,7 @@
       style="position: absolute; top: -50px; right: 0; z-index: 99; cursor: pointer"
       @click="showLandmark"
     >
-      <img class="icon" src="../assets/todown.png" />
+      <img class="icon" src="../assets/down.png" />
     </div>
     <div class="landmark">
       <table v-if="showit">
@@ -43,7 +43,7 @@
 
 <script setup>
 import { ref } from "vue";
-import { usePositionStore } from "/@/stores/position";
+import { useFlytoStore } from "/@/stores/flyto";
 import { landmarkArr } from "/@/information/landmark";
 
 let showit = ref(false);
@@ -52,30 +52,27 @@ const showLandmark = () => {
   showit.value = !showit.value;
 };
 
-const position = usePositionStore();
+const flyto = useFlytoStore();
 
-const write = (myposition) => {
-  position.set(myposition);
+const write = (flytoLand) => {
+  flyto.set(flytoLand);
 };
 </script>
 
 <style scoped>
 .landmark {
   max-height: 360px;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .switch {
-  width: 42px;
-  height: 42px;
+  width: 50px;
+  height: 50px;
   border-radius: 50%;
-  background-color: #fff;
-  padding-top: 9px;
-  padding-left: 3px;
 }
 
 .icon {
-  width: 36px;
+  width: 50px;
 }
 
 table {
diff --git a/src/components/LandMarkShow.vue b/src/components/LandMarkShow.vue
index 961b14b..ca7d9cb 100644
--- a/src/components/LandMarkShow.vue
+++ b/src/components/LandMarkShow.vue
@@ -69,7 +69,7 @@ watch(() => LandMarkShow.boxShow, (newValue, oldValue) => {
 
 watch(() => LandMarkShow.information.landImgUrl, (newValue, oldValue) => {
   nowId.value = 1;
-  nowImg.value = `${LandMarkShow.information.landImgUrl}${nowId.value}.jpg`;
+  nowImg.value = `${LandMarkShow.information.landImgUrl}${nowId.value}.webp`;
   judgmentUp.value = "display:block;";
   judgmentDown.value = "display:none;";
   adaptive(nowId.value);
@@ -92,7 +92,7 @@ const left = () => {
   if (nowId.value == 0) {
     nowId.value = LandMarkShow.information.landImgCount;
   }
-  nowImg.value = `${LandMarkShow.information.landImgUrl}${nowId.value}.jpg`;
+  nowImg.value = `${LandMarkShow.information.landImgUrl}${nowId.value}.webp`;
   adaptive(nowId.value);
 }
 
@@ -101,7 +101,7 @@ const right = () => {
   if (nowId.value > LandMarkShow.information.landImgCount) {
     nowId.value = 1;
   }
-  nowImg.value = `${LandMarkShow.information.landImgUrl}${nowId.value}.jpg`;
+  nowImg.value = `${LandMarkShow.information.landImgUrl}${nowId.value}.webp`;
   adaptive(nowId.value);
 }
 
@@ -137,7 +137,7 @@ const close = () => {
   width: 3vw;
   height: 3vw;
   position: absolute;
-  bottom: 0;
+  bottom: -15%;
   z-index: 1;
   border-radius: 50%;
   overflow: hidden;
@@ -156,7 +156,7 @@ const close = () => {
 }
 .brieflyBox {
   width: 60%;
-  height: 30%;
+  height: 24%;
   background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
   position: absolute;
   bottom: 0;
@@ -198,11 +198,10 @@ const close = () => {
   -webkit-box-orient: vertical;
 }
 .boxClose {
-  bottom: 20%;
+  bottom: 15%;
   left: 48.5%;
 }
 .showBtn {
-  bottom: 0;
   left: 47.8%;
 }
 .leftBtn {
diff --git a/src/components/LandMarkWindow.vue b/src/components/LandMarkWindow.vue
index cc862f5..1cb7123 100644
--- a/src/components/LandMarkWindow.vue
+++ b/src/components/LandMarkWindow.vue
@@ -42,7 +42,7 @@ watch(() => LandMarkWindow.windowShow, (newValue, oldValue) => {
 })
 
 watch(() => LandMarkWindow.information.landImgUrl, (newValue, oldValue) => {
-  nowImg.value = `background-image: url('${LandMarkWindow.information.landImgUrl}1.jpg');`;
+  nowImg.value = `background-image: url('${LandMarkWindow.information.landImgUrl}1.webp');`;
 })
 
 watch(() => LandMarkWindow.windowPosition.left, (newValue, oldValue) => {
diff --git a/src/components/LonlatForm.vue b/src/components/LonlatForm.vue
index 95b2169..2c0c982 100644
--- a/src/components/LonlatForm.vue
+++ b/src/components/LonlatForm.vue
@@ -25,10 +25,21 @@
 import { ref } from "vue";
 import { usePointStore } from "/@/stores/point";
 import { usePositionStore } from "/@/stores/position";
+import { useFlytoStore } from "/@/stores/flyto";
+import { isLnglat } from "/@/api/util";
 
 const lng = ref(NaN);
 const lat = ref(NaN);
 const position = usePositionStore();
+const flyto = useFlytoStore();
+
+flyto.$subscribe((_, state) => {
+  if (!isLnglat(state)) return;
+
+  lng.value = flyto.lng;
+  lat.value = flyto.lat;
+});
+
 const onFlyBtnClick = () => {
   if (!position.set({ lng: lng.value, lat: lat.value })) alert("请输入正确的经纬度信息");
 };
diff --git a/src/components/Pin.vue b/src/components/Pin.vue
index 5516b20..f6e2ae8 100644
--- a/src/components/Pin.vue
+++ b/src/components/Pin.vue
@@ -154,6 +154,9 @@ const addDynamicLabel = (data) => {
         LandMarkWindow.windowShow = true;
       }
     }
+    if (viewer.camera.positionCartographic.height > 2400) {
+      LandMarkShow.boxShow = false;
+    }
   });
   handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
   handler.setInputAction(function (movement) {
diff --git a/src/information/landmark.js b/src/information/landmark.js
index 09f9b9e..8de5e84 100644
--- a/src/information/landmark.js
+++ b/src/information/landmark.js
@@ -12,7 +12,7 @@ export const landmarkArr = [
         imgCount:8
     },
     {
-        landmark:'北京鸟巢',
+        landmark:'国家体育场',
         position:{
             lng:116.390502,
             lat:39.991396
diff --git a/src/stores/flyto.js b/src/stores/flyto.js
new file mode 100644
index 0000000..ac40bb5
--- /dev/null
+++ b/src/stores/flyto.js
@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia'
+import { isLnglat } from '/@/api/util'
+
+
+export const useFlytoStore = defineStore({
+  id: 'flyto',
+  state: () => ({
+    lng: NaN,
+    lat: NaN,
+  }),
+  getters: {
+    value: (state) => { state.lng, state.lat }
+  },
+  actions: {
+    set(flyto) {
+      if ( !isLnglat(flyto) ) return false
+
+      this.lng = flyto.lng
+      this.lat = flyto.lat
+
+      return true
+    },
+  },
+})
\ No newline at end of file