| | |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import _ from 'lodash' |
| | | import _, { template } from 'lodash' |
| | | import * as Cesium from 'cesium' |
| | | import setting from './components/setting.vue' |
| | | import useKmzTsa, { kmlStr } from '/@/utils/cesium/use-kmz-tsa' |
| | | import useKmzTsa, { kmlStr, template as xmlTemplate } from '/@/utils/cesium/use-kmz-tsa' |
| | | import { ref, reactive, defineEmits, defineProps, watch, onMounted } from 'vue' |
| | | import { ArrowLeftOutlined, CaretDownOutlined, SaveOutlined } from '@ant-design/icons-vue' |
| | | import { cesiumOperation } from '/@/hooks/use-cesium-tsa' |
| | | import { useMyStore } from '/@/store' |
| | | import ImageTrailMaterial from '/@/utils/cesium/ImageTrailMaterial' |
| | | import useMapDraw, { kmlEntities as globalEntities } from '/@/utils/cesium/use-map-draw' |
| | | import useMapDraw, { kmlEntities as globalEntities, selectPointIndex as pointIdx } from '/@/utils/cesium/use-map-draw' |
| | | import { getKmlParams } from '/@/utils/cesium/kmz' |
| | | import { getHaeHeight } from '/@/utils/cesium/mapUtils' |
| | | const store = useMyStore() |
| | |
| | | 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 (prevPointEntity) { |
| | |
| | | kmlEntities.value.forEach((entity: Cesium.Entity | any, i: number) => { |
| | | if (i === index) { |
| | | entity.billboard.image = createBillboard(index + 1, '#f3be4f') |
| | | entity.label.show = true |
| | | } else { |
| | | entity.billboard.image = createBillboard(i + 1, '#61d396') |
| | | entity.label.show = false |
| | | } |
| | | }) |
| | | selectPointIndex.value = index |
| | | pointIdx.value = index |
| | | } |
| | | |
| | | // 添加右键事件,弹出窗口 |
| | |
| | | const longitude = Cesium.Math.toDegrees(c2Postion.longitude) |
| | | const latitude = Cesium.Math.toDegrees(c2Postion.latitude) |
| | | // 获取全局高度 |
| | | const globalHeight: any = getKmlParams(kmlStr.value, true, { |
| | | name: 'globalHeight', |
| | | findRegx: '([\\s\\S]*?)', |
| | | }) |
| | | const height = Number(globalHeight[1]) |
| | | const globalHeight: string = xmlTemplate.value.Folder.globalHeight['#text'] |
| | | const height = Number(globalHeight) |
| | | // 右键点击的位置 |
| | | const createPointPosition = Cesium.Cartesian3.fromDegrees(longitude, latitude, height) |
| | | const entity: Cesium.Entity = global.$viewer.entities.add({ |
| | | position: createPointPosition, |
| | | }) |
| | | const posterHeightRegStr = getKmlParams(kmlStr.value, true, { |
| | | name: 'takeOffRefPointAGLHeight', |
| | | findRegx: '([\\s\\S]*?)', |
| | | }) || ['', 0] |
| | | const posterHeight = Number(posterHeightRegStr[1]) |
| | | // 加入kml文件中 |
| | | // 起飞点海拔 |
| | | const takeOffRefPointAGLHeight = xmlTemplate.value.missionConfig.takeOffRefPointAGLHeight |
| | | const posterHeight = Number(takeOffRefPointAGLHeight['#text']) |
| | | // 当前点位个数 |
| | | const points = xmlTemplate.value.Folder.Placemark |
| | | // 加入到解析的JSON对象中 |
| | | const setting = { |
| | | Point: { |
| | | coordinates: `${longitude},${latitude}`, |
| | | coordinates: { '#text': `${longitude.toFixed(6)},${latitude.toFixed(6)}` }, |
| | | }, |
| | | index: tragetPointArr.value.length, |
| | | height, |
| | | ellipsoidHeight: height - posterHeight, |
| | | index: { '#text': points.length }, |
| | | height: { '#text': height }, |
| | | ellipsoidHeight: { '#text': height - posterHeight }, |
| | | isRisky: { '#text': 0 }, |
| | | useGlobalHeadingParam: { '#text': 1 }, |
| | | useGlobalHeight: { '#text': 1 }, |
| | | useGlobalSpeed: { '#text': 1 }, |
| | | useGlobalTurnParam: { '#text': 1 }, |
| | | useStraightLine: { '#text': 1 }, |
| | | waypointHeadingParam: { |
| | | waypointHeadingAngle: { '#text': 0 }, |
| | | waypointHeadingMode: { '#text': 'followWayline' }, |
| | | waypointHeadingPathMode: { '#text': 'followBadArc' }, |
| | | waypointHeadingPoiIndex: { '#text': 0 }, |
| | | waypointPoiPoint: { '#text': '0.000000,0.000000,0.000000' }, |
| | | }, |
| | | waypointSpeed: { '#text': 10 }, |
| | | waypointTurnParam: { |
| | | waypointTurnDampingDist: { '#text': 0.2 }, |
| | | waypointTurnMode: { '#text': 'toPointAndStopWithDiscontinuityCurvature' }, |
| | | }, |
| | | } |
| | | removeAllDataSource() |
| | | removeAllPoint() |
| | | if (className === 'finally-point') { |
| | | kmzUtils.writePoint(setting, 'add') |
| | | globalEntities.value.push(entity) |
| | | xmlTemplate.value.Folder.Placemark.push(setting) |
| | | tragetPointArr.value.push({ |
| | | position: createPointPosition, |
| | | eventList: [], |
| | | isUseGlobalHeight: Boolean(setting.useGlobalHeight['#text']), |
| | | }) |
| | | } |
| | | if (className === 'add-prev-point') { |
| | | kmzUtils.writePoint(setting, 'prev', selectPointIndex.value) |
| | | globalEntities.value.splice(selectPointIndex.value, 0, entity) |
| | | xmlTemplate.value.Folder.Placemark.splice(selectPointIndex.value, 0, setting) |
| | | tragetPointArr.value.splice(selectPointIndex.value, 0, { |
| | | position: createPointPosition, |
| | | eventList: [], |
| | | isUseGlobalHeight: Boolean(setting.useGlobalHeight['#text']), |
| | | }) |
| | | } |
| | | if (className === 'add-next-point') { |
| | | kmzUtils.writePoint(setting, 'next', selectPointIndex.value) |
| | | const index = _.cloneDeep(selectPointIndex.value + 1) |
| | | globalEntities.value.splice(index, 0, entity) |
| | | xmlTemplate.value.Folder.Placemark.splice(index, 0, setting) |
| | | tragetPointArr.value.splice(index, 0, { |
| | | position: createPointPosition, |
| | | eventList: [], |
| | | isUseGlobalHeight: Boolean(setting.useGlobalHeight['#text']), |
| | | }) |
| | | } |
| | | mapDraw.drawWayline(globalEntities.value, kmlStr.value) |
| | | // clearCesiumMap() |
| | | // createMapMarker(undefined, [...kmlEntities.value, entity]) |
| | | // 更新点位序号 |
| | | xmlTemplate.value.Folder.Placemark.forEach((placemark: { index: { [x: string]: number } }, index: number) => { |
| | | placemark.index['#text'] = index |
| | | }) |
| | | |
| | | const xmlStr = kmzUtils.generateXML(xmlTemplate.value) |
| | | mapDraw.drawWayline(globalEntities.value, xmlStr) |
| | | }) |
| | | } |
| | | |