<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2024-10-25 15:07:51
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2025-08-06 00:13:28
|
* @FilePath: \jsProject\bigScreen\src\components\global\MapContainer.vue
|
* @Description:
|
*
|
* Copyright (c) 2024 by shuishen, All Rights Reserved.
|
-->
|
<template>
|
<div class="viewer-container" id="viewer-container">
|
<div v-show="isShowRim" class="rim-box" :style="{
|
top: currentTop,
|
left: currentLeft
|
}" @click="rimClick">周边检索</div>
|
|
<div class="content">
|
<slot name="content"></slot>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import * as turf from '@turf/turf'
|
import { useMap } from 'store/map'
|
import { ref, nextTick, onMounted, onUnmounted, onBeforeUnmount } from 'vue'
|
import { useRouter, useRoute } from 'vue-router'
|
let router = useRouter()
|
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'
|
|
const store = useMap()
|
|
const isShowRim = ref(false)
|
const currentTop = ref('0px')
|
const currentLeft = ref('0px')
|
|
const currentPosition = ref(null)
|
|
const viewerRightClick = (e) => {
|
currentLeft.value = e.windowPosition.x + 'px'
|
currentTop.value = e.windowPosition.y + 'px'
|
|
currentPosition.value = e.wgs84Position ? e.wgs84Position : e.wgs84SurfacePosition
|
|
isShowRim.value = true
|
}
|
|
const viewerClick = (e) => {
|
isShowRim.value = false
|
}
|
|
const rimClick = () => {
|
isShowRim.value = false
|
|
store.setRimPosition(currentPosition.value)
|
|
router.push({
|
path: '/layout/map/main/rim'
|
})
|
}
|
|
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.6080,
|
29.7880,
|
3000,
|
0,
|
-45,
|
0
|
), () => {
|
window.$viewer.on(DC.MouseEventType.CLICK, viewerClick)
|
window.$viewer.on(DC.MouseEventType.RIGHT_CLICK, viewerRightClick)
|
|
store.setLoadMap(true)
|
})
|
})
|
})
|
}
|
|
onMounted(() => {
|
initMap()
|
})
|
|
onBeforeUnmount(() => {
|
window.$viewer && window.$viewer.off(DC.MouseEventType.CLICK, viewerClick)
|
window.$viewer && window.$viewer.off(DC.MouseEventType.RIGHT_CLICK, viewerRightClick)
|
})
|
|
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>
|
export default {
|
name: 'MapContainer'
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.viewer-container {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
|
.rim-box {
|
padding: 6px 8px;
|
position: absolute;
|
top: 0;
|
left: 0;
|
color: #fff;
|
background: rgba(28, 115, 195, 0.5);
|
border-radius: 5px;
|
cursor: pointer;
|
z-index: 999;
|
transform: translate(10px, -50%);
|
box-sizing: border-box;
|
}
|
}
|
</style>
|
