地图增加周边检索

shuishen

2025-08-06 ae5f9eb13c2b24fddda49288f26274d99b7a085a

地图增加周边检索

 src/components/global/MapContainer.vue

@@ -2,14 +2,19 @@
 * @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 v-show="isShowRim" class="rim-box" :style="{
            top: currentTop,
            left: currentLeft
        }" @click="rimClick">周边检索</div>

    <div class="content">
      <slot name="content"></slot>
    </div>
@@ -17,9 +22,11 @@
</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
@@ -28,6 +35,31 @@
// 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 rimClick = () => {
    isShowRim.value = false

    store.setRimPosition(currentPosition.value)

    router.push({
        path: '/layout/map/main/rim'
    })
}

function initMap () {
  if (window.$viewer) return
@@ -52,6 +84,8 @@
        -45,
        0
      ), () => {
                window.$viewer.on(DC.MouseEventType.RIGHT_CLICK, viewerRightClick)

        store.setLoadMap(true)
      })
    })
@@ -60,6 +94,10 @@

onMounted(() => {
  initMap()
})

onBeforeUnmount(() => {
    window.$viewer && window.$viewer.off(DC.MouseEventType.RIGHT_CLICK, viewerRightClick)
})

onUnmounted(() => {
@@ -97,5 +135,19 @@
  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: 
 * 
@@ -19,6 +19,12 @@
    editPoint: false,
    startCustomWx: false,
    showPreLevel: false,

        rimPosition: {
            lng: '',
            lat: '',
            alt: ''
        }
  }),

  // 相当于 Vuex 的 getters，用于计算状态
@@ -43,5 +49,20 @@
    setShowPreLevel (flag) {
      this.showPreLevel = flag
    },

        setRimPosition (rimPosition) {
            this.rimPosition = rimPosition
        }
    },

    persist: {
        enabled: true,
        strategies: [
            {
                key: 'rimPosition',
                paths: ['rimPosition'],
                storage: localStorage,
            }
        ]
  }
})