<template>
|
<div class="container" ref="containerRef">
|
<slot></slot>
|
<!-- <Teleport to="body"> -->
|
<div class="context-menu" ref="menuRef" v-show="showMenu">
|
<div class="context-menu__item" v-for="(item, index) in props.menu" :key="index" @click="delPointOrEvent(item)">
|
{{ item.title }}
|
</div>
|
</div>
|
<!-- </Teleport> -->
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { ref, nextTick, onMounted, onUnmounted, defineProps } from 'vue'
|
import useKmzTsa, { template as xmlTemplate } from '/@/utils/cesium/use-kmz-tsa'
|
import useMapDraw, { kmlEntities as globalEntities, waylinePointsEvent } from '/@/utils/cesium/use-map-draw'
|
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
|
const { removeAllDataSource, removeAllPoint } = cesiumOperation()
|
const { appContext }: any = getCurrentInstance()
|
const global = appContext.config.globalProperties
|
|
const mapDraw = useMapDraw('', '', '', global)
|
const { generateXML } = useKmzTsa()
|
|
const props = defineProps<{
|
menu: { title: string; value: { index: number; item: any } }[]
|
}>()
|
|
const showMenu = ref<boolean>(false)
|
const containerRef = ref<HTMLDivElement | null>(null)
|
const menuRef = ref<HTMLDivElement | any>(null)
|
|
// 右键菜单
|
const handleContextMenu = (event: MouseEvent) => {
|
event.preventDefault()
|
event.stopPropagation()
|
showMenu.value = true
|
const { x, y } = event
|
nextTick(() => {
|
const menuWidth = menuRef.value.offsetWidth
|
menuRef.value.style.transform = `translate(${x - menuWidth - 15}px, ${y}px)`
|
})
|
}
|
|
// 删除点位
|
const delPointOrEvent = (menuItem: { value: { index: number } }) => {
|
const points = xmlTemplate.value.Folder.Placemark
|
const delIndex = menuItem.value.index
|
points.splice(delIndex, 1)
|
points.forEach((point: { index: { '#text': string | number } }, index: number) => {
|
point.index['#text'] = index
|
})
|
waylinePointsEvent.value.splice(delIndex, 1)
|
globalEntities.value.splice(delIndex, 1)
|
const xmlStr = generateXML(xmlTemplate.value)
|
mapDraw.drawWayline(globalEntities.value, xmlStr)
|
}
|
|
// 关闭菜单
|
const closeMenu = () => {
|
showMenu.value = false
|
}
|
|
// 添加时间
|
const addMenuEvent = () => {
|
containerRef.value?.addEventListener('contextmenu', handleContextMenu)
|
window.addEventListener('click', closeMenu, true)
|
window.addEventListener('contextmenu', closeMenu, true)
|
}
|
|
// 移除事件
|
const delMenuEvent = () => {
|
containerRef.value?.removeEventListener('contextmenu', handleContextMenu)
|
window.removeEventListener('click', closeMenu, true)
|
window.removeEventListener('contextmenu', closeMenu, true)
|
}
|
|
onMounted(() => {
|
addMenuEvent()
|
})
|
|
onUnmounted(() => {
|
delMenuEvent()
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.container {
|
width: 100%;
|
}
|
:deep() {
|
.context-menu {
|
width: fit-content;
|
position: fixed;
|
top: 0;
|
background-color: #595959;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
z-index: 999;
|
&__item {
|
cursor: pointer;
|
padding: 5px 10px;
|
transition: all 0.2s ease-in-out;
|
&:hover {
|
background-color: rgb(57, 57, 57);
|
}
|
}
|
}
|
}
|
</style>
|
