From e0683e37cdd7dc99adf2af6521962c3f29d0f9b7 Mon Sep 17 00:00:00 2001 From: jihongshun <1151753686@qq.com> Date: 星期二, 08 七月 2025 17:09:34 +0800 Subject: [PATCH] 模板 && 项目页面 --- src/views/system/shootPoint/components/shootPointDialog.vue | 275 +++++++++++++++++++++++++++++++----------------------- 1 files changed, 157 insertions(+), 118 deletions(-) diff --git a/src/views/system/shootPoint/components/shootPointDialog.vue b/src/views/system/shootPoint/components/shootPointDialog.vue index 621e5d8..969c7c3 100644 --- a/src/views/system/shootPoint/components/shootPointDialog.vue +++ b/src/views/system/shootPoint/components/shootPointDialog.vue @@ -12,10 +12,10 @@ <div class="chooseModel"> <el-button type="primary" @click='chooseModel'>閫夋嫨妯″瀷</el-button> <div class="modelType"> - 妯″瀷鍚嶇О锛氭ā鍨嬪1 + 妯″瀷鍚嶇О锛歿{ templateName }} </div> <div> - 妯″瀷绫诲瀷锛氱數濉� + 妯″瀷绫诲瀷锛歿{ templateType }} </div> </div> <div class="modelTree"> @@ -34,60 +34,12 @@ </el-card> </el-col> <el-col :span="20"> - <!-- <el-card class="noScroll"> --> - <InitMap v-if="showMap" @mergePoint="mergePoint"></InitMap> - <!-- </el-card> --> + <InitMap v-if="showMap" @mergePoint="mergePoint" :towerUrl="towerUrl"></InitMap> </el-col> - <!-- <el-col :span="8"> - <div> - <div class="cameraView"> - <a>鐩告満瑙嗚</a> - </div> - <div class="uavView"> - <a>鏃犱汉鏈鸿瑙�</a> - </div> - <div class="operationControl"> - <a>鎿嶆帶鐩稿叧(浣跨敤浠ヤ笅閿帶鍒剁浉鏈鸿瑙�)</a> - <div> - <el-button type="primary">鍦伴潰鐐�</el-button> - <el-button type="primary">绌轰腑鐐�</el-button> - <el-button type="primary">鎮仠鏃堕棿</el-button> - </div> - <div> - <div class="container"> - <div class="keypad"> - <div class="row"> - <div class="key">Q-涓婂崌</div> - <div class="key">W-鍚戝墠</div> - <div class="key">E-涓嬮檷</div> - </div> - <div class="row"> - <div class="key">A- 鍚戝乏</div> - <div class="key">S- 鍚戝悗</div> - <div class="key">D- 鍚戝彸</div> - </div> - </div> - <div class="arrow-pad"> - <div class="arrow-row"> - <div class="arrow empty"></div> - <div class="arrow">鈫� - 鍚戜笂鐪�</div> - <div class="arrow empty"></div> - </div> - <div class="arrow-row"> - <div class="arrow">鈫� - 鍚戝乏杞�</div> - <div class="arrow">鈫� - 鍚戜笅鐪�</div> - <div class="arrow">鈫� - 鍚戝彸杞�</div> - </div> - </div> - </div> - </div> - </div> - </div> - </el-col> --> </el-row> <span slot="footer" class="dialog-footer"> <el-button @click="closeModal">鍙� 娑�</el-button> - <el-button type="primary" @click="dialogVisible = false">纭� 瀹�</el-button> + <el-button type="primary" @click="submit()" >纭� 瀹�</el-button> </span> </el-dialog> <ChooseModelDialog v-if="showModel" @cancel ='cancel' @getRowData="getRowData" ></ChooseModelDialog> @@ -97,7 +49,12 @@ 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 +let globalat =0 +const centerCartesian = Cesium.Cartesian3.fromDegrees(globalon,globalat , 0) +let rotationAngle = Cesium.Math.toRadians(60) +let relativeData export default{ name:'shootPointDialog', components: { @@ -109,28 +66,6 @@ return{ dialogVisible :true, showModel:false, - // treeData: [{ - // id: 1, - // label: '涓�绾� 1', - // children: [{ - // id: 4, - // label: '浜岀骇 1-1', - // }] - // }, { - // id: 2, - // label: '涓�绾� 2', - // children: [{ - // id: 5, - // label: '浜岀骇 2-1' - // }] - // }, { - // id: 3, - // label: '涓�绾� 3', - // children: [{ - // id: 7, - // label: '浜岀骇 3-1' - // }] - // }], treeData:[], defaultProps: { children: 'children', @@ -140,10 +75,49 @@ initialCameraPosition: null, initialCameraOrientation: null, animationFrameId: null, - showMap:false + showMap:false, + towerUrl:null, + chooseModelId:null, + templateName:null, + templateType:null } }, + mounted(){ + }, methods:{ + addPoint(viewer, position, color, label) { + viewer.entities.add({ + name: label, + position, + point: { + pixelSize: 10, + color: color, + heightReference: Cesium.HeightReference.NONE + }, + label: { + text: label, + font: '12px sans-serif', + pixelOffset: new Cesium.Cartesian2(10, -10), + style: Cesium.LabelStyle.FILL, + fillColor: color, + showBackground: true, + } + }); + }, + drawLine(viewer, positions, color, dashed = false) { + viewer.entities.add({ + polyline: { + positions, + width: 2, + material: dashed + ? new Cesium.PolylineDashMaterialProperty({ + color: color, + dashLength: 8, + }) + : color, + } + }); + }, handleClose(){ this.dialogVisible = false }, @@ -156,17 +130,45 @@ cancel(){ this.showModel = false }, + rotateAllPoints(dataList) { + return dataList.map(item => { + console.log(item) + const groundPoint = Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude, item.height); + const towerPoint = Cesium.Cartesian3.fromDegrees(0, 0, 0); + + // 鏃嬭浆鍦伴潰鐐规湰韬紙浼氬彉锛屼絾缁曡嚜韬棆杞笉浼氱Щ鍔級 + const newGroundPoint = this.rotateAroundPoint( groundPoint,towerPoint, rotationAngle); + const newGroundCarto = Cesium.Cartographic.fromCartesian(newGroundPoint); + const newGround = { + ...item, + longitude: Cesium.Math.toDegrees(newGroundCarto.longitude), + latitude: Cesium.Math.toDegrees(newGroundCarto.latitude), + height: newGroundCarto.height + }; + console.log(newGround) + // 澶勭悊瀛愮┖涓偣 + newGround.children = item.children.map(child => { + const airPoint = Cesium.Cartesian3.fromDegrees(child.longitude, child.latitude, child.height); + const rotatedAirPoint = this.rotateAroundPoint( airPoint,towerPoint, rotationAngle); + const rotatedAirCarto = Cesium.Cartographic.fromCartesian(rotatedAirPoint); + + return { + ...child, + longitude: Cesium.Math.toDegrees(rotatedAirCarto.longitude), + latitude: Cesium.Math.toDegrees(rotatedAirCarto.latitude), + height: rotatedAirCarto.height + }; + }); + + return newGround; + }); + }, mergePoint(arr,mergeNumber,viewer){ this.treeData = arr - console.log(mergeNumber) const result = this.replaceCloseChildrenWithHighestPoint(this.treeData,mergeNumber); - console.log(result) - console.log(viewer) - console.log(window.viewer) - const updated = this.insertRaisedPoints(result, 125.1541, 46.5542, 236, 130); + // const updated = this.insertRaisedPoints(result, 0,0, 236, 130); + const updated = this.insertRaisedPoints(result, globalon, globalat, 236, 130); this.treeData = updated - - console.log(updated) const airPoints = [] this.treeData.forEach(item => { const ground = item @@ -179,9 +181,9 @@ ground.longitude, ground.latitude, ground.height, air.longitude, air.latitude, air.height ]), - width: 2, + width: 5, material: new Cesium.PolylineDashMaterialProperty({ - color: Cesium.Color.WHITE, + color: Cesium.Color.RED, dashLength: 16.0 }) } @@ -194,11 +196,12 @@ viewer.entities.add({ polyline: { positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions), - width: 2, - material: Cesium.Color.YELLOW + width: 5, + material: Cesium.Color.RED } }) } + console.log(this.treeData) }, insertRaisedPoints(data, centerLon, centerLat, centerHeight, radius = 130) { const center = Cesium.Cartesian3.fromDegrees(centerLon, centerLat, centerHeight); @@ -346,35 +349,14 @@ }, getRowData(row){ console.log(row) - // //閫夋嫨濂芥ā鍨� 骞朵笖鑷姩椋炲埌妯″瀷浣嶇疆 - // const position = Cesium.Cartesian3.fromDegrees(0, 0, 0); - // // 璁剧疆妯″瀷鏂瑰悜锛堝彲閫夛級 - // // const heading = Cesium.Math.toRadians(135); // 鏈濅笢鍗楁柟鍚� - // let model = viewer.entities.getById("modelList"); - // const heading = Cesium.Math.toRadians(120); // 鏈濅笢鍗楁柟鍚� - // const pitch = 0; - // const roll = 0; - // const orientation = Cesium.Transforms.headingPitchRollQuaternion( - // position, - // new Cesium.HeadingPitchRoll(heading, pitch, roll) - // ); - // if(!model) { - // // 鍔犺浇 glTF 妯″瀷 - // const entity = viewer.entities.add({ - // id: "modelList", - // name: "modelList", - // position: position, - // orientation: orientation, - // model: { - // uri: "/Model/tower.glb", // 鏇挎崲鎴愪綘鐨勬ā鍨嬭矾寰� - // scale: 1000, - // }, - // }); - // viewer.flyTo(entity) - // }else { - // model.orientation = orientation - // } - this.showMap = true + this.templateName = row.modelName + this.templateType = row.modelType + this.chooseModelId = row.id + this.showMap =false + this.$nextTick(()=>{ + this.towerUrl = row.modelRoute + this.showMap = true + }) }, beforeDestroy() { // 娓呯悊 RAF 鍜屼簨浠� @@ -407,8 +389,65 @@ }, handleDrop (draggingNode, dropNode, dropType, ev) { console.log('鎷栨嫿瀹屾垚', { draggingNode, dropNode, dropType }) - // Element-UI 宸茬粡甯綘鎶� treeData 鐨勯『搴忚皟濂戒簡锛� - // 濡傛灉瑕佷繚瀛橀『搴忓埌鍚庣锛岄亶鍘� treeData 鍙戣姹傚嵆鍙� + }, + submit(){ + // 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 + }; + }); + let parmas = { + modelId:this.chooseModelId, + ard3DCoordinateSystemLs:transformed + } + addPoint(parmas).then(res=>{ + console.log(res) + if(res.code == 200) { + this.$message({ + message: '鏂板妯℃澘鎴愬姛', + type: 'success' + }) + this.$emit('on-submit') + this.$emit('close') + } + }) + console.log(parmas) + }, + //聽璁$畻鐐笰缁曠偣B閫嗘椂閽堟棆杞寚瀹氳搴﹀悗鐨勬柊浣嶇疆 + // 绌轰腑鐐规垨鑰呭湴闈㈢偣绗涘崱灏斿潗鏍� 濉旂殑绗涘崱灏斿潗鏍� 濉旂殑鏈濆悜鍊� + rotateAroundPoint(startPoint,pivotPoint,rotationAngle) { + //聽鍒涘缓涓�涓粠B鐐瑰埌鏈湴鍧愭爣绯荤殑杞崲鐭╅樀锛堜笢鏂瑰悜涓篨杞达紝鍖楁柟鍚戜负Y杞达紝鍨傜洿鏂瑰悜涓篫杞达級 + const transformationMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(pivotPoint); + //聽鑾峰彇涓栫晫鍧愭爣绯诲埌鏈湴鍧愭爣绯荤殑杞崲鐭╅樀 + const inverseTransformationMatrix = Cesium.Matrix4.inverse(transformationMatrix,new Cesium.Matrix4()); + //聽灏咥鐐硅浆鎹㈠埌灞�閮ㄥ潗鏍囩郴涓� + const localStartPoint = Cesium.Matrix4.multiplyByPoint(inverseTransformationMatrix, startPoint,new Cesium.Cartesian3()); + //聽璁$畻A鐐瑰湪灞�閮ㄥ潗鏍囩郴涓�嗘椂閽堟棆杞寚瀹氳搴﹀悗鐨勬柊浣嶇疆 + const rotatedX = localStartPoint.x * Math.cos(rotationAngle) + localStartPoint.y * Math.sin(rotationAngle); + const rotatedY = localStartPoint.y * Math.cos(rotationAngle) - localStartPoint.x * Math.sin(rotationAngle); + const rotatedZ = localStartPoint.z; //聽Z杞村潗鏍囦繚鎸佷笉鍙� + //聽灏嗘棆杞悗鐨勫眬閮ㄥ潗鏍囪浆鎹㈠洖涓栫晫鍧愭爣绯� + return Cesium.Matrix4.multiplyByPoint(transformationMatrix,聽new聽Cesium.Cartesian3(rotatedX,聽rotatedY,聽rotatedZ),聽new聽Cesium.Cartesian3()); } } } -- Gitblit v1.9.3