From 4f96875c6abddd2195b716906558d838a9250776 Mon Sep 17 00:00:00 2001 From: jihongshun <1151753686@qq.com> Date: 星期三, 13 八月 2025 13:49:50 +0800 Subject: [PATCH] 更换随机id --- src/utils/components/init-map.vue | 226 ++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 153 insertions(+), 73 deletions(-) diff --git a/src/utils/components/init-map.vue b/src/utils/components/init-map.vue index 6cb1d61..b80ec6c 100644 --- a/src/utils/components/init-map.vue +++ b/src/utils/components/init-map.vue @@ -27,11 +27,13 @@ </div> <!-- 宸︿笅瑙掑�嶇巼淇℃伅 --> - <div class="zoom-info"> - <el-tag type="success">鍊嶇巼: {{ zoomRatio.toFixed(1) }}X</el-tag> - </div> + </div> - + <div class="zoom-info"> + <el-tag type="success">鍊嶇巼: {{ zoomRatio.toFixed(1) }}X</el-tag><br> + <el-tag type="success">璺濈: {{ betweenDistance.toFixed(1) }}绫�</el-tag><br> + <el-tag type="success">P: {{ cameraP.toFixed(1) }} T: {{ cameraT.toFixed(1) }} </el-tag> + </div> <!-- botton --> @@ -125,7 +127,7 @@ // let pois = [0, 0,0] let holdingPosition; let rightKeyMove = false -let distance = 100; +let distance = 25; export default { props: { towerUrl: { @@ -133,6 +135,9 @@ default() { return '' } + }, + deviceData: { + type: Object, }, }, data(){ @@ -169,11 +174,15 @@ 14: '14X', 28: '28X', 56: '56X' - } + }, + betweenDistance:0, + cameraP:0.0, + cameraT:0.0 } }, mounted(){ this.initCesium(); + console.log(this.deviceData) }, computed: { boxWidth() { @@ -209,7 +218,6 @@ control.enableTilt = false; control.enableLook = false; viewerC.scene.camera.percentageChanged = 0.05聽 - this.cammove_measure_point(); },1000) }, @@ -248,13 +256,6 @@ fullscreenButton: false, vrButton: false, }); - // 鍏抽棴澶╃┖鐩掓晥鏋� - // viewer.scene.skyAtmosphere = undefined; // 鎴栬�呰缃负 null - - // // 鍏抽棴鍏夌収鏁堟灉 - // viewer.scene.globe.enableLighting = false; // 鍏抽棴鍏夌収鏁堟灉 - - // viewer.imageryLayers.add(bdtvectoranoimagery); viewer._cesiumWidget._creditContainer.style.display="none"; return viewer; @@ -271,7 +272,6 @@ // 璁剧疆瑙嗚锛屼娇鍏堕粯璁ゆ煡鐪嬫煇涓湴鐞嗕綅缃� viewerM.scene.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(globalon, globalat, 349.0), // 浠ョ粡绾害璁剧疆浣嶇疆锛堜緥濡傦細澶у簡榫欏叴璺級 - // destination: Cesium.Cartesian3.fromDegrees(0.0005, 0.0017, 207.8), // 浠ョ粡绾害璁剧疆浣嶇疆锛堜緥濡傦細澶у簡榫欏叴璺級 orientation: { heading: Cesium.Math.toRadians(194.65), // 鏂瑰悜 pitch: Cesium.Math.toRadians(-31.43), // 淇 @@ -303,12 +303,10 @@ }, addSyncListener() { // 瀛樹笅鍥炶皟浠ヤ究閿�姣� - // this._preRenderCallback = () => this.syncViewer(); viewerM.scene.preRender.addEventListener( this.syncViewer()); window.addEventListener("keydown", this.handleKeydown); }, syncViewer(){ - console.log(viewerM.camera) viewerC.camera.flyTo({ destination: viewerM.camera.position, orientation: { @@ -351,7 +349,6 @@ let lng = Cesium.Math.toDegrees(cartographic.longitude); let lat = Cesium.Math.toDegrees(cartographic.latitude); height = cartographic.height; - console.log(lng+','+lat+','+height) } //鍦ㄤ袱涓獥鍙e垱寤烘爣娉� @@ -380,44 +377,45 @@ //鏍规嵁鍋忕Щ閲忔眰鍋忕Щ鍚戦噺 聽聽聽聽const scalerNormalize聽=聽Cesium.Cartesian3.multiplyByScalar(normalize,distance,new聽Cesium.Cartesian3()); const tagert = Cesium.Cartesian3.add(holdingPosition,scalerNormalize,new聽Cesium.Cartesian3()); - console.log(Cesium.Cartographic.fromCartesian(tagert)) + //鍒涘缓绌轰腑鐐筽in _this.creatPin("aerialPoiId"+counter,tagert,`绌�${counter}`,Cesium.Color.RED,viewerM); - // preVideoScopePrimitiveArrTie = [] - console.log(preVideoScopePrimitiveArrTie) - - console.log(Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(tagert).height)) + //鏇存柊閿洏浜嬩欢 _this.updateCameraMovement(); - // if(cameraVideo){ - // viewerM.scene.primitives.remove(cameraVideo) - // } - chooseId = crypto.randomUUID() - //鍒涘缓瑙嗛敟浣� + //褰撳墠閫夋嫨鐨刬d + // chooseId = crypto.randomUUID() + chooseId = _this.genId() + //鍒涘缓瑙嗛敟浣� let data = { - "FHorFieldAngle": 32.13, - "FVerFieldAngle": 18.39, "altitude": Cesium.Cartographic.fromCartesian(tagert).height, "id": chooseId, - "chanNo": 1, "latitude": Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(tagert).latitude), "longitude": Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(tagert).longitude), - "p": 26.8, - "t": 351.3, - "z": 1, } - const point1 = Cesium.Cartesian3.fromDegrees(0, 0, 50); + const lookPoint = Cesium.Cartesian3.fromDegrees(longitude, latitude) + const watchPoint = Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(tagert).longitude), Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(tagert).latitude)) + const betweenDistanceWatch = Cesium.Cartesian3.distance(lookPoint, watchPoint) + _this.betweenDistance = betweenDistanceWatch + console.log(lookPoint) + console.log(watchPoint) + // const guanPoint1 = Cesium.Cartesian3.fromDegrees(longitude, latitude) + console.log(viewerM.entities.getById('groundPoiId0')) + //濉旂殑璺濈鍜岃娴嬬偣鐨勮窛绂� + console.log(_this.deviceData) + const point1 = Cesium.Cartesian3.fromDegrees(0, 0, _this.deviceData?.modelHeight || 45); + // const point1 = Cesium.Cartesian3.fromDegrees(0, 0, 45); const point2 = Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(tagert).longitude), Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(tagert).latitude), Cesium.Cartographic.fromCartesian(tagert).height); // 璁$畻璺濈锛堝崟浣嶏細绫筹級 - const distance1 = Cesium.Cartesian3.distance(point1, point2) - console.log(distance1) - data.distance = distance1 + const distanceCalculate = Cesium.Cartesian3.distance(point1, point2) + data.distance = distanceCalculate + //鍙抽敭缁撴潫鍚庢妸缂╂斁閲嶇疆涓�1 _this.zoomRatio = 1 _this.createVideoScope(data) setTimeout(() => { viewerC.camera.changed.addEventListener(_this.onCameraChange) }, 100); - - + //宸︿晶鏍戠粨鏋勮仈鍔� + _this.dealTree() //缁撴潫鍙抽敭鐩戝惉 createPinHandler.destroy(); //缁撴潫涓诲浘鑱斿姩楣扮溂鐩戝惉 @@ -448,8 +446,6 @@ return result; }, changeCamera(position,heading){ - console.log(position) - console.log(heading) viewerC.camera.flyTo({ destination: position, orientation: { @@ -526,6 +522,7 @@ } }, onKeyUp(event) { + console.log() //閿洏鎶捣杩涜鏇存柊宸︿晶绌轰腑鐐筽in //鑾峰彇鍙充晶鐩告満 if(rightKeyMove){ @@ -551,7 +548,21 @@ } else { groupEntity.position = position; } - console.log(groupEntity) + //璁$畻涓や釜鐐硅窛绂� + console.log(viewerM.entities) + const groupEntityGround = viewerM.entities.getById("groundPoiId"+(counter-1)); + const groupPosition = groupEntityGround.position.getValue(Cesium.JulianDate.now()); + if (groupPosition) { + const cartographic = Cesium.Cartographic.fromCartesian(groupPosition); + const longitude = Cesium.Math.toDegrees(cartographic.longitude); + const latitude = Cesium.Math.toDegrees(cartographic.latitude); + const point1 = Cesium.Cartesian3.fromDegrees(lon, lat); + const point2 = Cesium.Cartesian3.fromDegrees(longitude, latitude); + const gure = Cesium.Cartesian3.distance(point1, point2) + this.betweenDistance = gure + } + + this.dealTree() } const key = event.key; const lower = key.toLowerCase(); @@ -718,11 +729,43 @@ // Fly back to the initial view (home) in 1 second viewerC.camera.flyHome(1.0); }, - move_measure_point(){ - CesiumSurvey.measureMovePoint(viewerC,'moveResultCon'); - }, - cammove_measure_point(){ - CesiumSurvey.cammeasureMovePoint(viewerC,'cammoveResultCon'); + dealTree(){ + let allEntities = viewerM.entities.values; // 鎵�鏈夊疄浣撳璞$粍鎴愮殑鏁扮粍 + const grouped = {}; + //鎵�鏈夊疄浣撳璞$粍鎴愮殑鏁扮粍杞崲鎴愬乏渚ф爲闇�瑕佺殑鏍煎紡 + allEntities.forEach(item => { + const match = item.id.match(/(groundPoiId|aerialPoiId)(\d+)/); + if (match) { + const type = match[1]; // groundPoiId or aerialPoiId + const index = match[2]; + if (!grouped[index]) grouped[index] = {}; + grouped[index][type] = item.position; + } + }) + const result = Object.keys(grouped).map((key, idx) => { + const group = grouped[key]; + const positionGround = group.groundPoiId.getValue(Cesium.JulianDate.now()) + const positionAerialPo = group.aerialPoiId.getValue(Cesium.JulianDate.now()) + const groundPos = Cesium.Cartographic.fromCartesian(positionGround); + const aerialPos = Cesium.Cartographic.fromCartesian(positionAerialPo); + return { + id: this.genId(), + label: `鍦伴潰鐐�${idx}`, + longitude: Cesium.Math.toDegrees(groundPos.longitude), + latitude: Cesium.Math.toDegrees(groundPos.latitude), + height: groundPos.height, + children: [ + { + id: this.genId(), + label: `绌轰腑鐐�${idx}`, + longitude: Cesium.Math.toDegrees(aerialPos.longitude), + latitude: Cesium.Math.toDegrees(aerialPos.latitude), + height: aerialPos.height + } + ] + }; + }); + this.$emit('dealTreeData',result) }, mergePoint(){ let allEntities = viewerM.entities.values; // 鎵�鏈夊疄浣撳璞$粍鎴愮殑鏁扮粍 @@ -760,7 +803,6 @@ ] }; }); - console.log(result) this.$emit('mergePoint',result,this.mergeNumber,viewerM) }, genId() { @@ -791,7 +833,6 @@ }, handleKeydown(e) { const key = e.key; - console.log(key) const validKeys = ["a", "s", "d", "w",'q','e','ArrowUp','ArrowDown','ArrowLeft','ArrowRight','q','e']; if (validKeys.includes(key)) { this.triggerKey(key); @@ -800,8 +841,6 @@ }, // 鍒涘缓鍒濆鍖栫殑鍏夎酱 createVideoScope(data) { - console.log(data) - console.log(data.distance) if (data == undefined) { this.$message({ showClose: true, @@ -822,7 +861,6 @@ // Number(data.altitude) + Number(hight[1]) + 1.7 Number(data.altitude) ); - console.log(data) let inverseViewMatrix = this.hpr2m({ position: positionCt3, // 鐩告満鍧愭爣 // heading: Cesium.Math.toRadians(Number(120)), @@ -833,7 +871,7 @@ roll: Cesium.Math.toRadians(0), }); let frustum = new Cesium.PerspectiveFrustum({ - fov: Cesium.Math.toRadians(1), + fov: Cesium.Math.toRadians(56), aspectRatio: Number(1.77778), // 瀹介珮姣� near: Number(0.05), // 璁惧鐒﹁窛 far: Number(data.distance), // 鎷嶆憚璺濈 @@ -861,16 +899,11 @@ ); // viewer.scene.primitives.add(cameraVideo); let pmObj = {}; - console.log(data) pmObj.id = data.id; - console.log(pmObj) pmObj.primitive = cameraVideo; - // pmCollection.push(pmObj);//骞曞竷锛岃棰戣浆鎹娇鐢� viewerM.scene.primitives.add(cameraVideo); preVideoScopePrimitiveArrTie.push(pmObj); preVideoScopePrimitiveArrTie.map((item)=>{ - console.log(item) - console.log(chooseId) if(item.id != chooseId){ item.primitive.show = false } @@ -937,18 +970,36 @@ const heading = Cesium.Math.toDegrees(camera.heading); const pitch = Cesium.Math.toDegrees(camera.pitch); const roll = Cesium.Math.toDegrees(camera.roll); - const point1 = Cesium.Cartesian3.fromDegrees(0, 0, 50); + const point1 = Cesium.Cartesian3.fromDegrees(0, 0, this.deviceData?.modelHeight || 45); const point2 = Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(position.longitude),Cesium.Math.toDegrees(position.latitude),position.height) + + var camResult = + position.longitude.toFixed(4) + + '\u00B0' + + ',' + + position.latitude.toFixed(4) + + '\u00B0' + + ',' + + position.height.toFixed(1) + + '绫�,' + + heading.toFixed(2) + + '\u00B0' + + ',' + + pitch.toFixed(2) + + '\u00B0' + + ',' + + roll.toFixed(1) + + '\u00B0'; + document.getElementById('cammoveResultCon').innerHTML = camResult; // 璁$畻璺濈锛堝崟浣嶏細绫筹級 const distanceBetween = Cesium.Cartesian3.distance(point1, point2) - console.log(distanceBetween) console.log(preVideoScopePrimitiveArrTie) - console.log(chooseId) preVideoScopePrimitiveArrTie.map((item)=>{ if(item.id == chooseId){ let obj = this.updateSZScope(Cesium.Math.toDegrees(position.longitude),Cesium.Math.toDegrees(position.latitude),position.height,heading,pitch,roll,this.zoomRatio,distanceBetween) item.primitive.inverseViewMatrix = obj.M item.primitive.frustum = obj.F + item.primitive.zoomRatio = this.zoomRatio } }) }, @@ -959,22 +1010,18 @@ Number(lat), Number(alt) ); - console.log(positionCt3) - console.log(distanceBetween) let frustum = new Cesium.PerspectiveFrustum({ - fov: Cesium.Math.toRadians(LightView), + fov: Cesium.Math.toRadians(56/LightView), aspectRatio: Number(1.77778), near: Number(0.05), far: Number(distanceBetween), }); - console.log(frustum) let inverseViewMatrixNew = this.hpr2m({ position: positionCt3, heading: Cesium.Math.toRadians(Number(camHeading)), pitch: Cesium.Math.toRadians(Number(camPitch)), roll: Cesium.Math.toRadians(Number(camRoll)), }); - console.log(inverseViewMatrixNew) return {M: inverseViewMatrixNew, F: frustum}; }, handleWheel(event) { @@ -994,7 +1041,40 @@ }, onSliderInput(val) { this.zoomRatio = val; - } + }, + // 璁$畻 heading锛堝亸鑸锛� + computeHeading(fromCartesian, toCartesian) { + const transform = Cesium.Transforms.eastNorthUpToFixedFrame(fromCartesian); + const direction = Cesium.Cartesian3.subtract( + toCartesian, + fromCartesian, + new Cesium.Cartesian3() + ); + const directionLocal = Cesium.Matrix4.multiplyByPointAsVector( + Cesium.Matrix4.inverseTransformation(transform, new Cesium.Matrix4()), + direction, + new Cesium.Cartesian3() + ); + Cesium.Cartesian3.normalize(directionLocal, directionLocal); + return Math.atan2(directionLocal.x, directionLocal.y); + }, + + // 璁$畻 pitch锛堜刊浠拌锛� + computePitch(fromCartesian, toCartesian) { + const transform = Cesium.Transforms.eastNorthUpToFixedFrame(fromCartesian); + const direction = Cesium.Cartesian3.subtract( + toCartesian, + fromCartesian, + new Cesium.Cartesian3() + ); + const directionLocal = Cesium.Matrix4.multiplyByPointAsVector( + Cesium.Matrix4.inverseTransformation(transform, new Cesium.Matrix4()), + direction, + new Cesium.Cartesian3() + ); + Cesium.Cartesian3.normalize(directionLocal, directionLocal); + return Math.asin(directionLocal.z); // z杞村悜涓� + }, } } </script> @@ -1007,7 +1087,7 @@ #cesiumContainer { margin: 0; padding: 0; - width: 73%; + width: 74%; height: calc(100vh - 205px); } #cesiumCamera { @@ -1032,7 +1112,7 @@ /* padding: 0 5px; */ margin-top: 10px; right: 0px; - width: 420px; + width: 410px; height: calc(100vh - 210px); bottom: 30px; margin: 0; @@ -1045,7 +1125,7 @@ } .moveResult{position:absolute;z-index:2;background-color:rgba(47,53,60,1);padding:0 5px;right:50%;bottom:30px; border:1px solid rgba(255,255,255,.1);box-sizing:content-box;width:220px;height:30px;font-size:14px;text-align:center} -.cammoveResult{position:absolute;z-index:2;background-color:rgba(47,53,60,1);padding:0 5px;right:calc(50% - 40px);bottom:30px; +.cammoveResult{position:absolute;z-index:2;background-color:rgba(47,53,60,1);padding:0 5px;right:calc(50% - 140px);bottom:35px; border:1px solid rgba(255,255,255,.1);box-sizing:content-box;width:400px;height:30px;font-size:14px;text-align:center} .moveResultCon{margin-top:4px} .cammoveResultCon{margin-top:4px;color: white;} @@ -1134,8 +1214,8 @@ /* 宸︿笅瑙掑�嶇巼鏍囩 */ .zoom-info { position: absolute; - bottom: 20px; - left: 20px; + bottom: 35px; + left: 340px; } </style> -- Gitblit v1.9.3