罗广辉
2025-06-19 f27ca082eb0a839449dd50c49007b58e5ed6946f
src/components/cesiumMap/cesium.vue
@@ -1,6 +1,5 @@
<template>
  <div class="height-100 width-100 cesium" id="cesiumContainer"></div>
  <div v-if="centerConfig.type && !centerConfig.latitude" class="pointLongitude">在地图上点击绘制项目中心点</div>
  <div class="search">
    <a-auto-complete v-if="show" v-model:value="searchText" style="width: 200px;height: 100%;" placeholder="请输入地址"
      @select="enter" @change="searchLocation" :options='resultList'>
@@ -9,7 +8,8 @@
      <SearchOutlined style="fontSize:24px; color: blue;" />
    </span>
  </div>
  <!-- 事件编辑 -->
  <actionEdit />
  <div class="zoon">
    <span class="zoon-in" @mousedown="handleMouseDown(zoonIn)" @mouseup="handleMouseUp">
      <PlusOutlined style="fontSize:24px; color: black;" />
@@ -36,11 +36,11 @@
    </template>
    <div class="layer-icon">
      <div class="layer-btn">
        <div class="img"></div>
        <div class="img" :style="{'background': loadBgImg}"></div>
      </div>
    </div>
  </a-popover>
</template>\
</template>
<script setup lang="ts">
import { ref, } from 'vue'
@@ -49,6 +49,8 @@
import { gaodeSearch } from '/@/api/gaode'
import { SearchOutlined, PlusOutlined, MinusOutlined } from '@ant-design/icons-vue'
import { useMyStore } from '/@/store'
import { requireImg } from '/@/utils/common'
import actionEdit from '../waylinetool/index.vue'
import * as Cesium from 'cesium'
type result = {
  label: string,
@@ -84,7 +86,7 @@
  }
}
const searchLocation = _.debounce(search, 500)
const { flyTo, addPoint, removeById, switchModel, dimension, zoonIn, zoonOut, roadPattern, patternMap } = cesiumOperation()
const { flyTo, addPoint, removeById, switchModel, dimension, zoonIn, zoonOut, roadPattern, patternMap, loadGeoJson } = cesiumOperation()
const enter = (e: string) => {
  removeById('key')
  const filterItem = resultList.value.find(v => v.value === e)
@@ -130,6 +132,13 @@
  store.commit('SET_MAP_SETTING_MODE', type)
  patternMap()
}
const loadBgImg = computed(() => {
  if (store.state.common.mapSetting.mode === 0) {
    return `url(${requireImg('icons/stand.png')}) no-repeat center`
  } else {
    return `url(${requireImg('icons/satellite-icon.png')}) no-repeat center`
  }
})
const roadChange = (e:any) => {
  if (mapSetting.value.mode === 0) return
  store.commit('SET_MAP_SETTING_ROAD_LINE', e.target.checked)
@@ -139,28 +148,14 @@
    roadPattern(false)
  }
}
const checked = ref(true)
</script>
<style scoped lang="scss">
.cesium {
  position: relative;
  :deep(.cesium-viewer-bottom) {
    display: none !important;
  }
}
.pointLongitude {
  background-color: rgba(20, 20, 20, 0.792);
  position: absolute;
  z-index: 30;
  bottom: 30px;
  color: #fff;
  left: 0;
  right: 0;
  margin: 0 80px;
  padding: 15px 0;
  text-align: center;
  font-size: 16px;
}
.search {
@@ -184,7 +179,7 @@
.zoon {
  position: absolute;
  right: 20px;
  bottom: 340px;
  bottom: 173px;
  color: #fff;
  font-size: 16px;
  display: flex;
@@ -206,7 +201,7 @@
  position: absolute;
  background-color: #fff;
  z-index: 30;
  bottom: 400px;
  bottom: 205px;
  font-size: 14px;
  right: 20px;
  cursor: pointer;
@@ -227,8 +222,8 @@
  width: 40px;
  height: 40px;
  padding: 3px;
  right: 20px;
  bottom: 120px;
  right: 17px;
  bottom: 70px;
  background: #fff;
  margin-top: 10px;
  border-radius: 50%;