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/store/map.js | 73 +++++++++++------
src/components/global/MapContainer.vue | 162 ++++++++++++++++++++++++++-------------
2 files changed, 154 insertions(+), 81 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
diff --git a/src/store/map.js b/src/store/map.js
index 0788449..5b32919 100644
--- a/src/store/map.js
+++ b/src/store/map.js
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2024-10-28 18:24:16
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2025-02-12 18:21:51
+ * @LastEditTime: 2025-07-31 20:29:37
* @FilePath: \bigScreen\src\store\map.js
* @Description:
*
@@ -12,36 +12,57 @@
import { defineStore } from 'pinia'
export const useMap = defineStore('map', {
- // 存储状态的地方，相当于 Vuex 的 state
- state: () => ({
- loadMap: false,
- pointHeight: 64,
- editPoint: false,
- startCustomWx: false,
- showPreLevel: false,
- }),
+ // 存储状态的地方，相当于 Vuex 的 state
+ state: () => ({
+ loadMap: false,
+ pointHeight: 64,
+ editPoint: false,
+ startCustomWx: false,
+ showPreLevel: false,
- // 相当于 Vuex 的 getters，用于计算状态
- getters: {
+ rimPosition: {
+ lng: '',
+ lat: '',
+ alt: ''
+ }
+ }),
- },
+ // 相当于 Vuex 的 getters，用于计算状态
+ getters: {
- // 相当于 Vuex 的 mutations 和 actions，用于同步或异步地修改状态
- actions: {
- setLoadMap (flag) {
- this.loadMap = flag
},
- setEditPoint (flag) {
- this.editPoint = flag
+ // 相当于 Vuex 的 mutations 和 actions，用于同步或异步地修改状态
+ actions: {
+ setLoadMap (flag) {
+ this.loadMap = flag
+ },
+
+ setEditPoint (flag) {
+ this.editPoint = flag
+ },
+
+ setStartCustomWx (flag) {
+ this.startCustomWx = flag
+ },
+
+ setShowPreLevel (flag) {
+ this.showPreLevel = flag
+ },
+
+ setRimPosition (rimPosition) {
+ this.rimPosition = rimPosition
+ }
},
- setStartCustomWx (flag) {
- this.startCustomWx = flag
- },
-
- setShowPreLevel (flag) {
- this.showPreLevel = flag
- },
- }
+ persist: {
+ enabled: true,
+ strategies: [
+ {
+ key: 'rimPosition',
+ paths: ['rimPosition'],
+ storage: localStorage,
+ }
+ ]
+ }
})
--
Gitblit v1.9.3