huweili-cesium 1.2.4 → 1.2.6

package/components/wsIndicator/wsIndicator.vue

@@ -21,7 +21,7 @@
    * - 收到无人机数据时绿色高亮闪烁（.active）
    */
   import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
-  import { useEventBus } from '../../js/utils/useEventBus'
+  import { useEventBus } from '../../js/utils/useEventBus.js'
   
   const { on, off } = useEventBus()
   

package/index.vue

@@ -1,385 +1,765 @@
-<template>
-  <div class="cesium-map-wrapper" @pointerdown="handleMapPointerDown">
-    <div class="cesium-container" ref="cesiumContainer" />
-    <WsIndicator />
-  </div>
-</template>
-
-<script setup>
-import * as Cesium from 'cesium'
-import { ref, watch, onMounted, onUnmounted, onActivated, onDeactivated, nextTick, toRaw } from 'vue'
-import { MapConfig, DroneConfig } from './config'
-import WsIndicator from './components/wsIndicator/wsIndicator.vue'
-import { objectUtils } from './utils/cesium/object'
-import { basicConfig, teardownOrthographicWheelZoom } from './basis'
-import { useMapStore, MapLoadStatus } from './stores/mapStore'
-import { useEventBus } from './utils/useEventBus'
-import { processMapConfigColors } from './tileProviders'
-import { applyImageryLayers, resolveOnlineBasemap } from './utils/mapImagery'
-import { createCustomToolbarButtons } from './customToolbarButtons'
-import { ensureMapFocus } from './utils/cameraInteraction'
-
-const { merge } = objectUtils()
-const { mouseController, setInitialCameraView, syncCameraInteractionMode } = basicConfig()
-
-const {
-  addToolbarButton,
-  addToolbarButtons,
-  removeToolbarButtons,
-  createDefaultToolbarButtons,
-} = createCustomToolbarButtons()
-
-const mapStore = useMapStore()
-const { on: onEvent, off: offEvent } = useEventBus()
-
-const emit = defineEmits(['onload'])
-
-const props = defineProps({
-  options: {
-    type: Object,
-    default: undefined,
-  },
-  mapId: {
-    type: String,
-    default: 'default',
-  },
-  showDefaultToolbar: {
-    type: Boolean,
-    default: true,
-  },
-  toolbarButtons: {
-    type: Array,
-    default: undefined,
-  },
-  extraToolbarButtons: {
-    type: Array,
-    default: () => [],
-  },
-})
-
-function resolveToolbarButtonConfigs() {
-  if (props.toolbarButtons?.length) {
-    return props.toolbarButtons
-  }
-  const configs = []
-  if (props.showDefaultToolbar) {
-    configs.push(...createDefaultToolbarButtons({ mapId: props.mapId }))
-  }
-  if (props.extraToolbarButtons?.length) {
-    configs.push(...props.extraToolbarButtons)
-  }
-  return configs
-}
-
-const handleSceneModeChange = ({ mapId, sceneMode }) => {
-  if (mapId !== props.mapId || !map || map.isDestroyed?.()) return
-  syncCameraInteractionMode(map, mapId, sceneMode)
-}
-
-const handleMapPointerDown = () => {
-  if (map && !map.isDestroyed?.()) {
-    ensureMapFocus(map)
-  }
-}
-
-const cesiumContainer = ref(null)
-let map = null
-let customButtons = []
-let isMapActive = true
-
-function mountToolbarButtons(viewer) {
-  if (!viewer || viewer.isDestroyed?.()) return
-  removeToolbarButtons(customButtons)
-  customButtons = []
-  const toolbarConfigs = resolveToolbarButtonConfigs()
-  if (toolbarConfigs.length) {
-    customButtons = addToolbarButtons(viewer, toolbarConfigs)
-  }
-}
-
-const initCesium = async () => {
-  if (!cesiumContainer.value) return
-  mapStore.setMapLoadSta(MapLoadStatus.LOADING, props.mapId)
-
-  let mapOptions
-  if (MapConfig) {
-    mapOptions = MapConfig
-  }
-
-  if (DroneConfig) {
-    mapStore.setTrailTime(DroneConfig.trailTime, props.mapId)
-  }
-
-  if (props.options) {
-    let exOptions
-    if (props.options.then) {
-      exOptions = toRaw(await props.options)
-    } else {
-      exOptions = toRaw(props.options)
-    }
-
-    if (mapOptions) {
-      mapOptions = merge(mapOptions, exOptions)
-    } else {
-      mapOptions = exOptions
-    }
-  }
-
-  if (mapOptions) {
-    mapOptions = processMapConfigColors(mapOptions)
-  }
-
-  try {
-    const viewerOptions = {
-      sceneMode: Cesium.SceneMode.SCENE3D,
-      useDefaultRenderLoop: false,
-      baseLayer: mapOptions.control.imageryProvider === false ? false : undefined,
-      baseLayerPicker: mapOptions.control.baseLayerPicker,
-      geocoder: mapOptions.control.geocoder,
-      homeButton: mapOptions.control.homeButton,
-      sceneModePicker: mapOptions.control.sceneModePicker,
-      navigationHelpButton: mapOptions.control.navigationHelpButton,
-      animation: mapOptions.control.animation,
-      timeline: mapOptions.control.timeline,
-      infoBox: mapOptions.control.infoBox,
-      fullscreenButton: mapOptions.control.fullscreenButton,
-      vrButton: mapOptions.control.vrButton,
-      terrainProvider: mapOptions.terrain.show
-        ? await Cesium.CesiumTerrainProvider.fromUrl(mapOptions.terrain.url, {
-            requestWaterMask: mapOptions.terrain.coastlineData,
-            requestVertexNormals: mapOptions.terrain.lightingData,
-          })
-        : undefined,
-      terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,
-      creditContainer: document.createElement('div'),
-    }
-
-    const contextOptions = {
-      webgl: {
-        alpha: false,
-        depth: true,
-        stencil: false,
-        antialias: true,
-        premultipliedAlpha: true,
-        preserveDrawingBuffer: false,
-        failIfMajorPerformanceCaveat: false,
-      },
-      requestWebGl2: true,
-      powerPreference: 'high-performance',
-    }
-
-    const sceneRenderOptions = {
-      debugShowFramesPerSecond: mapOptions.scene.debugShowFramesPerSecond,
-      enableLighting: mapOptions.scene.globe.enableLighting,
-      depthTestAgainstTerrain: mapOptions.scene.globe.depthTestAgainstTerrain,
-      fogEnabled: mapOptions.scene.fog.enabled,
-      skyAtmosphereShow: mapOptions.scene.skyAtmosphere.show,
-      dynamicAtmosphereLighting: mapOptions.scene.globe.dynamicAtmosphereLighting,
-      dynamicAtmosphereLightingFromSun: mapOptions.scene.globe.dynamicAtmosphereLightingFromSun,
-    }
-
-    map = new Cesium.Viewer(cesiumContainer.value, {
-      ...viewerOptions,
-      contextOptions,
-    })
-
-    map.scene.debugShowFramesPerSecond = sceneRenderOptions.debugShowFramesPerSecond
-    map.scene.globe.enableLighting = sceneRenderOptions.enableLighting
-    map.scene.globe.depthTestAgainstTerrain = sceneRenderOptions.depthTestAgainstTerrain
-    map.scene.fog.enabled = sceneRenderOptions.fogEnabled
-    map.scene.skyAtmosphere.show = sceneRenderOptions.skyAtmosphereShow
-    map.scene.globe.dynamicAtmosphereLighting = sceneRenderOptions.dynamicAtmosphereLighting
-    map.scene.globe.dynamicAtmosphereLightingFromSun =
-      sceneRenderOptions.dynamicAtmosphereLightingFromSun
-
-    const sceneMode = mapOptions.scene.sceneMode || '3D'
-
-    const activeBasemap = resolveOnlineBasemap(mapOptions)
-    if (activeBasemap) {
-      applyImageryLayers(map, mapOptions, activeBasemap)
-      console.log(`加载在线底图：${activeBasemap.name}，URL：${activeBasemap.url}`)
-      window._currentBasemapId = activeBasemap.id
-    } else {
-      console.warn('未找到可用底图，Cesium 将使用默认底图或空底图显示')
-    }
-
-    if (map.screenSpaceEventHandler && mapOptions.control.disableDoubleClick) {
-      map.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
-    }
-
-    if (mapOptions.control.disableEntityClick) {
-      map.selectedEntityChanged.addEventListener(() => {
-        map.selectedEntity = undefined
-      })
-    }
-
-    mouseController(map, props.mapId)
-
-    mapStore.setMapInfo(
-      'center',
-      {
-        lng: mapOptions.scene.center.lng,
-        lat: mapOptions.scene.center.lat,
-        heading: mapOptions.scene.center.heading,
-        pitch: mapOptions.scene.center.pitch,
-        roll: mapOptions.scene.center.roll,
-        duration: mapOptions.scene.center.duration,
-        alt: mapOptions.scene.center.alt,
-      },
-      props.mapId,
-    )
-    mapStore.setMap(map, props.mapId)
-    mapStore.setSceneMode(sceneMode, props.mapId)
-
-    const center = mapOptions.scene.center || {}
-
-    mountToolbarButtons(map)
-    mapStore.setMapLoadSta(MapLoadStatus.LOADED, props.mapId)
-
-    console.log(`Cesium 地图加载成功，mapId: ${props.mapId}`)
-    emit('onload', {
-      map,
-      center,
-      mapId: props.mapId,
-      toolbar: {
-        addToolbarButton: (opt) => addToolbarButton(map, opt),
-        addToolbarButtons: (opts) => addToolbarButtons(map, opts),
-        removeToolbarButtons,
-      },
-      syncCameraInteractionMode: (mode) => syncCameraInteractionMode(map, props.mapId, mode),
-    })
-
-    map.resize()
-    setInitialCameraView(map, mapOptions.scene.center, sceneMode, props.mapId)
-    map.render()
-
-    if (sceneMode === '2D') {
-      nextTick(() => {
-        if (!map || map.isDestroyed?.()) return
-        syncCameraInteractionMode(map, props.mapId, '2D')
-      })
-    }
-
-    startContinuousRendering(map)
-  } catch (error) {
-    mapStore.setMapLoadSta(MapLoadStatus.FAILED, props.mapId)
-    console.error('Cesium 地图加载失败:', error)
-  }
-}
-
-let animationId = null
-let lastActiveTime = Date.now()
-const IDLE_TIMEOUT = 30000
-
-function startContinuousRendering(viewer) {
-  if (animationId) return
-  function animate() {
-    const now = Date.now()
-    if (
-      isMapActive &&
-      !document.hidden &&
-      map &&
-      !map.isDestroyed?.() &&
-      now - lastActiveTime < IDLE_TIMEOUT
-    ) {
-      viewer.render()
-    }
-    animationId = requestAnimationFrame(animate)
-  }
-  animate()
-}
-
-function stopRenderLoop() {
-  if (animationId) {
-    cancelAnimationFrame(animationId)
-    animationId = null
-  }
-}
-
-function setupActivityListeners() {
-  const activities = ['mousemove', 'keydown', 'touchmove', 'wheel', 'click']
-  activities.forEach((event) => {
-    document.addEventListener(event, () => {
-      lastActiveTime = Date.now()
-    })
-  })
-}
-
-function resumeMapAfterCache() {
-  if (!map || map.isDestroyed?.()) return
-  mapStore.setCurrentMapId(props.mapId)
-  isMapActive = true
-  lastActiveTime = Date.now()
-  nextTick(() => {
-    if (!map || map.isDestroyed?.()) return
-    map.resize()
-    const mode = mapStore.getSceneMode(props.mapId)
-    syncCameraInteractionMode(map, props.mapId, mode === '2D' ? '2D' : '3D')
-    map.render()
-    if (!animationId) startContinuousRendering(map)
-  })
-}
-
-watch(
-  () => props.toolbarButtons,
-  () => {
-    if (map && !map.isDestroyed?.()) {
-      mountToolbarButtons(map)
-    }
-  },
-  { deep: true },
-)
-
-onMounted(() => {
-  mapStore.setCurrentMapId(props.mapId)
-  setupActivityListeners()
-  onEvent('map-scene-mode-changed', handleSceneModeChange)
-  initCesium()
-})
-
-onActivated(() => {
-  mapStore.setCurrentMapId(props.mapId)
-  if (!map || map.isDestroyed?.()) {
-    isMapActive = true
-    initCesium()
-    return
-  }
-  resumeMapAfterCache()
-})
-
-onDeactivated(() => {
-  isMapActive = false
-  stopRenderLoop()
-})
-
-onUnmounted(() => {
-  isMapActive = false
-  stopRenderLoop()
-  offEvent('map-scene-mode-changed', handleSceneModeChange)
-  if (map) {
-    teardownOrthographicWheelZoom(map)
-  }
-  removeToolbarButtons(customButtons)
-  customButtons = []
-  if (map) {
-    map.destroy()
-    map = null
-  }
-  mapStore.removeMapInstance(props.mapId)
-})
-</script>
-
-<style scoped lang="less">
-.cesium-map-wrapper {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.cesium-container {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-</style>
-
+<template>
+
+  <div class="cesium-map-wrapper" @pointerdown="handleMapPointerDown">
+
+    <div class="cesium-container" ref="cesiumContainer" />
+
+    <WsIndicator />
+
+  </div>
+
+</template>
+
+
+
+<script setup>
+
+import * as Cesium from 'cesium'
+
+import { ref, watch, onMounted, onUnmounted, onActivated, onDeactivated, nextTick, toRaw } from 'vue'
+
+import { MapConfig, DroneConfig } from './js/config/index.js'
+
+import WsIndicator from './components/wsIndicator/wsIndicator.vue'
+
+import { objectUtils } from './js/utils/cesium/object.js'
+
+import { basicConfig, teardownOrthographicWheelZoom } from './js/basis.js'
+
+import { useMapStore, MapLoadStatus } from './js/stores/mapStore.js'
+
+import { useEventBus } from './js/utils/useEventBus.js'
+
+import { processMapConfigColors } from './js/tileProviders.js'
+
+import { applyImageryLayers, resolveOnlineBasemap } from './js/utils/mapImagery.js'
+
+import { createCustomToolbarButtons } from './js/customToolbarButtons.js'
+
+import { ensureMapFocus } from './js/utils/cameraInteraction.js'
+
+
+
+const { merge } = objectUtils()
+
+const { mouseController, setInitialCameraView, syncCameraInteractionMode } = basicConfig()
+
+
+
+const {
+
+  addToolbarButton,
+
+  addToolbarButtons,
+
+  removeToolbarButtons,
+
+  createDefaultToolbarButtons,
+
+} = createCustomToolbarButtons()
+
+
+
+const mapStore = useMapStore()
+
+const { on: onEvent, off: offEvent } = useEventBus()
+
+
+
+const emit = defineEmits(['onload'])
+
+
+
+const props = defineProps({
+
+  options: {
+
+    type: Object,
+
+    default: undefined,
+
+  },
+
+  mapId: {
+
+    type: String,
+
+    default: 'default',
+
+  },
+
+  showDefaultToolbar: {
+
+    type: Boolean,
+
+    default: true,
+
+  },
+
+  toolbarButtons: {
+
+    type: Array,
+
+    default: undefined,
+
+  },
+
+  extraToolbarButtons: {
+
+    type: Array,
+
+    default: () => [],
+
+  },
+
+})
+
+
+
+function resolveToolbarButtonConfigs() {
+
+  if (props.toolbarButtons?.length) {
+
+    return props.toolbarButtons
+
+  }
+
+  const configs = []
+
+  if (props.showDefaultToolbar) {
+
+    configs.push(...createDefaultToolbarButtons({ mapId: props.mapId }))
+
+  }
+
+  if (props.extraToolbarButtons?.length) {
+
+    configs.push(...props.extraToolbarButtons)
+
+  }
+
+  return configs
+
+}
+
+
+
+const handleSceneModeChange = ({ mapId, sceneMode }) => {
+
+  if (mapId !== props.mapId || !map || map.isDestroyed?.()) return
+
+  syncCameraInteractionMode(map, mapId, sceneMode)
+
+}
+
+
+
+const handleMapPointerDown = () => {
+
+  if (map && !map.isDestroyed?.()) {
+
+    ensureMapFocus(map)
+
+  }
+
+}
+
+
+
+const cesiumContainer = ref(null)
+
+let map = null
+
+let customButtons = []
+
+let isMapActive = true
+
+
+
+function mountToolbarButtons(viewer) {
+
+  if (!viewer || viewer.isDestroyed?.()) return
+
+  removeToolbarButtons(customButtons)
+
+  customButtons = []
+
+  const toolbarConfigs = resolveToolbarButtonConfigs()
+
+  if (toolbarConfigs.length) {
+
+    customButtons = addToolbarButtons(viewer, toolbarConfigs)
+
+  }
+
+}
+
+
+
+const initCesium = async () => {
+
+  if (!cesiumContainer.value) return
+
+  mapStore.setMapLoadSta(MapLoadStatus.LOADING, props.mapId)
+
+
+
+  let mapOptions
+
+  if (MapConfig) {
+
+    mapOptions = MapConfig
+
+  }
+
+
+
+  if (DroneConfig) {
+
+    mapStore.setTrailTime(DroneConfig.trailTime, props.mapId)
+
+  }
+
+
+
+  if (props.options) {
+
+    let exOptions
+
+    if (props.options.then) {
+
+      exOptions = toRaw(await props.options)
+
+    } else {
+
+      exOptions = toRaw(props.options)
+
+    }
+
+
+
+    if (mapOptions) {
+
+      mapOptions = merge(mapOptions, exOptions)
+
+    } else {
+
+      mapOptions = exOptions
+
+    }
+
+  }
+
+
+
+  if (mapOptions) {
+
+    mapOptions = processMapConfigColors(mapOptions)
+
+  }
+
+
+
+  try {
+
+    const viewerOptions = {
+
+      sceneMode: Cesium.SceneMode.SCENE3D,
+
+      useDefaultRenderLoop: false,
+
+      baseLayer: mapOptions.control.imageryProvider === false ? false : undefined,
+
+      baseLayerPicker: mapOptions.control.baseLayerPicker,
+
+      geocoder: mapOptions.control.geocoder,
+
+      homeButton: mapOptions.control.homeButton,
+
+      sceneModePicker: mapOptions.control.sceneModePicker,
+
+      navigationHelpButton: mapOptions.control.navigationHelpButton,
+
+      animation: mapOptions.control.animation,
+
+      timeline: mapOptions.control.timeline,
+
+      infoBox: mapOptions.control.infoBox,
+
+      fullscreenButton: mapOptions.control.fullscreenButton,
+
+      vrButton: mapOptions.control.vrButton,
+
+      terrainProvider: mapOptions.terrain.show
+
+        ? await Cesium.CesiumTerrainProvider.fromUrl(mapOptions.terrain.url, {
+
+          requestWaterMask: mapOptions.terrain.coastlineData,
+
+          requestVertexNormals: mapOptions.terrain.lightingData,
+
+        })
+
+        : undefined,
+
+      terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,
+
+      creditContainer: document.createElement('div'),
+
+    }
+
+
+
+    const contextOptions = {
+
+      webgl: {
+
+        alpha: false,
+
+        depth: true,
+
+        stencil: false,
+
+        antialias: true,
+
+        premultipliedAlpha: true,
+
+        preserveDrawingBuffer: false,
+
+        failIfMajorPerformanceCaveat: false,
+
+      },
+
+      requestWebGl2: true,
+
+      powerPreference: 'high-performance',
+
+    }
+
+
+
+    const sceneRenderOptions = {
+
+      debugShowFramesPerSecond: mapOptions.scene.debugShowFramesPerSecond,
+
+      enableLighting: mapOptions.scene.globe.enableLighting,
+
+      depthTestAgainstTerrain: mapOptions.scene.globe.depthTestAgainstTerrain,
+
+      fogEnabled: mapOptions.scene.fog.enabled,
+
+      skyAtmosphereShow: mapOptions.scene.skyAtmosphere.show,
+
+      dynamicAtmosphereLighting: mapOptions.scene.globe.dynamicAtmosphereLighting,
+
+      dynamicAtmosphereLightingFromSun: mapOptions.scene.globe.dynamicAtmosphereLightingFromSun,
+
+    }
+
+
+
+    map = new Cesium.Viewer(cesiumContainer.value, {
+
+      ...viewerOptions,
+
+      contextOptions,
+
+    })
+
+
+
+    map.scene.debugShowFramesPerSecond = sceneRenderOptions.debugShowFramesPerSecond
+
+    map.scene.globe.enableLighting = sceneRenderOptions.enableLighting
+
+    map.scene.globe.depthTestAgainstTerrain = sceneRenderOptions.depthTestAgainstTerrain
+
+    map.scene.fog.enabled = sceneRenderOptions.fogEnabled
+
+    map.scene.skyAtmosphere.show = sceneRenderOptions.skyAtmosphereShow
+
+    map.scene.globe.dynamicAtmosphereLighting = sceneRenderOptions.dynamicAtmosphereLighting
+
+    map.scene.globe.dynamicAtmosphereLightingFromSun =
+
+      sceneRenderOptions.dynamicAtmosphereLightingFromSun
+
+
+
+    const sceneMode = mapOptions.scene.sceneMode || '3D'
+
+
+
+    const activeBasemap = resolveOnlineBasemap(mapOptions)
+
+    if (activeBasemap) {
+
+      applyImageryLayers(map, mapOptions, activeBasemap)
+
+      console.log(`加载在线底图：${activeBasemap.name}，URL：${activeBasemap.url}`)
+
+      window._currentBasemapId = activeBasemap.id
+
+    } else {
+
+      console.warn('未找到可用底图，Cesium 将使用默认底图或空底图显示')
+
+    }
+
+
+
+    if (map.screenSpaceEventHandler && mapOptions.control.disableDoubleClick) {
+
+      map.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
+
+    }
+
+
+
+    if (mapOptions.control.disableEntityClick) {
+
+      map.selectedEntityChanged.addEventListener(() => {
+
+        map.selectedEntity = undefined
+
+      })
+
+    }
+
+
+
+    mouseController(map, props.mapId)
+
+
+
+    mapStore.setMapInfo(
+
+      'center',
+
+      {
+
+        lng: mapOptions.scene.center.lng,
+
+        lat: mapOptions.scene.center.lat,
+
+        heading: mapOptions.scene.center.heading,
+
+        pitch: mapOptions.scene.center.pitch,
+
+        roll: mapOptions.scene.center.roll,
+
+        duration: mapOptions.scene.center.duration,
+
+        alt: mapOptions.scene.center.alt,
+
+      },
+
+      props.mapId,
+
+    )
+
+    mapStore.setMap(map, props.mapId)
+
+    mapStore.setSceneMode(sceneMode, props.mapId)
+
+
+
+    const center = mapOptions.scene.center || {}
+
+
+
+    mountToolbarButtons(map)
+
+    mapStore.setMapLoadSta(MapLoadStatus.LOADED, props.mapId)
+
+
+
+    console.log(`Cesium 地图加载成功，mapId: ${props.mapId}`)
+
+    emit('onload', {
+
+      map,
+
+      center,
+
+      mapId: props.mapId,
+
+      toolbar: {
+
+        addToolbarButton: (opt) => addToolbarButton(map, opt),
+
+        addToolbarButtons: (opts) => addToolbarButtons(map, opts),
+
+        removeToolbarButtons,
+
+      },
+
+      syncCameraInteractionMode: (mode) => syncCameraInteractionMode(map, props.mapId, mode),
+
+    })
+
+
+
+    map.resize()
+
+    setInitialCameraView(map, mapOptions.scene.center, sceneMode, props.mapId)
+
+    map.render()
+
+
+
+    if (sceneMode === '2D') {
+
+      nextTick(() => {
+
+        if (!map || map.isDestroyed?.()) return
+
+        syncCameraInteractionMode(map, props.mapId, '2D')
+
+      })
+
+    }
+
+
+
+    startContinuousRendering(map)
+
+  } catch (error) {
+
+    mapStore.setMapLoadSta(MapLoadStatus.FAILED, props.mapId)
+
+    console.error('Cesium 地图加载失败:', error)
+
+  }
+
+}
+
+
+
+let animationId = null
+
+let lastActiveTime = Date.now()
+
+const IDLE_TIMEOUT = 30000
+
+
+
+function startContinuousRendering(viewer) {
+
+  if (animationId) return
+
+  function animate() {
+
+    const now = Date.now()
+
+    if (
+
+      isMapActive &&
+
+      !document.hidden &&
+
+      map &&
+
+      !map.isDestroyed?.() &&
+
+      now - lastActiveTime < IDLE_TIMEOUT
+
+    ) {
+
+      viewer.render()
+
+    }
+
+    animationId = requestAnimationFrame(animate)
+
+  }
+
+  animate()
+
+}
+
+
+
+function stopRenderLoop() {
+
+  if (animationId) {
+
+    cancelAnimationFrame(animationId)
+
+    animationId = null
+
+  }
+
+}
+
+
+
+function setupActivityListeners() {
+
+  const activities = ['mousemove', 'keydown', 'touchmove', 'wheel', 'click']
+
+  activities.forEach((event) => {
+
+    document.addEventListener(event, () => {
+
+      lastActiveTime = Date.now()
+
+    })
+
+  })
+
+}
+
+
+
+function resumeMapAfterCache() {
+
+  if (!map || map.isDestroyed?.()) return
+
+  mapStore.setCurrentMapId(props.mapId)
+
+  isMapActive = true
+
+  lastActiveTime = Date.now()
+
+  nextTick(() => {
+
+    if (!map || map.isDestroyed?.()) return
+
+    map.resize()
+
+    const mode = mapStore.getSceneMode(props.mapId)
+
+    syncCameraInteractionMode(map, props.mapId, mode === '2D' ? '2D' : '3D')
+
+    map.render()
+
+    if (!animationId) startContinuousRendering(map)
+
+  })
+
+}
+
+
+
+watch(
+
+  () => props.toolbarButtons,
+
+  () => {
+
+    if (map && !map.isDestroyed?.()) {
+
+      mountToolbarButtons(map)
+
+    }
+
+  },
+
+  { deep: true },
+
+)
+
+
+
+onMounted(() => {
+
+  mapStore.setCurrentMapId(props.mapId)
+
+  setupActivityListeners()
+
+  onEvent('map-scene-mode-changed', handleSceneModeChange)
+
+  initCesium()
+
+})
+
+
+
+onActivated(() => {
+
+  mapStore.setCurrentMapId(props.mapId)
+
+  if (!map || map.isDestroyed?.()) {
+
+    isMapActive = true
+
+    initCesium()
+
+    return
+
+  }
+
+  resumeMapAfterCache()
+
+})
+
+
+
+onDeactivated(() => {
+
+  isMapActive = false
+
+  stopRenderLoop()
+
+})
+
+
+
+onUnmounted(() => {
+
+  isMapActive = false
+
+  stopRenderLoop()
+
+  offEvent('map-scene-mode-changed', handleSceneModeChange)
+
+  if (map) {
+
+    teardownOrthographicWheelZoom(map)
+
+  }
+
+  removeToolbarButtons(customButtons)
+
+  customButtons = []
+
+  if (map) {
+
+    map.destroy()
+
+    map = null
+
+  }
+
+  mapStore.removeMapInstance(props.mapId)
+
+})
+
+</script>
+
+
+
+<style scoped lang="less">
+.cesium-map-wrapper {
+
+  width: 100%;
+
+  height: 100%;
+
+  position: relative;
+
+}
+
+
+
+.cesium-container {
+
+  width: 100%;
+
+  height: 100%;
+
+  position: relative;
+
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "huweili-cesium",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "基于 Cesium 的地图工具库（无人机态势、轨迹、围栏、工具栏等）",
   "type": "module",
   "main": "./index.js",