|
@ -3,7 +3,7 @@ |
|
|
<span class="map-search-icon"> |
|
|
<span class="map-search-icon"> |
|
|
<iconpark-icon name="search" size="16" fill="#fff"></iconpark-icon> |
|
|
<iconpark-icon name="search" size="16" fill="#fff"></iconpark-icon> |
|
|
</span> |
|
|
</span> |
|
|
<div v-click-outside="onClickOutside"> |
|
|
|
|
|
<el-popover |
|
|
<el-popover |
|
|
placement="bottom" |
|
|
placement="bottom" |
|
|
:width="280" |
|
|
:width="280" |
|
@ -57,14 +57,12 @@ |
|
|
</template> |
|
|
</template> |
|
|
</el-popover> |
|
|
</el-popover> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
<script setup lang="ts"> |
|
|
import { ref, computed } from "vue"; |
|
|
import { ref, computed } from "vue"; |
|
|
import { getReservoirList } from "@/api/map"; |
|
|
import { getReservoirList } from "@/api/map"; |
|
|
import { useProjectStore } from "@/store/modules/project"; |
|
|
import { useProjectStore } from "@/store/modules/project"; |
|
|
import { ClickOutside as vClickOutside } from "element-plus"; |
|
|
|
|
|
import * as SyCim from "sy-cesium-sdk"; |
|
|
import * as SyCim from "sy-cesium-sdk"; |
|
|
defineOptions({ |
|
|
defineOptions({ |
|
|
name: "MapSearch", |
|
|
name: "MapSearch", |
|
@ -72,12 +70,24 @@ defineOptions({ |
|
|
const Cesium = SyCim.Cesium; |
|
|
const Cesium = SyCim.Cesium; |
|
|
const projectStore = useProjectStore(); |
|
|
const projectStore = useProjectStore(); |
|
|
const popoverVisible = ref(false); |
|
|
const popoverVisible = ref(false); |
|
|
|
|
|
const hidePopover = (e: any) => { |
|
|
|
|
|
if (e?.target?.className?.includes("map-search-result-title")) { |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
popoverVisible.value = false; |
|
|
|
|
|
}; |
|
|
|
|
|
const addEventListener = () => { |
|
|
|
|
|
removeEventListener(); |
|
|
|
|
|
document.addEventListener("click", hidePopover, false); |
|
|
|
|
|
}; |
|
|
|
|
|
const removeEventListener = () => { |
|
|
|
|
|
document.removeEventListener("click", hidePopover); |
|
|
|
|
|
}; |
|
|
const showPopover = () => { |
|
|
const showPopover = () => { |
|
|
popoverVisible.value = true; |
|
|
popoverVisible.value = true; |
|
|
|
|
|
addEventListener(); |
|
|
}; |
|
|
}; |
|
|
const onClickOutside = () => { |
|
|
|
|
|
popoverVisible.value = false; |
|
|
|
|
|
}; |
|
|
|
|
|
const searchValue = ref(""); |
|
|
const searchValue = ref(""); |
|
|
const searchResultList = ref<any[]>([]); |
|
|
const searchResultList = ref<any[]>([]); |
|
|
const layerData = computed(() => |
|
|
const layerData = computed(() => |
|
@ -97,6 +107,7 @@ const changeInputValue = async (value: string) => { |
|
|
const flyTo = (item: any) => { |
|
|
const flyTo = (item: any) => { |
|
|
const coordinates = item?.geometry?.coordinates; |
|
|
const coordinates = item?.geometry?.coordinates; |
|
|
if (!coordinates) return; |
|
|
if (!coordinates) return; |
|
|
|
|
|
popoverVisible.value = false; |
|
|
const center = SyCim.Parse.parsePosition( |
|
|
const center = SyCim.Parse.parsePosition( |
|
|
`${coordinates[0]},${coordinates[1]},10` |
|
|
`${coordinates[0]},${coordinates[1]},10` |
|
|
).toCartesian3(); |
|
|
).toCartesian3(); |
|
|