地图增加周边检索

shuishen

2025-08-06 ae5f9eb13c2b24fddda49288f26274d99b7a085a

地图增加周边检索

 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>

 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,
            }
        ]
    }
})