| | |
| | | <div class="chooseModel"> |
| | | <el-button type="primary" @click='chooseModel'>选择模型</el-button> |
| | | <div class="modelType"> |
| | | 模型名称:{{ templateName }} |
| | | 模型名称:{{ modelName }} |
| | | </div> |
| | | <div> |
| | | 模型类型:{{ templateType }} |
| | | </div> |
| | | <el-form label-width="70px" :model="form"> |
| | | <el-form-item label="模板名称"> |
| | | <el-input v-model="form.templateName"></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <div class="modelTree"> |
| | | <div class='modelTreeTitle'>巡检点目录</div> |
| | |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import { compileToFunctions } from "vue-template-compiler"; |
| | | import CesiumMap from "../../../../utils/components/cesium-map.vue"; |
| | | import InitMap from "../../../../utils/components/init-map.vue"; |
| | | import ChooseModelDialog from './chooseModelDialog.vue'; |
| | | import { addPoint} from "@/api/system/template" |
| | | let globalon = 0 |
| | | import { addPoint , getPointInfo} from "@/api/system/template" |
| | | let globalon = 0 |
| | | let globalat = 0 |
| | | const centerCartesian = Cesium.Cartesian3.fromDegrees(globalon,globalat , 0) |
| | | let rotationAngle = Cesium.Math.toRadians(60) |
| | | let relativeData |
| | | let towerHeight = 47.47 |
| | | //塔的朝向算法所用到的 旋转度数 |
| | | let rotationAngle = Cesium.Math.toRadians(0) |
| | | export default{ |
| | | name:'shootPointDialog', |
| | | components: { |
| | | CesiumMap, |
| | | ChooseModelDialog, |
| | | InitMap |
| | | }, |
| | | props: { |
| | | templateId: { |
| | | type: String, |
| | | defaule: null |
| | | } |
| | | }, |
| | | data(){ |
| | | return{ |
| | |
| | | showMap:false, |
| | | towerUrl:null, |
| | | chooseModelId:null, |
| | | templateName:null, |
| | | templateType:null |
| | | modelName:null, |
| | | templateType:null, |
| | | form:{} |
| | | } |
| | | }, |
| | | mounted(){ |
| | | console.log(this.templateId) |
| | | if(this.templateId) { |
| | | //预览逻辑 |
| | | getPointInfo(this.templateId).then(res=>{ |
| | | if(res.code == 200 ) { |
| | | console.log(res.data) |
| | | this.getRowData(res.data) |
| | | let drawArr = this.convertToTree(res.data.ardListWayPointsLS) |
| | | setTimeout(() => { |
| | | //渲染时间问题 加个延时器 |
| | | this.drawLines(drawArr) |
| | | }, 500); |
| | | } |
| | | }) |
| | | } |
| | | }, |
| | | methods:{ |
| | | convertToTree(data) { |
| | | return data.map((item, index) => { |
| | | const parentId = 'air_' + index; |
| | | return { |
| | | id: parentId, |
| | | label: item.targetName, |
| | | longitude: item.longitude, |
| | | latitude: item.latitude, |
| | | height: item.altitude, |
| | | children: (item.ardGroundPoint || []).map((g, i) => { |
| | | return { |
| | | id: parentId + '_ground_' + i, |
| | | label: g.targetName, |
| | | longitude: g.longitude, |
| | | latitude: g.latitude, |
| | | height: g.height |
| | | } |
| | | }) |
| | | } |
| | | }); |
| | | }, |
| | | drawLines(treeData) { |
| | | console.log(treeData) |
| | | console.log(window) |
| | | console.log(window.viewerM) |
| | | let viewer = window.viewerM |
| | | |
| | | // 收集空中点位置 |
| | | const airPositions = treeData.map(point => { |
| | | return Cesium.Cartesian3.fromDegrees( |
| | | point.longitude, |
| | | point.latitude, |
| | | point.height |
| | | ); |
| | | }); |
| | | |
| | | // 1. 空中点之间用黄色实线连接 |
| | | viewer.entities.add({ |
| | | polyline: { |
| | | positions: airPositions, |
| | | width: 2, |
| | | material: Cesium.Color.YELLOW |
| | | } |
| | | }); |
| | | |
| | | // 2. 每个空中点与地面点用蓝色虚线连接 |
| | | treeData.forEach(point => { |
| | | const airPos = Cesium.Cartesian3.fromDegrees(point.longitude, point.latitude, point.height); |
| | | point.children.forEach(child => { |
| | | const groundPos = Cesium.Cartesian3.fromDegrees(child.longitude, child.latitude, child.height); |
| | | viewer.entities.add({ |
| | | polyline: { |
| | | positions: [airPos, groundPos], |
| | | width: 1, |
| | | material: new Cesium.PolylineDashMaterialProperty({ |
| | | color: Cesium.Color.BLUE, |
| | | dashLength: 8 |
| | | }) |
| | | } |
| | | }); |
| | | }); |
| | | }); |
| | | }, |
| | | addPoint(viewer, position, color, label) { |
| | | viewer.entities.add({ |
| | | name: label, |
| | |
| | | return newGround; |
| | | }); |
| | | }, |
| | | //合并逻辑 将附近n米范围内的点合并 并且处理成数据 |
| | | mergePoint(arr,mergeNumber,viewer){ |
| | | this.treeData = arr |
| | | const result = this.replaceCloseChildrenWithHighestPoint(this.treeData,mergeNumber); |
| | | // const updated = this.insertRaisedPoints(result, 0,0, 236, 130); |
| | | const updated = this.insertRaisedPoints(result, globalon, globalat, 236, 130); |
| | | const updated = this.insertRaisedPoints(result, globalon, globalat, towerHeight); |
| | | this.treeData = updated |
| | | const airPoints = [] |
| | | this.treeData.forEach(item => { |
| | |
| | | console.log(this.treeData) |
| | | }, |
| | | //数组 塔的精度 塔的纬度 塔的高度 半径 |
| | | insertRaisedPoints(data, centerLon, centerLat, centerHeight, radius = 130) { |
| | | insertRaisedPoints(data, centerLon, centerLat, centerHeight, radius = 10) { |
| | | const center = Cesium.Cartesian3.fromDegrees(centerLon, centerLat, centerHeight); |
| | | const result = JSON.parse(JSON.stringify(data)); // 深拷贝避免污染原数据 |
| | | const inserts = []; // 用于存储插入项及其目标位置 |
| | |
| | | }, |
| | | getRowData(row){ |
| | | console.log(row) |
| | | this.templateName = row.modelName |
| | | this.modelName = row.modelName |
| | | this.templateType = row.modelType |
| | | if(this.templateId){ |
| | | this.form.templateName = row.templateName || '' |
| | | } |
| | | this.chooseModelId = row.id |
| | | towerHeight = row.towerHeight || 47.47 |
| | | this.showMap =false |
| | | this.$nextTick(()=>{ |
| | | this.towerUrl = row.modelRoute |
| | | // this.towerUrl = row.modelRoute |
| | | |
| | | if(this.templateId){ |
| | | this.towerUrl = row.ardTowerModel.modelRoute |
| | | }else { |
| | | this.towerUrl = row.modelRoute |
| | | } |
| | | this.showMap = true |
| | | }) |
| | | }, |
| | |
| | | console.log('拖拽完成', { draggingNode, dropNode, dropType }) |
| | | }, |
| | | submit(){ |
| | | if(!this.form.templateName){ |
| | | return this.$message({ |
| | | message: '请先输入模板名称再保存', |
| | | type: 'warning' |
| | | }) |
| | | } |
| | | // this.dialogVisible = false |
| | | // const dealArr = this.submitDealData() |
| | | const transformed = this.treeData.map((groundPoint, index) => { |
| | | const pointNumber = index + 1; |
| | | const airPoints = groundPoint.children.map(child => ({ |
| | | altitude: child.height, |
| | | flightTemplateId: "", |
| | | latitude: child.latitude, |
| | | longitude: child.longitude, |
| | | pointNumber: 1, // 可根据需要改为 child 编号 |
| | | targetName:child.label |
| | | })); |
| | | return { |
| | | ardAirPointLs: airPoints, |
| | | ardGroundPoint: { |
| | | flightTemplateId: "", |
| | | height: groundPoint.height, |
| | | latitude: groundPoint.latitude, |
| | | longitude: groundPoint.longitude, |
| | | pointNumber: 1, |
| | | targetName: groundPoint.label |
| | | }, |
| | | pointNumber: pointNumber |
| | | }; |
| | | }); |
| | | const transformed = this.treeData.map((ground, index) => { |
| | | const pointNumber = index + 1; |
| | | const child = ground.children?.[0] || {}; |
| | | |
| | | return { |
| | | altitude: child.height, |
| | | ardGroundPoint: [ |
| | | { |
| | | height: ground.height, |
| | | latitude: ground.latitude, |
| | | longitude: ground.longitude, |
| | | pointNumber: 1, |
| | | targetName: ground.label |
| | | } |
| | | ], |
| | | latitude: child.latitude, |
| | | longitude: child.longitude, |
| | | pointNumber: pointNumber, |
| | | targetName: child.label |
| | | }; |
| | | }) |
| | | console.log(transformed) |
| | | let parmas = { |
| | | templateName:this.form.templateName, |
| | | modelId:this.chooseModelId, |
| | | ard3DCoordinateSystemLs:transformed |
| | | ardListWayPointsLS:transformed |
| | | } |
| | | addPoint(parmas).then(res=>{ |
| | | console.log(res) |
| | |
| | | text-align: center; |
| | | } |
| | | .chooseModel{ |
| | | height: 100px; |
| | | height: 120px; |
| | | /* border: 1px solid #dddddd; */ |
| | | } |
| | | .cameraView{ |