智慧园区前端大屏
shuishen
2024-12-18 9a37c5e1b2190c3f6ec71483923922189091dd52
src/components/global/MapContainer.vue
@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-25 15:07:51
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-28 16:42:35
 * @LastEditTime: 2024-12-03 12:21:28
 * @FilePath: \bigScreen\src\components\global\MapContainer.vue
 * @Description: 
 * 
@@ -17,10 +17,73 @@
</template>
<script setup>
import { readyViewer } from 'hooks/initMap'
import { onMounted } from 'vue'
import { useMap } from 'store/map'
import { nextTick, onMounted, onUnmounted } from 'vue'
import * as turf from '@turf/turf'
window.$viewer = null
window.$Cesium = null
window.$turf = null
const { VITE_APP_BASE } = import.meta.env
// import * as Cesium from 'cesium'
// import 'cesium/Build/Cesium/Widgets/widgets.css'
readyViewer()
const store = useMap()
function initMap () {
  if (window.$viewer) return
  nextTick(() => {
    DC.ready({
      // Cesium: Cesium,
      baseUrl: `${VITE_APP_BASE}libs/dc-sdk/resources/`,
      turf,
    }).then(() => {
      window.$Cesium = DC.getLib('Cesium')
      window.$turf = DC.getLib('turf')
      window.$viewer = new DC.Viewer('viewer-container')
      window.$viewer.locationBar.enable = true
      window.$viewer.zoomToPosition(new DC.Position(
        115.1021,
        27.2360,
        5000,
        0,
        -45,
        0
      ), () => {
        store.setLoadMap(true)
      })
    })
  })
}
onMounted(() => {
  initMap()
})
onUnmounted(() => {
  window.$viewer?.entities.removeAll()
  window.$viewer?.imageryLayers.removeAll()
  window.$viewer?.dataSources.removeAll()
  let gl = window.$viewer.scene.context._originalGLContext
  gl.canvas.width = 1
  gl.canvas.height = 1
  window.$viewer && window.$viewer.setTerrain()
  window.$viewer && window.$viewer.destroy()
  window.$viewer = null
  delete window.$viewer
  window.$Cesium = null
  delete window.$Cesium
  window.$turf = null
  delete window.$turf
  var cesiumContainer = document.getElementById('viewer-container')
  if (cesiumContainer) {
    cesiumContainer.remove() // 移除与地图相关的DOM元素
  }
  store.setLoadMap(false)
})
</script>
<script>