|
|
@ -4,12 +4,7 @@ |
|
|
|
<iconpark-icon name="search" size="16" fill="#fff"></iconpark-icon> |
|
|
|
</span> |
|
|
|
|
|
|
|
<el-popover |
|
|
|
placement="bottom" |
|
|
|
:width="280" |
|
|
|
:visible="popoverVisible" |
|
|
|
popper-class="map-search-popper" |
|
|
|
> |
|
|
|
<el-popover placement="bottom" :width="280" :visible="popoverVisible" popper-class="map-search-popper"> |
|
|
|
<template #reference> |
|
|
|
<el-input |
|
|
|
class="map-search-input" |
|
|
@ -24,10 +19,7 @@ |
|
|
|
共搜索到<span>{{ searchResultList.length }}</span |
|
|
|
>条结果 |
|
|
|
</div> |
|
|
|
<div |
|
|
|
v-if="searchResultList.length > 0" |
|
|
|
class="map-search-result-list" |
|
|
|
> |
|
|
|
<div v-if="searchResultList.length > 0" class="map-search-result-list"> |
|
|
|
<div |
|
|
|
class="map-search-result-list-item" |
|
|
|
v-for="(item, index) in searchResultList" |
|
|
@ -35,18 +27,32 @@ |
|
|
|
@click.stop="flyTo(item)" |
|
|
|
> |
|
|
|
<div class="title"> |
|
|
|
<span class="name">{{ item?.properties?.RES_NAME }}</span> |
|
|
|
<span class="tag">{{ item?.properties?.ENG_SCAL }}级</span> |
|
|
|
</div> |
|
|
|
<div class="item"> |
|
|
|
<i></i>工程代码:{{ item?.properties?.RES_CODE }} |
|
|
|
<span class="name">{{ |
|
|
|
item?.properties?.RES_NAME ?? item?.properties?.DIKE_NAME ?? item?.properties?.WAGA_NAME |
|
|
|
}}</span> |
|
|
|
<span class="tag" |
|
|
|
>{{ |
|
|
|
item?.properties?.ENG_SCAL ?? item?.properties?.DIKE_GRAD ?? item?.properties?.WAGA_SCALE |
|
|
|
}}级</span |
|
|
|
> |
|
|
|
</div> |
|
|
|
<div class="item"> |
|
|
|
<i></i>工程类型:{{ item?.properties?.RES_TYPE }} |
|
|
|
<i></i>工程代码:{{ |
|
|
|
item?.properties?.RES_CODE ?? item?.properties?.DIKE_CODE ?? item?.properties?.WAGA_CODE |
|
|
|
}} |
|
|
|
</div> |
|
|
|
<div class="item"> |
|
|
|
<i></i>工程地址:{{ item?.properties?.RES_LOC }} |
|
|
|
<i></i>工程类型:{{ |
|
|
|
item?.properties?.RES_TYPE ?? item?.properties?.DIKE_GRAD ?? item?.properties?.WAGA_TYPE |
|
|
|
}} |
|
|
|
</div> |
|
|
|
<template v-if="!item?.properties?.START_LOC && !item?.properties?.END_LOC"> |
|
|
|
<div class="item"><i></i>工程地址:{{ item?.properties?.RES_LOC ?? item?.properties?.WAGA_LOC }}</div> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<div class="item"><i></i>堤防起点:{{ item?.properties?.START_LOC }}</div> |
|
|
|
<div class="item"><i></i>堤防终点:{{ item?.properties?.END_LOC }}</div> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-else class="map-search-result-list no-data"> |
|
|
@ -90,34 +96,35 @@ const showPopover = () => { |
|
|
|
|
|
|
|
const searchValue = ref(""); |
|
|
|
const searchResultList = ref<any[]>([]); |
|
|
|
const layerData = computed(() => |
|
|
|
projectStore.selectedLayers.find((f: any) => f.isSupportFastQuery === "1") |
|
|
|
); |
|
|
|
const layerDatas = computed(() => projectStore.selectedLayers.filter((f: any) => f.isSupportFastQuery === "1")); |
|
|
|
const changeInputValue = async (value: string) => { |
|
|
|
const searchStr = (value ?? "").trim(); |
|
|
|
if (!layerData.value) return; |
|
|
|
if (!layerDatas.value?.length) return; |
|
|
|
if (!searchStr) { |
|
|
|
searchResultList.value = []; |
|
|
|
return; |
|
|
|
} |
|
|
|
showPopover(); |
|
|
|
const data = await getReservoirList(layerData.value, searchStr); |
|
|
|
searchResultList.value = data?.features ?? []; |
|
|
|
const promiseList: any[] = []; |
|
|
|
layerDatas.value.forEach((layerData: any) => { |
|
|
|
promiseList.push(getReservoirList(layerData, searchStr)); |
|
|
|
}); |
|
|
|
Promise.all(promiseList).then((res: any) => { |
|
|
|
let features: any = []; |
|
|
|
res.forEach((item: any) => { |
|
|
|
features = features.concat(item?.features ?? []); |
|
|
|
}); |
|
|
|
searchResultList.value = features ?? []; |
|
|
|
}); |
|
|
|
}; |
|
|
|
const flyTo = (item: any) => { |
|
|
|
const coordinates = item?.geometry?.coordinates; |
|
|
|
if (!coordinates) return; |
|
|
|
popoverVisible.value = false; |
|
|
|
const center = SyCim.Parse.parsePosition( |
|
|
|
`${coordinates[0]},${coordinates[1]},10` |
|
|
|
).toCartesian3(); |
|
|
|
const center = SyCim.Parse.parsePosition(`${coordinates[0]},${coordinates[1]},10`).toCartesian3(); |
|
|
|
const boundingSphere = new Cesium.BoundingSphere(center, 100); |
|
|
|
viewer.camera.flyToBoundingSphere(boundingSphere, { |
|
|
|
offset: new Cesium.HeadingPitchRange( |
|
|
|
viewer.camera.heading, |
|
|
|
viewer.camera.pitch, |
|
|
|
500 |
|
|
|
), |
|
|
|
offset: new Cesium.HeadingPitchRange(viewer.camera.heading, viewer.camera.pitch, 500), |
|
|
|
duration: 2, |
|
|
|
}); |
|
|
|
}; |
|
|
|