<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="switch">
|
<div class="2d" v-if="dimension === 2" @click="switchDimension('3D')">2D</div>
|
<div class="3d" v-else @click="switchDimension('2D')">3D</div>
|
</div>
|
</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 } from '@ant-design/icons-vue'
|
import { useMyStore } from '/@/store'
|
import * as Cesium from 'cesium'
|
type result = {
|
label: string,
|
value: string,
|
location: string,
|
district: string,
|
}
|
const searchText = ref('')
|
const resultList = ref<result[]>([])
|
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 } = 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)
|
}
|
</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;
|
}
|
}
|
|
.switch {
|
position: absolute;
|
background-color: #fff;
|
z-index: 30;
|
bottom: 80px;
|
font-size: 14px;
|
right: 20px;
|
cursor: pointer;
|
box-shadow: 0 0 4px 0 rgba(0, 0, 0, .6);
|
width: 28px;
|
height: 28px;
|
color: #4e4e4e;
|
font-weight: 600;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.switch:hover {
|
color: #1180ff;
|
}
|
</style>
|
