| | |
| | | <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'> |
| | |
| | | <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;" /> |
| | |
| | | </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' |
| | |
| | | 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, |
| | |
| | | } |
| | | } |
| | | 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) |
| | |
| | | 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) |
| | |
| | | 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 { |
| | |
| | | .zoon { |
| | | position: absolute; |
| | | right: 20px; |
| | | bottom: 340px; |
| | | bottom: 173px; |
| | | color: #fff; |
| | | font-size: 16px; |
| | | display: flex; |
| | |
| | | position: absolute; |
| | | background-color: #fff; |
| | | z-index: 30; |
| | | bottom: 400px; |
| | | bottom: 205px; |
| | | font-size: 14px; |
| | | right: 20px; |
| | | cursor: pointer; |
| | |
| | | width: 40px; |
| | | height: 40px; |
| | | padding: 3px; |
| | | right: 20px; |
| | | bottom: 120px; |
| | | right: 17px; |
| | | bottom: 70px; |
| | | background: #fff; |
| | | margin-top: 10px; |
| | | border-radius: 50%; |