新增点击地点标点，弹窗地点信息弹窗功能

.gitignore

@@ -13,6 +13,7 @@ dist
 dist-ssr
 *.local
 public/Cesium
+public/landmarkImg
 
 # Editor directories and files
 .vscode/*

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);

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) => {
+const write = (flytoLand) => {
-  position.set(myposition);
+  flyto.set(flytoLand);
 };
 </script>
 
 <style scoped>
 .landmark {
   max-height: 360px;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .switch {
-  width: 42px;
+  width: 50px;
-  height: 42px;
+  height: 50px;
   border-radius: 50%;
-  background-color: #fff;
-  padding-top: 9px;
-  padding-left: 3px;
 }
 
 .icon {
-  width: 36px;
+  width: 50px;
 }
 
 table {

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 {

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) => {

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("请输入正确的经纬度信息");
 };

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) {

src/information/landmark.js

@@ -12,7 +12,7 @@ export const landmarkArr = [
         imgCount:8
     },
     {
-        landmark:'北京鸟巢',
+        landmark:'国家体育场',
         position:{
             lng:116.390502,
             lat:39.991396

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
+    },
+  },
+})