| | |
| | | </a-tooltip> |
| | | <contextMenu :menu="[{ title: '删除航点', value: { index, item } }]"> |
| | | <div class="graph-right"> |
| | | <div v-for="(event, index) in item.eventList" :key="index" class="s-event-icon"> |
| | | <div |
| | | v-for="(event, eIndex) in item.eventList" |
| | | :key="eIndex" |
| | | :class="[ |
| | | 's-event-icon', |
| | | selectedPointAndAction.selectedPoint === index && |
| | | selectedPointAndAction.selectedAction === event?.key && |
| | | 'active-event', |
| | | ]" |
| | | @click="selectionEvent(event, index)"> |
| | | <a-tooltip placement="top"> |
| | | <template #title> |
| | | {{ event.name }} |
| | | {{ event?.name }} |
| | | </template> |
| | | <img :src="event.icon" alt="icon" /> |
| | | <img :src="event?.icon" alt="icon" /> |
| | | </a-tooltip> |
| | | </div> |
| | | </div> |
| | | </contextMenu> |
| | | </li> |
| | | </ul> |
| | | <startPointTips v-if="xmlTemplate.missionConfig?.takeOffRefPoint['#text'] === ''" /> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import { useMyStore } from '/@/store' |
| | | import useMapDraw, { kmlEntities as globalEntities, selectPointIndex as pointIdx } from '/@/utils/cesium/use-map-draw' |
| | | import contextMenu from './components/content-menu.vue' |
| | | import startPointTips from './components/setting-point-tip.vue' |
| | | const store = useMyStore() |
| | | const { appContext }: any = getCurrentInstance() |
| | | const global = appContext.config.globalProperties |
| | |
| | | deep: true, |
| | | }, |
| | | ) |
| | | |
| | | store.commit('SET_WAYLINE_INFO', { |
| | | isShow: true, |
| | | }) |
| | | kmlEntities.value = entities.value |
| | | if (!mouseRightClickEvent) { |
| | | // 添加右键事件 |
| | |
| | | // 新建航线初始化 |
| | | const initCreateRoute = () => { |
| | | mapDraw = useMapDraw('', [], '', global) |
| | | const xml = kmzUtils.generateXML(xmlTemplate.value) |
| | | mapDraw.drawWayline([], xml) |
| | | const { drawWayline, waylineDetails: details, waylinePointsEvent, kmlEntities: entities, clearWaylineData } = mapDraw |
| | | clearWaylineData() |
| | | drawWayline() |
| | | waylineDetails.value = details |
| | | tragetPointArr.value = waylinePointsEvent.value |
| | | watch( |
| | | () => waylinePointsEvent.value, |
| | | (val) => { |
| | | tragetPointArr.value = val |
| | | }, |
| | | { |
| | | deep: true, |
| | | }, |
| | | ) |
| | | kmlEntities.value = entities.value |
| | | // const xml = kmzUtils.generateXML(xmlTemplate.value) |
| | | // mapDraw.drawWayline([], xml) |
| | | if (!mouseRightClickEvent) { |
| | | // 添加右键事件 |
| | | addMapPointEvent() |
| | | } |
| | | } |
| | | |
| | | // 创建广告牌 |
| | |
| | | const selectPointIndex = ref<string | number | any>(null) |
| | | const pointSelect = (value: tragetPoint, index: number) => { |
| | | removeCesiumChildDom(popupDom) |
| | | if (selectPointIndex.value === index) { |
| | | global.$viewer.entities.remove(prevPointEntity) |
| | | global.$viewer.entities.remove(nextPointEntity) |
| | | kmlEntities.value.forEach((entity: Cesium.Entity | any, i: number) => { |
| | | entity.billboard.image = createBillboard(i + 1, '#61d396') |
| | | entity.label.show = false |
| | | }) |
| | | selectPointIndex.value = null |
| | | pointIdx.value = null |
| | | return |
| | | } |
| | | // if (selectPointIndex.value === index) { |
| | | // global.$viewer.entities.remove(prevPointEntity) |
| | | // global.$viewer.entities.remove(nextPointEntity) |
| | | // kmlEntities.value.forEach((entity: Cesium.Entity | any, i: number) => { |
| | | // entity.billboard.image = createBillboard(i + 1, '#61d396') |
| | | // entity.label.show = false |
| | | // }) |
| | | // selectPointIndex.value = null |
| | | // pointIdx.value = null |
| | | // store.commit('SET_WAYLINE_INFO', {}) |
| | | // return |
| | | // } |
| | | if (prevPointEntity) { |
| | | global.$viewer.entities.remove(prevPointEntity) |
| | | } |
| | |
| | | entity.label.show = false |
| | | } |
| | | }) |
| | | // 默认选中第一个事件 |
| | | // if (selectPointIndex.value !== index) { |
| | | // store.commit('SET_WAYLINE_INFO', { |
| | | // selectedPoint: index, |
| | | // // 默认选中第一个 |
| | | // selectedAction: value.eventList[0], |
| | | // }) |
| | | // selectionEvent(value.eventList[0], index) |
| | | // } |
| | | selectPointIndex.value = index |
| | | pointIdx.value = index |
| | | } |
| | |
| | | removeCesiumChildDom(popupDom) |
| | | const { position } = click |
| | | const { x, y } = position |
| | | const createTakeOffPointEvent = [{ class: 'start-point', title: '设置参考起飞点' }] |
| | | const pointEvents = [ |
| | | { |
| | | class: 'add-prev-point', |
| | |
| | | }, |
| | | ] |
| | | const defaultEvents = [{ class: 'finally-point', title: '在最后航点新增航点' }] |
| | | const events = selectPointIndex.value !== null ? [...defaultEvents, ...pointEvents] : defaultEvents |
| | | let events = [] |
| | | if (xmlTemplate.value.missionConfig?.takeOffRefPoint['#text'] === '') { |
| | | events = createTakeOffPointEvent |
| | | } else { |
| | | events = selectPointIndex.value !== null ? [...defaultEvents, ...pointEvents] : defaultEvents |
| | | } |
| | | popupDom = createPointPopupDom(events) |
| | | global.$viewer.container.appendChild(popupDom) |
| | | popupDom.style.transform = `translate3d(${x}px, ${y}px, 0)` |
| | |
| | | }, |
| | | isRisky: { '#text': 0 }, |
| | | } |
| | | // 添加参考点 |
| | | if (className === 'start-point') { |
| | | // 默认高度为6 |
| | | const height = 6 |
| | | const takeOffPoint = [latitude, longitude, height] |
| | | xmlTemplate.value.missionConfig.takeOffRefPoint['#text'] = takeOffPoint.join(',') |
| | | } |
| | | // 添加航点 |
| | | if (className === 'finally-point') { |
| | | globalEntities.value.push(entity) |
| | | xmlTemplate.value.Folder.Placemark.push(setting) |
| | |
| | | }, |
| | | ) |
| | | |
| | | // 选中事件 |
| | | const selectedPointAndAction = reactive<{ |
| | | selectedPoint: number | null |
| | | selectedAction: any | null |
| | | }>({ |
| | | selectedPoint: null, |
| | | selectedAction: null, |
| | | }) |
| | | const selectionEvent = (action: any, index: number) => { |
| | | const params = { |
| | | selectedPoint: index, |
| | | selectedAction: action, |
| | | } |
| | | selectedPointAndAction.selectedPoint = index |
| | | selectedPointAndAction.selectedAction = action.key |
| | | store.commit('SET_WAYLINE_INFO', params) |
| | | } |
| | | |
| | | onMounted(() => { |
| | | // 清空画布 |
| | | clearCesiumMap() |
| | | console.log(!!filePath.value) |
| | | if (filePath.value) { |
| | | initDrawRoute() |
| | | } else { |
| | |
| | | clearCesiumMap() |
| | | store.commit('SET_WAYLINE_INFO', { |
| | | isShow: false, |
| | | wayline: {}, |
| | | position: null, |
| | | }) |
| | | }) |
| | | </script> |
| | |
| | | align-items: center; |
| | | |
| | | .s-event-icon { |
| | | width: 25px; |
| | | height: 25px; |
| | | width: 20px; |
| | | height: 20px; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | border-radius: 2px; |
| | | margin-right: 3px; |
| | | overflow: hidden; |
| | | |
| | | &:hover { |
| | | background-color: #409eff; |
| | | } |
| | | |
| | | img { |
| | | width: 70%; |
| | | } |
| | | } |
| | | |
| | | .active-event { |
| | | background-color: #409eff; |
| | | } |
| | | } |
| | | |
| | | &:hover { |