From bcb67f336c2b352177884b8db6decc3fcf382bb0 Mon Sep 17 00:00:00 2001 From: jihongshun <1151753686@qq.com> Date: 星期四, 11 九月 2025 16:58:13 +0800 Subject: [PATCH] 航线模拟 差视锥体的head值和时间轴 --- src/views/system/shootPoint/components/shootPointDialog.vue | 217 +++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 180 insertions(+), 37 deletions(-) diff --git a/src/views/system/shootPoint/components/shootPointDialog.vue b/src/views/system/shootPoint/components/shootPointDialog.vue index d619ffe..320bf53 100644 --- a/src/views/system/shootPoint/components/shootPointDialog.vue +++ b/src/views/system/shootPoint/components/shootPointDialog.vue @@ -10,7 +10,7 @@ <el-col :span="4"> <el-card class="noScroll"> <div class="chooseModel"> - <el-button type="primary" @click='chooseModel'>閫夋嫨妯″瀷</el-button> + <el-button type="primary" @click='chooseModel'>妯″瀷</el-button> <div class="modelType"> 妯″瀷鍚嶇О锛歿{ modelName }} </div> @@ -45,7 +45,7 @@ <!-- 鑸偣鍒楄〃 --> <div class="waypoints"> <div - v-for="(wp, index) in waypoints" + v-for="(wp, index) in treeData" :key="index" class="waypoint-item" :class="{ active: selectedIndex === index }" @@ -55,18 +55,22 @@ <i class="el-icon-success" ></i> + <i + class="el-icon-delete" + @click.stop="deleteItem(wp)" + ></i> <div class="waypoint-contnet"> - <span class="waypoint-index">{{ wp.label }}</span> - <span v-for="(action, aIndex) in wp.actions" + <span class="waypoint-index">{{ wp.label +'----' +wp.children[0].label }}</span> + <span v-for="(action, aIndex) in wp.children[0].actions" :key="action.id" class="action-icon" - @click="clickItem(action)"> + @click.stop="clickItem(action)"> - <img src="@/assets/images/xuanting.svg" alt="svg鍥剧墖" v-if="action.type==='鎮仠'" /> - <img src="@/assets/images/photo.svg" alt="svg鍥剧墖" v-if="action.type==='鎷嶇収'" /> - <img src="@/assets/images/startVideo.svg" alt="svg鍥剧墖" v-if="action.type==='寮�濮嬪綍鍍�'" /> - <img src="@/assets/images/stopVideo.svg" alt="svg鍥剧墖" v-if="action.type==='缁撴潫褰曞儚'" /> - <img src="@/assets/images/zoom.svg" alt="svg鍥剧墖" v-if="action.type==='鍙樼劍'" /> + <img src="@/assets/images/xuanting.svg" alt="svg鍥剧墖" v-if="action.type==='鎮仠'" title="鎮仠"/> + <img src="@/assets/images/photo.svg" alt="svg鍥剧墖" v-if="action.type==='鎷嶇収'" title="鎷嶇収"/> + <img src="@/assets/images/startVideo.svg" alt="svg鍥剧墖" v-if="action.type==='寮�濮嬪綍鍍�'" title="寮�濮嬪綍鍍�"/> + <img src="@/assets/images/stopVideo.svg" alt="svg鍥剧墖" v-if="action.type==='缁撴潫褰曞儚'" title="缁撴潫褰曞儚"/> + <img src="@/assets/images/zoom.svg" alt="svg鍥剧墖" v-if="action.type==='鍙樼劍'" title="鍙樼劍"/> <!-- <i v-if="action.type==='鎷嶇収'" class="el-icon-video-camera"></i> --> </span> </div> @@ -93,7 +97,6 @@ </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'; @@ -103,6 +106,14 @@ let towerHeight = 45 //濉旂殑鏈濆悜绠楁硶鎵�鐢ㄥ埌鐨� 鏃嬭浆搴︽暟 let rotationAngle = Cesium.Math.toRadians(0) +const typeDictionary = { + "鎷嶇収": "01", + "鍙樺��": "02", + "寮�濮嬪綍鍍�": "03", + '缁撴潫褰曞儚':'04', + "鎮仠": "05", + +} export default{ name:'shootPointDialog', components: { @@ -137,10 +148,6 @@ form:{}, deviceData:null, activeName: 'first', - totalDistance: 3054.9, - totalTime: '5m 56s', - totalPoints: 11, - totalPhotos: 3, waypoints:[], selectedIndex:null, chooseItem: null, @@ -156,6 +163,7 @@ console.log(res.data) this.getRowData(res.data) let drawArr = this.convertToTree(res.data.ardListWayPointsLS) + console.log(drawArr) setTimeout(() => { //娓叉煋鏃堕棿闂 鍔犱釜寤舵椂鍣� this.drawLines(drawArr) @@ -165,24 +173,27 @@ } }, methods:{ - toggleSelect(wq,index) { - this.chooseItem = wq + toggleSelect(data,index) { + this.chooseItem = data console.log(this.treeData) - console.log(wq) + console.log(data) // 濡傛灉鐐瑰嚮鐨勬槸褰撳墠琛岋紝鍒欏彇娑堥�変腑 if (this.selectedIndex === index) { this.selectedIndex = null } else { this.selectedIndex = index } - const result = this.treeData.filter(item => - item.children && item.children.some(child => child.label === wq.label) - ); - const dataObj = result[0] - const from = [dataObj.children[0]?.longitude,dataObj.children[0]?.latitude, dataObj.children[0]?.height]; - const to = [dataObj.longitude,dataObj.latitude, dataObj.height]; + // const result = this.treeData.filter(item => + // item.children && item.children.some(child => child.label === data.label) + // ); + // const dataObj = result[0] + // const from = [dataObj.children[0]?.longitude,dataObj.children[0]?.latitude, dataObj.children[0]?.height]; + // const to = [dataObj.longitude,dataObj.latitude, dataObj.height]; + const from = [data.children[0].longitude,data.children[0].latitude, data.children[0].height]; + const to = [data.longitude,data.latitude, data.height]; + // this.flyToAndLookAt(from, to); this.flyToAndLookAt(from, to); - this.$refs.initMap.DealVisualCone(dataObj) + this.$refs.initMap.DealVisualCone(data) }, // 璁$畻 heading锛堝亸鑸锛� computeHeading(fromCartesian, toCartesian) { @@ -213,7 +224,7 @@ Cesium.Matrix4.inverseTransformation(transform, new Cesium.Matrix4()), direction, new Cesium.Cartesian3() - ); + ); Cesium.Cartesian3.normalize(directionLocal, directionLocal); return Math.asin(directionLocal.z); // z杞村悜涓� }, @@ -252,12 +263,30 @@ }, dealTreeData(arrList){ console.log(arrList) + console.log(this.treeData) + console.log(this.lastTableArr) this.treeData = arrList const childrenArr = arrList .filter(item => Array.isArray(item.children)) .map(item => item.children) .reduce((acc, cur) => acc.concat(cur), []); - + //閫氳繃鍙崇偣鍑� 瀵规瘮涔嬪墠鐨勫姩浣滅殑鏁扮粍 鎶婁箣鍓嶅姩浣滄暟缁勭紦瀛� 鐒跺悗鍙嶈祴鍊肩粰鏂版暟鎹� + if(this.lastTableArr?.length >0){ + this.treeData = this.treeData.map(item2 => { + const matchingItem1 = this.lastTableArr.find(item1 => item1.label === item2.label); + if (matchingItem1) { + item2.children = item2.children.map(child2 => { + const matchingChild1 = matchingItem1.children.find(child1 => child1.label === child2.label); + if (matchingChild1) { + // 灏� actions 浠� array1 澶嶅埗鍒� this.treeData + child2.actions = [...matchingChild1.actions]; + } + return child2; + }); + } + return item2; + }) + } childrenArr?.forEach((ele)=>{ if(ele.actions) { }else { @@ -316,19 +345,43 @@ // 2. 姣忎釜绌轰腑鐐逛笌鍦伴潰鐐圭敤钃濊壊铏氱嚎杩炴帴 treeData.forEach(point => { const airPos = Cesium.Cartesian3.fromDegrees(point.longitude, point.latitude, point.height); + this.addLabel(point) point.children.forEach(child => { const groundPos = Cesium.Cartesian3.fromDegrees(child.longitude, child.latitude, child.height); + this.addLabel(child) viewer.entities.add({ polyline: { positions: [airPos, groundPos], width: 1, material: new Cesium.PolylineDashMaterialProperty({ - color: Cesium.Color.BLUE, + color: Cesium.Color.RED, dashLength: 8 }) } }); }); + }); + }, + addLabel(point) { + const position = Cesium.Cartesian3.fromDegrees( + point.longitude, + point.latitude, + point.height + ); + let viewer = window.viewerM + // Create a label entity + viewer.entities.add({ + position: position, + label: { + text: point.label, + font: "14px sans-serif", + fillColor: Cesium.Color.WHITE, + backgroundColor: Cesium.Color.BLACK, + style: Cesium.LabelStyle.FILL_AND_OUTLINE, + outlineWidth: 2, + horizontalOrigin: Cesium.HorizontalOrigin.CENTER, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM + } }); }, addPoint(viewer, position, color, label) { @@ -411,7 +464,10 @@ }, //鍚堝苟閫昏緫 灏嗛檮杩憂绫宠寖鍥村唴鐨勭偣鍚堝苟 骞朵笖澶勭悊鎴愭暟鎹� mergePoint(arr,mergeNumber,viewer){ - this.treeData = arr + console.log(arr) + console.log(this.treeData) + // this.treeData = arr + this.treeData = this.lastTableArr const result = this.replaceCloseChildrenWithHighestPoint(this.treeData,mergeNumber); // const updated = this.insertRaisedPoints(result, 0,0, 236, 130); const updated = this.insertRaisedPoints(result, globalon, globalat, towerHeight); @@ -451,7 +507,7 @@ console.log(this.treeData) }, //鏁扮粍 濉旂殑绮惧害 濉旂殑绾害 濉旂殑楂樺害 鍗婂緞 - insertRaisedPoints(data, centerLon, centerLat, centerHeight, radius = 10) { + insertRaisedPoints(data, centerLon, centerLat, centerHeight, radius = 15) { const center = Cesium.Cartesian3.fromDegrees(centerLon, centerLat, centerHeight); const result = JSON.parse(JSON.stringify(data)); // 娣辨嫹璐濋伩鍏嶆薄鏌撳師鏁版嵁 const inserts = []; // 鐢ㄤ簬瀛樺偍鎻掑叆椤瑰強鍏剁洰鏍囦綅缃� @@ -464,7 +520,8 @@ const cartA = Cesium.Cartesian3.fromDegrees(pointA.longitude, pointA.latitude, pointA.height); const cartB = Cesium.Cartesian3.fromDegrees(pointB.longitude, pointB.latitude, pointB.height); - + console.log(cartA) + console.log(cartB) const closest = this.closestPointOnSegment(cartA, cartB, center); const distance = Cesium.Cartesian3.distance(closest, center); console.log(distance) @@ -482,7 +539,9 @@ ...pointA, id: this.generateId(), label: pointA.label + "-鍔犻珮", - height: pointA.height + 50 + // height: pointA.height + 50, + height: pointA.height + (towerHeight - pointA.height + 20), + actions:[] } ] }; @@ -501,7 +560,8 @@ ...pointB, id: this.generateId(), label: pointB.label + "-鍔犻珮", - height: pointB.height + 50 + height: pointB.height + (towerHeight - pointB.height + 20), + actions:[] } ] }; @@ -654,7 +714,30 @@ type: 'warning' }) } - // this.dialogVisible = false + console.log(this.$refs.initMap.preVideoScopePrimitiveArrTie) + console.log(this.treeData) + console.log(this.waypoints) + this.$refs.initMap.preVideoScopePrimitiveArrTie.forEach(point => { + // 閬嶅巻鍘熷鏁版嵁 + this.treeData.forEach(item => { + item.children.forEach(child => { + // 濡傛灉鍚嶇О鐩稿悓 + if (child.label === point.name) { + // 鍚� actions 鏁扮粍鐨勭涓�椤� push zoomRatio + console.log(child) + console.log(point.primitive) + child.actions.unshift({ + "id": Date.now(), // 浣跨敤褰撳墠鏃堕棿浣滀负鍞竴ID + "type": "鍙樺��", + "extra": { + "value": point.primitive.zoomRatio || 1 + } + }); + } + }); + }); + }) + console.log(this.treeData) // const dealArr = this.submitDealData() const transformed = this.treeData.map((ground, index) => { const pointNumber = index + 1; @@ -668,7 +751,33 @@ latitude: ground.latitude, longitude: ground.longitude, pointNumber: 1, - targetName: ground.label + targetName: ground.label, + // actions:child.actions.map((item, index) => ({ + // actionIndex: index.toString(), + // actionType: typeDictionary[item.type] || "", // 濡傛灉绫诲瀷涓嶅瓨鍦ㄥ瓧鍏镐腑锛岄粯璁ょ┖瀛楃涓� + // actionValue: item.extra.value + // })) + actions:child.actions.map(action => { + console.log(action) + switch (action.type) { + case "鎮仠": + return { hoverTime: parseFloat(action.extra.value) }; + case "鍙樺��": + return { zoom: parseFloat(action.extra.value) }; + case "寮�濮嬪綍鍍�": + return { startRecord: true }; + case "缁撴潫褰曞儚": + return { stopRecord: true }; + case "鎷嶇収": + // const [takePhotoType, useGlobalImageFormat] = action.actionValue.split('-'); + return { + takePhotoType: 0, + useGlobalImageFormat: 0 + }; + default: + return {}; + } + }) } ], latitude: child.latitude, @@ -690,6 +799,7 @@ message: '鏂板妯℃澘鎴愬姛', type: 'success' }) + this.dialogVisible = false this.$emit('on-submit') this.$emit('close') } @@ -716,11 +826,13 @@ console.log(this.treeData) console.log(this.waypoints) console.log(data) + console.log(this.lastTableArr) const byLabel = this.addOrUpdate(this.lastTableArr, data, 'label', this) this.waypoints = this.lastTableArr console.log(byLabel) console.log(this.lastTableArr) console.log( this.waypoints) + this.treeData = this.lastTableArr }, addOrUpdate(list, newItem, key = 'label', vm = null) { let index = list.findIndex(item => item[key] === newItem[key]); @@ -737,11 +849,42 @@ }, clickItem(value){ this.$refs.initMap.editAction(value); + }, + extractNumberFromLabel(label){ + const match = label.match(/(\d+)/); // 鑾峰彇鏍囩涓殑鏁板瓧 + return match ? match[0] : null; + }, + deleteItem(item){ + this.treeData = this.treeData.filter(obj=>obj.id != item.id) + this.lastTableArr = this.lastTableArr.filter(obj=>obj.id != item.id) + const data1LabelNumber = this.extractNumberFromLabel(item.label); + + // 鍒涘缓涓�涓柊鐨凟ntityCollection锛屽彧淇濈暀涓嶅尮閰嶇殑瀹炰綋 + const filteredEntities = window.viewerM.entities.values.filter(entity => { + const entityIdNumber = this.extractNumberFromLabel(entity.id); // 鎻愬彇瀹炰綋鐨刬d涓殑鏁板瓧 + return entityIdNumber !== data1LabelNumber; // 濡傛灉鏁板瓧涓嶄竴鑷达紝淇濈暀璇ュ疄浣� + }); + // 娓呯┖鍘熸潵鐨別ntities闆嗗悎骞堕噸鏂版坊鍔犺繃婊ゅ悗鐨勫疄浣� + window.viewerM.entities.removeAll(); // 娓呯┖鎵�鏈夊疄浣� + filteredEntities.forEach(entity => window.viewerM.entities.add(entity)) + console.log(item) + console.log(this.treeData) + console.log(this.lastTableArr) + console.log(window.viewerM.entities.values) + // console.log(window.viewerM.entities.values[0].id) + // console.log(window.viewerM.entities.values[1].id) + // console.log(window.viewerM.entities.values[2].id) + // console.log(window.viewerM.entities.values[3].id) + } } } </script> <style scoped> +::v-deep .el-dialog__header { + padding: 10px; /* 淇敼鍐呰竟璺� */ + font-size: 18px; /* 淇敼瀛椾綋澶у皬 */ +} .noScroll{ height: calc(100vh - 175px); overflow: auto; @@ -910,13 +1053,13 @@ height: 36px; line-height: 36x; transition: transform 0.2s; - font-size: 24px; + font-size: 22px; } .waypoint-header .waypoint-index { - font-size: 24px; + font-size: 22x; } .rotated { transform: rotate(-90deg); -- Gitblit v1.9.3