From ae5f9eb13c2b24fddda49288f26274d99b7a085a Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 06 Aug 2025 00:11:35 +0800
Subject: [PATCH] 地图增加周边检索
---
src/components/global/MapContainer.vue | 162 +++++++++++++++++++++++++++++++++++------------------
1 files changed, 107 insertions(+), 55 deletions(-)
diff --git a/src/components/global/MapContainer.vue b/src/components/global/MapContainer.vue
index 94330b1..3435481 100644
--- a/src/components/global/MapContainer.vue
+++ b/src/components/global/MapContainer.vue
@@ -2,24 +2,31 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2024-10-25 15:07:51
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2025-02-14 18:14:53
- * @FilePath: \bigScreen\src\components\global\MapContainer.vue
+ * @LastEditTime: 2025-08-05 23:38:47
+ * @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 class="content">
- <slot name="content"></slot>
+ <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>
- </div>
</template>
<script setup>
-import { useMap } from 'store/map'
-import { nextTick, onMounted, onUnmounted } from 'vue'
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
@@ -29,73 +36,118 @@
const store = useMap()
-function initMap () {
- if (window.$viewer) return
+const isShowRim = ref(false)
+const currentTop = ref('0px')
+const currentLeft = ref('0px')
- 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')
+const currentPosition = ref(null)
- window.$viewer = new DC.Viewer('viewer-container')
- // window.$viewer.locationBar.enable = true
+const viewerRightClick = (e) => {
+ currentLeft.value = e.windowPosition.x + 'px'
+ currentTop.value = e.windowPosition.y + 'px'
- window.$viewer.zoomToPosition(new DC.Position(
- 115.6080,
- 29.7880,
- 3000,
- 0,
- -45,
- 0
- ), () => {
- store.setLoadMap(true)
- })
+ currentPosition.value = e.wgs84Position ? e.wgs84Position : e.wgs84SurfacePosition
+
+ isShowRim.value = true
+}
+
+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.RIGHT_CLICK, viewerRightClick)
+
+ store.setLoadMap(true)
+ })
+ })
+ })
}
onMounted(() => {
- initMap()
+ initMap()
+})
+
+onBeforeUnmount(() => {
+ 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?.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)
+ 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'
+ name: 'MapContainer'
}
</script>
<style lang="scss" scoped>
.viewer-container {
- position: absolute;
- width: 100%;
- height: 100%;
+ 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>
\ No newline at end of file
--
Gitblit v1.9.3