实现飞到定位点的动画效果

src/components/Earth.vue

@@ -26,7 +26,9 @@
 
 <script setup>
 import { usePointStore } from '/@/stores/point'
+import { usePositionStore } from '/@/stores/position'
 import { VcViewer, VcStatusBar, VcLayerImagery, VcImageryProviderUrltemplate } from 'vue-cesium'
+import { isLnglat } from '/@/api/util';
 
 const projectionTransforms = { from : 'GCJ02', to : 'WGS84' }
 
@@ -66,4 +68,24 @@ const cartesian2Lonlat = cartesian => {
 
   return { lng, lat }
 }
+
+
+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
+  
+  viewer.camera.flyTo({
+    destination : Cesium.Cartesian3.fromDegrees(state.lng, state.lat, 2000)
+  });
+})
 </script>

src/components/LocatingPoint.vue

@@ -6,6 +6,5 @@
 import Pin from '/@/components/Pin.vue'
 import { usePositionStore } from '/@/stores/position'
 
-
 const position = usePositionStore()
 </script>