<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'>
|
</a-auto-complete>
|
<span class="search-icon" @click="() => show = !show">
|
<SearchOutlined style="fontSize:24px; color: blue;" />
|
</span>
|
</div>
|
|
<div class="zoon">
|
<span class="zoon-in" @mousedown="handleMouseDown(zoonIn)" @mouseup="handleMouseUp">
|
<PlusOutlined style="fontSize:24px; color: black;" />
|
</span>
|
|
<span class="zoon-out" @mousedown="handleMouseDown(zoonOut)" @mouseup="handleMouseUp">
|
<MinusOutlined style="fontSize:24px; color: black;" />
|
</span>
|
</div>
|
<div class="switch">
|
<div class="2d" v-if="dimension === 2" @click="switchDimension('3D')">2D</div>
|
<div class="3d" v-else @click="switchDimension('2D')">3D</div>
|
</div>
|
<a-popover placement="left" overlayClassName="popover-card">
|
<template #content>
|
<div class="map-img">
|
<div class="stand-box" :class="{ 'active-icon': mapSetting.mode === 0 }" @click.self="setMap(0)"></div>
|
<div class="satellite-box" :class="{ 'active-icon': mapSetting.mode === 1 }" @click.self="setMap(1)">
|
<div class="road-line" :class="{'disabled': mapSetting.mode === 0}">
|
<a-checkbox :disabled="mapSetting.mode === 0" v-model:checked="mapSetting.roadLine" style="color: #fff !important;" @change="roadChange">开启路网</a-checkbox>
|
</div>
|
</div>
|
</div>
|
</template>
|
<div class="layer-icon">
|
<div class="layer-btn">
|
<div class="img" :style="{'background': loadBgImg}"></div>
|
</div>
|
</div>
|
</a-popover>
|
</template>\
|
|
<script setup lang="ts">
|
import { ref, } from 'vue'
|
import _ from 'lodash'
|
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
|
import { gaodeSearch } from '/@/api/gaode'
|
import { SearchOutlined, PlusOutlined, MinusOutlined } from '@ant-design/icons-vue'
|
import { useMyStore } from '/@/store'
|
import { requireImg } from '/@/utils/common'
|
import * as Cesium from 'cesium'
|
type result = {
|
label: string,
|
value: string,
|
location: string,
|
district: string,
|
}
|
const searchText = ref('')
|
const resultList = ref<result[]>([])
|
const timer = ref<any>(null)
|
const store = useMyStore()
|
const centerConfig = computed(() => {
|
return store.state.map.centerConfig
|
})
|
const show = ref(false)
|
const search = async () => {
|
resultList.value = []
|
const params = {
|
keyword: searchText.value
|
}
|
const res = await gaodeSearch(params)
|
if (res.code !== 0) return
|
if (res.data.tips.length > 0) {
|
res.data.tips.shift()
|
resultList.value = res.data.tips.map((v: any) => {
|
return {
|
value: `${v.name}(${v.district})`,
|
label: v.name,
|
location: v.location,
|
district: v.district,
|
}
|
})
|
}
|
}
|
const searchLocation = _.debounce(search, 500)
|
const { flyTo, addPoint, removeById, switchModel, dimension, zoonIn, zoonOut, roadPattern, patternMap } = cesiumOperation()
|
const enter = (e: string) => {
|
removeById('key')
|
const filterItem = resultList.value.find(v => v.value === e)
|
const [longitude, latitude] = filterItem?.location.split(',')
|
const params = {
|
longitude: longitude - 0,
|
latitude: latitude - 0,
|
}
|
const pointParams = {
|
point: {
|
pixelSize: 20,
|
outlineWidth: 4,
|
color: Cesium.Color.GREEN,
|
outlineColor: Cesium.Color.WHITE,
|
},
|
label: {
|
text: filterItem?.label,
|
outlineWidth: 20,
|
font: '24px sans-serif',
|
heightReference: 80,
|
pixelOffset: new Cesium.Cartesian2(0, -35),
|
fillColor: Cesium.Color.BROWN
|
},
|
id: 'key'
|
}
|
addPoint({ ...pointParams, ...params })
|
flyTo(params)
|
}
|
const switchDimension = (type: string) => {
|
switchModel(type)
|
}
|
const handleMouseDown = (fn: Function) => {
|
// clearInterval(timer.value)
|
timer.value = setInterval(() => {
|
fn(10)
|
}, 100)
|
}
|
const handleMouseUp = () => {
|
clearInterval(timer.value)
|
}
|
const mapSetting = computed(() => store.state.common.mapSetting)
|
const setMap = (type: number) => {
|
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)
|
if (e.target.checked) {
|
roadPattern(true)
|
} else {
|
roadPattern(false)
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.cesium {
|
: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 {
|
position: absolute;
|
top: 40px;
|
right: 20px;
|
color: #fff;
|
font-size: 16px;
|
display: flex;
|
align-items: center;
|
height: 32px;
|
|
.search-icon {
|
padding: 5px;
|
background-color: #fff;
|
height: 32px;
|
cursor: pointer;
|
}
|
}
|
|
.zoon {
|
position: absolute;
|
right: 20px;
|
bottom: 340px;
|
color: #fff;
|
font-size: 16px;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
height: 32px;
|
|
&-in,
|
&-out {
|
padding: 5px;
|
background-color: #fff;
|
height: 32px;
|
cursor: pointer;
|
margin-top: 10px;
|
}
|
}
|
|
.switch {
|
position: absolute;
|
background-color: #fff;
|
z-index: 30;
|
bottom: 400px;
|
font-size: 14px;
|
right: 20px;
|
cursor: pointer;
|
box-shadow: 0 0 4px 0 rgba(0, 0, 0, .6);
|
width: 34px;
|
height: 34px;
|
color: #4e4e4e;
|
font-weight: 600;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.layer-icon {
|
pointer-events: auto;
|
position: absolute;
|
box-sizing: border-box;
|
width: 40px;
|
height: 40px;
|
padding: 3px;
|
right: 20px;
|
bottom: 120px;
|
background: #fff;
|
margin-top: 10px;
|
border-radius: 50%;
|
|
.layer-btn {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
width: 34px;
|
height: 34px;
|
border-radius: 50%;
|
background: #fff;
|
box-shadow: 0 0 4px 0 rgba(0, 0, 0, .6);
|
cursor: pointer;
|
}
|
|
.img {
|
width: 100%;
|
height: 100%;
|
border-radius: 50%;
|
background: url('../../assets//icons//satellite-icon.png') no-repeat center;
|
}
|
}
|
|
.map-img {
|
width: 240px;
|
height: 120px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 10px 5px;
|
box-sizing: border-box;
|
|
.stand-box {
|
background: url('../../assets/icons/stand.png') no-repeat 100% 100%;
|
width: 110px;
|
height: 100%;
|
box-sizing: border-box;
|
position: relative;
|
}
|
|
.stand-box::after {
|
content: '标准地图';
|
position: absolute;
|
bottom: 0;
|
right: 0;
|
color: #fff;
|
font-size: 14px;
|
}
|
|
.satellite-box {
|
background: url('../../assets/icons/satellite-icon.png') no-repeat 100% 100%;
|
width: 110px;
|
height: 100%;
|
box-sizing: border-box;
|
position: relative;
|
.road-line {
|
width: 100%;
|
color: #fff;
|
font-size: 14px;
|
background: rgba(0,0,0,.5);
|
:deep(.ant-checkbox-disabled + span) {
|
color: #fff !important;
|
opacity: .4;
|
}
|
}
|
.disabled {
|
cursor: no-drop;
|
}
|
}
|
|
.satellite-box::after {
|
content: '卫星地图';
|
position: absolute;
|
bottom: 0;
|
right: 0;
|
color: #fff;
|
font-size: 14px;
|
padding: 1px 2px;
|
background-color: #2d8cf0;
|
}
|
}
|
|
.active-icon {
|
border: 2px solid #1180ff;
|
}
|
|
.switch:hover {
|
color: #1180ff;
|
}</style>
|
