From 307db148645230afc780a3d5d16ffb97aa32c189 Mon Sep 17 00:00:00 2001 From: jihongshun <1151753686@qq.com> Date: 星期四, 03 七月 2025 16:38:58 +0800 Subject: [PATCH] 模型 && 设备相关 --- src/views/system/model/index.vue | 14 src/views/system/shootPoint/index.vue | 12 vue.config.js | 2 src/views/system/shootPoint/components/shootPointDialog.vue | 506 +++++++++++++++++++++++++++-------- src/views/system/device/index.vue | 19 src/api/system/device.js | 10 src/utils/components/init-map.vue | 108 ++----- src/views/system/model/components/modelDialog.vue | 20 src/views/system/device/components/deviceDialog.vue | 110 +++++-- src/views/system/project/index.vue | 5 src/views/system/shootPoint/components/chooseModelDialog.vue | 18 11 files changed, 562 insertions(+), 262 deletions(-) diff --git a/src/api/system/device.js b/src/api/system/device.js index ff6777f..02634b5 100644 --- a/src/api/system/device.js +++ b/src/api/system/device.js @@ -7,3 +7,13 @@ params: query }); } +export function uploadFile(query) { + return request({ + url: '/upload', + method: 'post', + data: query, + headers: { + 'Content-Type': 'multipart/form-data; ' + } + }); +} diff --git a/src/utils/components/init-map.vue b/src/utils/components/init-map.vue index f26094c..6b1ea9d 100644 --- a/src/utils/components/init-map.vue +++ b/src/utils/components/init-map.vue @@ -8,10 +8,10 @@ <div class="cesiumBotton"> <div class="cesiumButtonGroup"> <el-button id="groundPoi" @click="addGroundPoi()" type="primary">鍦伴潰鐐�</el-button> - <el-button id="groundPoi" @click="addGroundPoi()" type="primary">绌轰腑鐐�</el-button> - <el-button id="groundPoi" @click="addGroundPoi()" type="primary">鍋滅暀鏃堕棿</el-button> + <!-- <el-button id="groundPoi" @click="addGroundPoi()" type="primary">鍋滅暀鏃堕棿</el-button> --> <el-input v-model="mergeNumber" placeholder="璇疯緭鍏ュ悎骞惰寖鍥�" type="number" style="width: 150px;"></el-input> <el-button @click="mergePoint()" type="success">鍚堝苟</el-button> + <el-button @click="renderData()" type="success">鏁版嵁娓叉煋</el-button> </div> </div> @@ -36,12 +36,23 @@ let viewerM; let viewerC; let counter = 0; -let pois = [125.1541, 46.5542,0] + let globalon = 125.1949 +let globalat = 46.5143 +let pois = [globalon, globalat,0] + +// let pois = [0, 0,0] let holdingPosition; let rightKeyMove = false -// let pois = [125.1541, 46.5542,0] let distance = 100; export default { + props: { + towerUrl: { + type: String, + default() { + return '' + } + }, + }, data(){ return{ moveSpeed: 1, @@ -108,8 +119,6 @@ initViewer(cesiumId){ //cesium鍏ㄧ悆30绫冲垎杈ㄧ巼鍦板舰璧勬簮token let imageryProvider1 = new Cesium.TileMapServiceImageryProvider({ - // url: process.env.VUE_APP_BASE_GIS + "/daqing/dom-sea", - // url: process.env.VUE_APP_BASE_GIS + "/daqing/dom-sea", url: `https://192.168.1.2:9999/daqing/dom-sea/`, }); let viewer = new Cesium.Viewer(cesiumId, { @@ -124,6 +133,7 @@ navigationHelpButton: false, navigationInstructionsInitiallyVisible: false, imageryProvider: imageryProvider1, + // imageryProvider: false, shadows: false, animation: false, infoBox: false, @@ -132,6 +142,11 @@ fullscreenButton: false, vrButton: false, }); + // 鍏抽棴澶╃┖鐩掓晥鏋� + // viewer.scene.skyAtmosphere = undefined; // 鎴栬�呰缃负 null + + // // 鍏抽棴鍏夌収鏁堟灉 + // viewer.scene.globe.enableLighting = false; // 鍏抽棴鍏夌収鏁堟灉 window.viewer = viewer; // viewer.imageryLayers.add(bdtvectoranoimagery); viewer._cesiumWidget._creditContainer.style.display="none"; @@ -139,7 +154,7 @@ }, loadModel(){ - const modelUrl = 'http://192.168.1.2:9001/model/tower.glb'; // GLB妯″瀷璺緞 + const modelUrl = this.towerUrl; // GLB妯″瀷璺緞 // 娌垮師鐐瑰潗鏍囧拰鍦伴潰鐐瑰潗鏍囨柟鍚戜笂閫夊彇绌轰腑鐐圭殑璺濈 //鍒濆鍖栫浉鏈虹獥鍙h瑙掑弬鏁� cameraPostion = viewerM.camera.position @@ -149,17 +164,18 @@ // 璁剧疆瑙嗚锛屼娇鍏堕粯璁ゆ煡鐪嬫煇涓湴鐞嗕綅缃� viewerM.scene.camera.setView({ - destination: Cesium.Cartesian3.fromDegrees(125.1511, 46.5542, 349.0), // 浠ョ粡绾害璁剧疆浣嶇疆锛堜緥濡傦細澶у簡榫欏叴璺級 + destination: Cesium.Cartesian3.fromDegrees(globalon, globalat, 349.0), // 浠ョ粡绾害璁剧疆浣嶇疆锛堜緥濡傦細澶у簡榫欏叴璺級 + // destination: Cesium.Cartesian3.fromDegrees(0.0005, 0.0017, 207.8), // 浠ョ粡绾害璁剧疆浣嶇疆锛堜緥濡傦細澶у簡榫欏叴璺級 orientation: { - heading: Cesium.Math.toRadians(86.94), // 鏂瑰悜 - pitch: Cesium.Math.toRadians(-30.22), // 淇 + heading: Cesium.Math.toRadians(194.65), // 鏂瑰悜 + pitch: Cesium.Math.toRadians(-31.43), // 淇 roll: 0 } }); //鍒涘缓妯″瀷 const glbModelPoi = Cesium.Cartesian3.fromDegrees(pois[0], pois[1],pois[2]); - const heading = Cesium.Math.toRadians(10); + const heading = Cesium.Math.toRadians(0); const pitch = Cesium.Math.toRadians(0); const roll = Cesium.Math.toRadians(0); const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll); @@ -214,9 +230,6 @@ } }, addGroundPoi() { - console.log('1111111111111111') - console.log(new Cesium.ScreenSpaceEventHandler(viewerM.canvas)) - console.log(this) let createPinHandler = new Cesium.ScreenSpaceEventHandler(viewerM.canvas); let _this = this createPinHandler.setInputAction(function (click) { @@ -232,7 +245,6 @@ let lng = Cesium.Math.toDegrees(cartographic.longitude); let lat = Cesium.Math.toDegrees(cartographic.latitude); height = cartographic.height; - // camPosition = lng+','+lat+','+height; console.log(lng+','+lat+','+height) } @@ -263,45 +275,12 @@ 聽聽聽聽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)) - var airCartographic= Cesium.Cartographic.fromCartesian(tagert) - var airPointLongitude= Cesium.Math.toDegrees(airCartographic.longitude); - var airPointLatitude = Cesium.Math.toDegrees(airCartographic.latitude); - var airPointHeight = airCartographic.height; _this.creatPin("aerialPoiId"+counter,tagert,`绌�${counter}`,Cesium.Color.RED,viewerM); _this.updateCameraMovement(); - // console.log(direction) - // console.log(normalize聽) - // console.log(longitude) - // console.log(latitude) - // console.log(pois) - // console.log(azimuthtwopoi(longitude,latitude,pois[0],pois[1])) - // let data = { - // id:(Date.now().toString(16) + Math.random().toString(16).slice(2, 10)).slice(0, 16), - // label:`鍦伴潰鐐�${counter}`, - // longitude:longitude, - // latitude:latitude, - // height:height, - // children:[ - // { - // id:(Date.now().toString(16) + Math.random().toString(16).slice(2, 10)).slice(0, 16), - // label:`绌轰腑鐐�${counter}`, - // longitude:airPointLongitude, - // latitude:airPointLatitude, - // height:airPointHeight, - // } - // ] - // } - // _this.$emit('rightClickEnd',data) //缁撴潫鍙抽敭鐩戝惉 createPinHandler.destroy(); //缁撴潫涓诲浘鑱斿姩楣扮溂鐩戝惉 viewerM.scene.preRender.removeEventListener(_this.syncViewer()); - // viewerM.scene.preRender.removeEventListener(this._preRenderCallback); - // if (this._preRenderCallback) { - // this.viewerM.scene.preRender.removeEventListener(this._preRenderCallback); - // this._preRenderCallback = null; - // } - //鏇存柊鐩告満瑙嗚涓虹┖涓偣 _this.changeCamera(tagert,_this.azimuthtwopoi(longitude,latitude,pois[0],pois[1])); rightKeyMove = true counter += 1; @@ -341,7 +320,6 @@ }); }, registerKeyboardEvents() { - console.log('11111111111111111111111') window.addEventListener("keydown", this.onKeyDown); window.addEventListener("keyup", this.onKeyUp); }, @@ -401,9 +379,6 @@ case "1": viewerC.scene.mode = Cesium.SceneMode.SCENE3D; break; - // case "2": - // viewerC.scene.mode = Cesium.SceneMode.SCENE2D; - // break; case "3": viewerC.scene.mode = Cesium.SceneMode.COLUMBUS_VIEW; break; @@ -411,22 +386,16 @@ }, onKeyUp(event) { //閿洏鎶捣杩涜鏇存柊宸︿晶绌轰腑鐐筽in - console.log(viewerM) - console.log(counter) //鑾峰彇鍙充晶鐩告満 if(rightKeyMove){ const camera = viewerC.camera; - console.log(camera) const carto = Cesium.Cartographic.fromCartesian(camera.position); - console.log(carto) //鍙充晶鐩告満瑙嗚杞寲涓虹粡绾害 const lon = Cesium.Math.toDegrees(carto.longitude); const lat = Cesium.Math.toDegrees(carto.latitude); const height = carto.height; const position = Cesium.Cartesian3.fromDegrees(lon, lat, height) - console.log(position) let pinBuilder = new Cesium.PinBuilder(); - // const dest = this.calculateDestinationPoint(lon, lat, camera.heading, speed); const groupEntity = viewerM.entities.getById("aerialPoiId"+(counter-1)); //宸︿晶鍦板浘鍚屾鏇存柊pin绌轰腑鐐逛綅缃� if (groupEntity == undefined) { @@ -521,17 +490,8 @@ let rotSpeed = 1; if (this.keyState.shift) rotSpeed *= this.speedMultiplier; if (this.keyState.ctrl) rotSpeed *= this.slowMultiplier; - const multiplyByScalarrotateAmount = Cesium.Math.toRadians(0.5 * rotSpeed); - - // if (this.keyState.up) camera.lookUp(rotateAmount); - // if (this.keyState.down) camera.lookDown(rotateAmount); - // if (this.keyState.left) camera.lookLeft(rotateAmount); - // if (this.keyState.right) camera.lookRight(rotateAmount); if (holdingPosition) { - // const groupPosition = groupEntity.position.getValue(Cesium.JulianDate.now()); - // console.log(groupPosition) const distance = Cesium.Cartesian3.distance(holdingPosition, camera.position); - const surroundSpeed = 0.005; //鐜粫閫熷害,瑙掑害 let cameraHeading = camera.heading; let cameraPitch = camera.pitch; @@ -548,7 +508,6 @@ if (this.keyState.right) camera.lookRight(rotateAmount); } this.resetRoll(); - // Schedule next frame this.animationFrameId = requestAnimationFrame(this.updateCameraMovement); }, @@ -573,9 +532,7 @@ return { lon: toDeg(lon2Norm), lat: toDeg(lat2Rad) }; }, - uavMoveForward(speed) { - console.log('11111' +speed) const camera = viewerC.camera; const carto = Cesium.Cartographic.fromCartesian(camera.position); const lon = Cesium.Math.toDegrees(carto.longitude); @@ -626,15 +583,11 @@ cammove_measure_point(){ CesiumSurvey.cammeasureMovePoint(viewerM,'cammoveResultCon'); }, + renderData(){ + this.$emit('renderData',viewerM) + }, mergePoint(){ let allEntities = viewerM.entities.values; // 鎵�鏈夊疄浣撳璞$粍鎴愮殑鏁扮粍 - console.log(allEntities) - allEntities.forEach(entity => { - console.log('ID:', entity.id); - console.log('Position:', entity.position ? entity.position.getValue(Cesium.JulianDate.now()) : null); - console.log('Name:', entity.name); - console.log('Properties:', entity.properties); // 鑷畾涔夊睘鎬� - }); const grouped = {}; //鎵�鏈夊疄浣撳璞$粍鎴愮殑鏁扮粍杞崲鎴愬乏渚ф爲闇�瑕佺殑鏍煎紡 allEntities.forEach(item => { @@ -669,7 +622,6 @@ ] }; }); - console.log(result) this.$emit('mergePoint',result,this.mergeNumber,viewerM) }, genId() { diff --git a/src/views/system/device/components/deviceDialog.vue b/src/views/system/device/components/deviceDialog.vue index cbc2b09..f08cfae 100644 --- a/src/views/system/device/components/deviceDialog.vue +++ b/src/views/system/device/components/deviceDialog.vue @@ -4,28 +4,22 @@ <Modal :title="form.id ? '淇敼璁惧' : '娣诲姞璁惧'" v-model="open"> <template slot="form"> <el-form ref="form" :model="form" :rules="rules" label-width="auto"> - <el-form-item label="璁惧鍚嶇О" prop="name"> - <el-input v-model="form.name1" placeholder="璇疯緭鍏ヨ澶囧悕绉�" /> + <el-form-item label="璁惧鍚嶇О" prop="deviceName"> + <el-input v-model="form.deviceName" placeholder="璇疯緭鍏ヨ澶囧悕绉�" /> </el-form-item> - <el-form-item label="鎵�灞炵嚎璺�" prop="beloneRoad"> - <el-input v-model="form.name2" placeholder="璇疯緭鍏ユ墍灞炵嚎璺�" /> + <el-form-item label="鎵�灞炵嚎璺�" prop="belongingRoute"> + <el-input v-model="form.belongingRoute" placeholder="璇疯緭鍏ユ墍灞炵嚎璺�" /> </el-form-item> - <el-form-item label="閫夋嫨妯″瀷" prop="wellType"> - <el-select v-model="form.wellType" placeholder="閫夋嫨妯″瀷"> - <el-option v-for="key in modelListData" :key="key.id" :label="key.modelType" + <el-form-item label="閫夋嫨妯″瀷" prop="modelId"> + <el-select v-model="form.modelId" placeholder="閫夋嫨妯″瀷" @change="change"> + <el-option v-for="key in modelListData" :key="key.id" :label="key.modelName" :value="key.id"></el-option> </el-select> </el-form-item> - <el-form-item label="鏈濆悜" prop="direction"> - <el-input v-model="form.direction" placeholder="璇疯緭鍏ユ湞鍚�" style="width:90%;"/> + <el-form-item label="鏈濆悜" prop="face"> + <el-input v-model="form.face" placeholder="璇疯緭鍏ユ湞鍚�" style="width:90%;"/> <i class="el-icon-map-location" @click="gettiles3dCam" title="棰勮"></i> </el-form-item> - <!-- <el-form-item label="妯″瀷绫诲瀷" prop="wellType"> - <el-select v-model="form.wellType" placeholder="妯″瀷绫诲瀷"> - <el-option v-for="key in model_type" :key="key.value" :label="key.label" - :value="key.value"></el-option> - </el-select> - </el-form-item> --> </el-form> </template> <template slot="cesium"> @@ -64,16 +58,14 @@ form: {}, // 琛ㄥ崟鏍¢獙 rules: { - name: [ - { required: true, message: '璇疯緭鍏ュ鍚嶇О', trigger: 'blur' } + deviceName: [ + { required: true, message: '璇疯緭鍏ヨ澶囧悕绉�', trigger: 'blur' } ], - deptId: [ - { required: true, message: '褰掑睘閮ㄩ棬' } // trigger鐩戝惉涓嶅埌 浣跨敤@input鍗曠嫭鏍¢獙vue-treeSelect琛ㄥ崟椤� - ] }, // 閮ㄩ棬鏁版嵁 deptOptions: null, - modelListData:[] + modelListData:[], + modelUrl:null } }, methods: { @@ -92,6 +84,34 @@ latitude: +this.form.latitude, altitude: +this.form.altitude, }) + let url = this.modelListData.filter(item=>item.id == this.form.modelId)[0].modelRoute + this.modelUrl = url + const position = Cesium.Cartesian3.fromDegrees(this.form.longitude, this.form.latitude, this.form.altitude); + // 璁剧疆妯″瀷鏂瑰悜锛堝彲閫夛級 + let model = viewer.entities.getById("MyModel"); + const heading = Cesium.Math.toRadians(this.form.face); // 鏈濅笢鍗楁柟鍚� + 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: "MyModel", + name: "MyModel", + position: position, + orientation: orientation, + model: { + uri:this.modelUrl, // 鏇挎崲鎴愪綘鐨勬ā鍨嬭矾寰� + scale: 1000, + }, + }); + viewer.flyTo(entity) + }else { + model.orientation = orientation + } }) }) } else { @@ -113,13 +133,17 @@ submitForm() { this.$refs["form"].validate(valid => { console.log(this.form) - // if (valid) { - // this.$api.save('work/tower/', 'id', Object.assign({}, this.form)).then(res => { - // this.form = {} - // this.$emit('on-submit') - // this.open = false - // }) - // } + this.form.longitude = Number(this.form.longitude) + this.form.latitude = Number(this.form.latitude) + this.form.altitude = Number(this.form.altitude) + this.form.face = Number(this.form.face) + if (valid) { + this.$api.save('tower/device/', 'id', Object.assign({}, this.form)).then(res => { + this.form = {} + this.$emit('on-submit') + this.open = false + }) + } }); }, cancel() { @@ -136,14 +160,36 @@ this.modelListData = res.rows || [] }) }, + change(id){ + console.log(id) + let url = this.modelListData.filter(item=>item.id == id)[0].modelRoute + console.log(url) + this.modelUrl = url + }, gettiles3dCam(){ console.log(this.form) + if(!this.form.face) { + return this.$message.error('璇疯緭鍏ユ湞鍚�') + } + if (!this.form.longitude) { + this.$message.error("璇疯緭鍏ョ粡搴�"); + return; + } + if (!this.form.latitude) { + this.$message.error("璇疯緭鍏ョ含搴�"); + return; + } + if (!this.form.altitude) { + this.$message.error("璇疯緭鍏ラ珮搴�"); + return; + } //鍔ㄦ�佺粡绾害鏈濆悜 鍔犺浇妯″瀷浣嶇疆棰勮 - const position = Cesium.Cartesian3.fromDegrees(0, 0, 0); + // const position = Cesium.Cartesian3.fromDegrees(0, 0, 0); + const position = Cesium.Cartesian3.fromDegrees(this.form.longitude, this.form.latitude, this.form.altitude); // 璁剧疆妯″瀷鏂瑰悜锛堝彲閫夛級 // const heading = Cesium.Math.toRadians(135); // 鏈濅笢鍗楁柟鍚� let model = viewer.entities.getById("MyModel"); - const heading = Cesium.Math.toRadians(this.form.direction); // 鏈濅笢鍗楁柟鍚� + const heading = Cesium.Math.toRadians(this.form.face); // 鏈濅笢鍗楁柟鍚� const pitch = 0; const roll = 0; const orientation = Cesium.Transforms.headingPitchRollQuaternion( @@ -158,7 +204,7 @@ position: position, orientation: orientation, model: { - uri: "/Model/tower.glb", // 鏇挎崲鎴愪綘鐨勬ā鍨嬭矾寰� + uri: this.modelUrl, // 鏇挎崲鎴愪綘鐨勬ā鍨嬭矾寰� scale: 1000, }, }); @@ -166,8 +212,6 @@ }else { model.orientation = orientation } - - } }, mounted() { diff --git a/src/views/system/device/index.vue b/src/views/system/device/index.vue index ab8c6f5..dcc511d 100644 --- a/src/views/system/device/index.vue +++ b/src/views/system/device/index.vue @@ -11,9 +11,9 @@ </template> <template #operator="{ row }"> <el-button size="mini" type="text" icon="el-icon-edit" - @click="handleUpdate(row)">淇敼</el-button> + @click.stop="handleUpdate(row)">淇敼</el-button> <el-button size="mini" type="text" icon="el-icon-delete" - @click="handleDelete(row)">鍒犻櫎</el-button> + @click.stop="handleDelete(row)">鍒犻櫎</el-button> </template> </AppTable> </el-col> @@ -50,15 +50,15 @@ tableColumns: [ { label: '璁惧鍚嶇О', - prop: 'name' + prop: 'deviceName' }, { label: '鎵�灞炵嚎璺�', - prop: 'createBy' + prop: 'belongingRoute' }, { label: '鏈濆悜', - prop: 'createTime' + prop: 'face' }, { label: '鎿嶄綔', @@ -98,6 +98,7 @@ }, // 鍒犻櫎鏁版嵁 handleDelete(row) { + console.log(row) const ids = row.id || this.ids const name = row.name || '' this.$api.deleteByName('/tower/device', ids,name).then(res => { @@ -108,10 +109,10 @@ handleImport () { this.$refs.deviceImportDialog.show() }, - clickRow(row){ - console.log(row) - this.showMap =true - }, + // clickRow(row){ + // console.log(row) + // this.showMap =true + // }, }, }; </script> diff --git a/src/views/system/model/components/modelDialog.vue b/src/views/system/model/components/modelDialog.vue index 0ed2cac..fda976d 100644 --- a/src/views/system/model/components/modelDialog.vue +++ b/src/views/system/model/components/modelDialog.vue @@ -14,7 +14,7 @@ </el-select> </el-form-item> <el-form-item label="鏂囦欢涓婁紶" prop="modelRoute"> - <el-upload class="upload-demo" action="" :auto-upload="false" accept="" + <el-upload class="upload-demo" action="" :auto-upload="false" accept=".glb" :on-change="getFile" :limit="1"> <div class="icon-bg-box icon-bg-box1"> <el-icon ><PictureFilled /> </el-icon> @@ -42,6 +42,7 @@ <script> import cesiumMapNoSelect from "@/components/common/cesiumMapNoSelect.vue"; +import { uploadFile} from "@/api/system/device" export default { name: 'modelManage', components: { cesiumMapNoSelect }, @@ -106,7 +107,7 @@ // formData.append("type", 'pic'); //涓婁紶鍥剧墖鐨勬帴鍙� uploadFile(formData).then(res => { - this.$set(this.form, 'modelRoute', res.data.url) + this.$set(this.form, 'modelRoute', res.url) }) }, handleSelectAddress(data) { @@ -123,13 +124,14 @@ submitForm() { this.$refs["form"].validate(valid => { console.log(this.form) - // if (valid) { - // this.$api.save('work/tower/', 'id', Object.assign({}, this.form)).then(res => { - // this.form = {} - // this.$emit('on-submit') - // this.open = false - // }) - // } + + if (valid) { + this.$api.save('tower/model/', 'id', Object.assign({}, this.form)).then(res => { + this.form = {} + this.$emit('on-submit') + this.open = false + }) + } }); }, addModel(){ diff --git a/src/views/system/model/index.vue b/src/views/system/model/index.vue index 16bce28..420e5a5 100644 --- a/src/views/system/model/index.vue +++ b/src/views/system/model/index.vue @@ -9,6 +9,9 @@ <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">鏂板妯″瀷</el-button> </template> + <template #modelType="{ row }"> + <DictTag :options="dict.type.model_type" :value="row.modelType"></DictTag> + </template> <template #operator="{ row }"> <el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleUpdate(row)">淇敼</el-button> @@ -16,12 +19,12 @@ @click.stop="handleDelete(row)">鍒犻櫎</el-button> </template> </AppTable> - </el-col> - <el-col :span="12" :xs="24" v-if="showMap"> + </el-col> + <el-col :span="12" :xs="24" v-if="showMap"> <CesiumMap ></CesiumMap> </el-col> </el-row> - + <modelDialog ref="modelDialog" @on-submit="$refs.AppTable.getData()" :model_type="dict.type.model_type"></modelDialog> </div> </template> @@ -51,7 +54,8 @@ }, { label: '妯″瀷绫诲瀷', - prop: 'modelType' + type: 'slot', + slotName: 'modelType' }, { label: '妯″瀷璺緞', @@ -107,7 +111,7 @@ }, clickRow(row){ console.log(row) - this.showMap =true + // this.showMap =true }, }, }; diff --git a/src/views/system/project/index.vue b/src/views/system/project/index.vue new file mode 100644 index 0000000..5ae9074 --- /dev/null +++ b/src/views/system/project/index.vue @@ -0,0 +1,5 @@ + <template> + <div> + 椤圭洰绠$悊椤甸潰 + </div> + </template> \ No newline at end of file diff --git a/src/views/system/shootPoint/components/chooseModelDialog.vue b/src/views/system/shootPoint/components/chooseModelDialog.vue index 4fb6eb0..45cb680 100644 --- a/src/views/system/shootPoint/components/chooseModelDialog.vue +++ b/src/views/system/shootPoint/components/chooseModelDialog.vue @@ -6,12 +6,15 @@ width="70%"> <el-row :gutter="20"> <el-col :span="showMap ? 12 : 24" :xs="24"> - <AppTable ref="AppTable" :showDeptSearch="false" :url="'device/towers/list'" :tableColumns="tableColumns" :showSearchBtn="false"> + <AppTable ref="AppTable" :showDeptSearch="false" :url="'tower/model/list'" :tableColumns="tableColumns" :showSearchBtn="false"> <template #operator="{ row }"> <el-button size="mini" type="text" @click="clickRow(row)">棰勮</el-button> <el-button size="mini" type="text" @click="chooseRow(row)">閫夋嫨</el-button> + </template> + <template #modelType="{ row }"> + <DictTag :options="dict.type.model_type" :value="row.modelType"></DictTag> </template> </AppTable> </el-col> @@ -29,6 +32,7 @@ import CesiumMap from "../../../../utils/components/cesium-map.vue"; export default { name:'chooseModelDialog', + dicts: ['model_type'], components: { CesiumMap }, @@ -39,15 +43,16 @@ tableColumns: [ { label: '妯″瀷鍚嶇О', - prop: 'name' + prop: 'modelName' }, - { + { label: '妯″瀷绫诲瀷', - prop: 'createBy' + type: 'slot', + slotName: 'modelType' }, { label: '妯″瀷璺緞', - prop: 'createTime' + prop: 'modelRoute' }, { label: '鎿嶄綔', @@ -69,6 +74,7 @@ this.$emit('getRowData',row) }, clickRow(row){ + console.log(row) this.showMap =true setTimeout(()=>{ const position = Cesium.Cartesian3.fromDegrees(0, 0, 0); @@ -90,7 +96,7 @@ position: position, orientation: orientation, model: { - uri: "/Model/tower.glb", // 鏇挎崲鎴愪綘鐨勬ā鍨嬭矾寰� + uri: row.modelRoute, // 鏇挎崲鎴愪綘鐨勬ā鍨嬭矾寰� scale: 1000, }, }); diff --git a/src/views/system/shootPoint/components/shootPointDialog.vue b/src/views/system/shootPoint/components/shootPointDialog.vue index 621e5d8..937466f 100644 --- a/src/views/system/shootPoint/components/shootPointDialog.vue +++ b/src/views/system/shootPoint/components/shootPointDialog.vue @@ -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" @renderData="renderData" :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,13 @@ import CesiumMap from "../../../../utils/components/cesium-map.vue"; import InitMap from "../../../../utils/components/init-map.vue"; import ChooseModelDialog from './chooseModelDialog.vue'; +// const centerCartesian = Cesium.Cartesian3.fromDegrees(0,0, 236) +// const centerCartesian = Cesium.Cartesian3.fromDegrees(125.1949, 46.5143, 0) + let globalon = 125.1949 +let globalat = 46.5143 +const centerCartesian = Cesium.Cartesian3.fromDegrees(globalon,globalat , 236) +let relativeData export default{ name:'shootPointDialog', components: { @@ -109,28 +67,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 +76,294 @@ initialCameraPosition: null, initialCameraOrientation: null, animationFrameId: null, - showMap:false + showMap:false, + towerUrl:null, + chooseModelId:null } }, + mounted(){ + }, methods:{ + renderRelativePoints(viewer, data) { + const airPoints = []; + + data.forEach(item => { + const groundRel = item.relativePosition; + const groundPos = Cesium.Cartesian3.add( + centerCartesian, + new Cesium.Cartesian3(groundRel.x, groundRel.y, groundRel.z), + new Cesium.Cartesian3() + ); + this.addPoint(viewer, groundPos, Cesium.Color.BLUE, item.label); + + item.children?.forEach(child => { + const airRel = child.relativePosition; + const airPos = Cesium.Cartesian3.add( + centerCartesian, + new Cesium.Cartesian3(airRel.x, airRel.y, airRel.z), + new Cesium.Cartesian3() + ); + this.addPoint(viewer, airPos, Cesium.Color.YELLOW, child.label); + + // 鍦伴潰鐐瑰埌绌轰腑鐐圭敤铏氱嚎 + this.drawLine(viewer, [groundPos, airPos], Cesium.Color.GRAY, true); + + airPoints.push(airPos); + }); + }); + + // 绌轰腑鐐逛箣闂磋繛榛勭嚎 + if (airPoints.length > 1) { + this.drawLine(viewer, airPoints, Cesium.Color.YELLOW); + } + }, + 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, + } + }); + }, + //绌洪棿鍧愭爣鍙嶆覆鏌� + renderData(viewerM){ + let data = [ + { + "id": "197ced8ed37d58af", + "label": "鍦伴潰鐐�0", + "longitude": 125.15396706149502, + "latitude": 46.5542193007498, + "height": 110.34582699579633, + "children": [ + { + "id": "197ced8ed37d12bf", + "label": "绌轰腑鐐�0", + "longitude": 125.15269101779384, + "latitude": 46.554404555297005, + "height": 110.34669117272557, + "relativePosition": { + "x": 147.6013223491609, + "y": -21.93333655036986, + "z": -75.59047747310251 + } + } + ], + "relativePosition": { + "x": 58.98418062273413, + "y": -66.05175063293427, + "z": -89.7526711942628 + } + }, + { + "id": "197ced8ed372ae58", + "label": "鍦伴潰鐐�1", + "longitude": 125.15396775899208, + "latitude": 46.55421205599431, + "height": 129.0598176992881, + "children": [ + { + "id": "197ced8ed3796b97", + "label": "绌轰腑鐐�1", + "longitude": 125.15267500755259, + "latitude": 46.55432990371885, + "height": 129.06068032390132, + "relativePosition": { + "x": 137.72684245044366, + "y": -5.778328162617981, + "z": -67.71026689186692 + } + } + ], + "relativePosition": { + "x": 51.19412293517962, + "y": -55.08268230734393, + "z": -76.7196572907269 + } + }, + { + "id": "197ced8ed373aacd", + "label": "鍦伴潰鐐�2", + "longitude": 125.15398622045456, + "latitude": 46.55420774953827, + "height": 147.7039314240401, + "children": [ + { + "id": "197ced8ed3744bed", + "label": "绌轰腑鐐�2", + "longitude": 125.15268854335208, + "latitude": 46.5542961263164, + "height": 147.70478259476405, + "relativePosition": { + "x": 127.92680113529786, + "y": 6.335606334730983, + "z": -56.756238551810384 + } + } + ], + "relativePosition": { + "x": 42.45445924857631, + "y": -45.13116115285084, + "z": -63.51276256516576 + } + }, + { + "id": "id_v5g7eyc8", + "label": "鍦伴潰鐐�2-鍔犻珮", + "longitude": 125.15398622045456, + "latitude": 46.55420774953827, + "height": 147.7039314240401, + "children": [ + { + "id": "id_6w8bt6y5", + "label": "绌轰腑鐐�2-鍔犻珮", + "longitude": 125.15268854335208, + "latitude": 46.5542961263164, + "height": 197.70478259476405, + "relativePosition": { + "x": 108.13033775659278, + "y": 34.448136328253895, + "z": -20.454920462332666 + } + } + ], + "relativePosition": { + "x": 42.45445924857631, + "y": -45.13116115285084, + "z": -63.51276256516576 + } + }, + { + "id": "id_wztyoy7w", + "label": "鍦伴潰鐐�3", + "longitude": 125.15421307297069, + "latitude": 46.55421685854876, + "height": 148.48833812454288, + "children": [ + { + "id": "id_cu78b9f1", + "label": "绌轰腑鐐�3-鍔犻珮", + "longitude": 125.15548763490776, + "latitude": 46.55440688016316, + "height": 198.48919020619783, + "relativePosition": { + "x": -62.53922047605738, + "y": -96.01450884295627, + "z": -11.418861056677997 + } + } + ], + "relativePosition": { + "x": 28.343377863056958, + "y": -55.307947248686105, + "z": -62.246930407360196 + } + }, + { + "id": "197ced8ed37d0c3c", + "label": "鍦伴潰鐐�3", + "longitude": 125.15421307297069, + "latitude": 46.55421685854876, + "height": 148.48833812454288, + "children": [ + { + "id": "197ced8ed376225d", + "label": "绌轰腑鐐�3", + "longitude": 125.15548763490776, + "latitude": 46.55440688016316, + "height": 148.48919020619783, + "relativePosition": { + "x": -42.741424133535475, + "y": -124.12601430807263, + "z": -47.72024560905993 + } + } + ], + "relativePosition": { + "x": 28.343377863056958, + "y": -55.307947248686105, + "z": -62.246930407360196 + } + }, + { + "id": "197ced8ed378f22b", + "label": "鍦伴潰鐐�4", + "longitude": 125.15423241198647, + "latitude": 46.55421195661101, + "height": 129.07723014528972, + "children": [ + { + "id": "197ced8ed37bbaff", + "label": "绌轰腑鐐�4", + "longitude": 125.1555253737729, + "latitude": 46.55432870085922, + "height": 129.07809286219634, + "relativePosition": { + "x": -41.05480555212125, + "y": -131.5471526850015, + "z": -67.78957635723054 + } + } + ], + "relativePosition": { + "x": 34.58874865854159, + "y": -66.75211867084727, + "z": -76.71461268886924 + } + }, + { + "id": "197ced8ed372f8ad", + "label": "鍦伴潰鐐�5", + "longitude": 125.15423571155253, + "latitude": 46.55422768619577, + "height": 111.12748104722147, + "children": [ + { + "id": "197ced8ed373e993", + "label": "绌轰腑鐐�5", + "longitude": 125.15551594222936, + "latitude": 46.554398406019274, + "height": 112.12216624922397, + "relativePosition": { + "x": -30.5103326481767, + "y": -145.26342066843063, + "z": -74.77150713000447 + } + } + ], + "relativePosition": { + "x": 42.219932773150504, + "y": -78.02784454869106, + "z": -88.54415378533304 + } + } +] + this.renderRelativePoints(viewerM,data) + }, handleClose(){ this.dialogVisible = false }, @@ -158,15 +378,10 @@ }, 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 +394,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 +409,14 @@ 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) + // this.conversionPosition() + this.dealData() }, insertRaisedPoints(data, centerLon, centerLat, centerHeight, radius = 130) { const center = Cesium.Cartesian3.fromDegrees(centerLon, centerLat, centerHeight); @@ -346,35 +564,12 @@ }, 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.chooseModelId = row.id + this.showMap =false + this.$nextTick(()=>{ + this.towerUrl = row.modelRoute + this.showMap = true + }) }, beforeDestroy() { // 娓呯悊 RAF 鍜屼簨浠� @@ -407,8 +602,89 @@ }, handleDrop (draggingNode, dropNode, dropType, ev) { console.log('鎷栨嫿瀹屾垚', { draggingNode, dropNode, dropType }) - // Element-UI 宸茬粡甯綘鎶� treeData 鐨勯『搴忚皟濂戒簡锛� - // 濡傛灉瑕佷繚瀛橀『搴忓埌鍚庣锛岄亶鍘� treeData 鍙戣姹傚嵆鍙� + }, + toRelativePosition(lon, lat, height, centerCartesian) { + const worldPos = Cesium.Cartesian3.fromDegrees(lon, lat, height); + const relative = new Cesium.Cartesian3(); + Cesium.Cartesian3.subtract(worldPos, centerCartesian, relative); + return relative; + }, + wgs84ToCartesian(longitude, latitude, height) { + return Cesium.Cartesian3.fromDegrees(longitude, latitude, height); + }, + getOffsetFromTower(lon, lat, height, tower) { + const point = this.wgs84ToCartesian(lon, lat, height); + const towerPoint = this.wgs84ToCartesian(tower.longitude, tower.latitude, tower.height); + + const offset = Cesium.Cartesian3.subtract(point, towerPoint, new Cesium.Cartesian3()); + return { + x: offset.x, + y: offset.y, + z: offset.z + }; + }, + dealData(){ + const rawData = this.treeData + let tower ={ + longitude:globalon, + latitude:globalat, + height:0 + } + relativeData= rawData.forEach(item => { + item.offset = this.getOffsetFromTower(item.longitude, item.latitude, item.height, tower); + + item.children?.forEach(child => { + child.offset = this.getOffsetFromTower(child.longitude, child.latitude, child.height, tower); + }); + }) + console.log(relativeData) + }, + // conversionPosition(){ + // const rawData = this.treeData + // // const centerCartesian = Cesium.Cartesian3.fromDegrees(0,0, 236); + // const centerCartesian = Cesium.Cartesian3.fromDegrees(globalon, globalat, 236); + // relativeData= rawData.map(ground => { + // const relativeGround = this.toRelativePosition( + // ground.longitude, + // ground.latitude, + // ground.height, + // centerCartesian + // ); + + // const children = ground.children?.map(child => { + // const relativeChild = this.toRelativePosition( + // child.longitude, + // child.latitude, + // child.height, + // centerCartesian + // ); + // return { + // ...child, + // relativePosition: { + // x: relativeChild.x, + // y: relativeChild.y, + // z: relativeChild.z, + // } + // }; + // }); + + // return { + // ...ground, + // relativePosition: { + // x: relativeGround.x, + // y: relativeGround.y, + // z: relativeGround.z, + // }, + // children + // }; + // }); + // console.log(relativeData) + // }, + submit(){ + // this.dialogVisible = false + this.$emit('close') + console.log(this.chooseModelId) + console.log(relativeData) } } } diff --git a/src/views/system/shootPoint/index.vue b/src/views/system/shootPoint/index.vue index a8467c8..8276101 100644 --- a/src/views/system/shootPoint/index.vue +++ b/src/views/system/shootPoint/index.vue @@ -2,7 +2,7 @@ <div class="app-container"> <el-row :gutter="20"> <el-col :span="showMap ? 12 : 24" :xs="24"> - <AppTable ref="AppTable" selection :showDeptSearch="false" :url="'device/towers/list'" :tableColumns="tableColumns" + <AppTable ref="AppTable" selection :showDeptSearch="false" :url="'tower/point/list'" :tableColumns="tableColumns" :tableFilter="tableFilter" @clickRow="clickRow"> <template #operatorBox="{ row }"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @@ -30,7 +30,7 @@ import CesiumMap from "../../../utils/components/cesium-map.vue"; export default { name: "towers", - dicts: ['model_type'], + dicts: ['model_typpe'], components: { shootPointDialog, CesiumMap @@ -106,10 +106,10 @@ handleExport() { this.$refs.AppTable.exportExcel() }, - clickRow(row){ - console.log(row) - this.showMap =true - }, + // clickRow(row){ + // console.log(row) + // this.showMap =true + // }, close(){ this.showDialog =false } diff --git a/vue.config.js b/vue.config.js index 08c07b9..11f5832 100644 --- a/vue.config.js +++ b/vue.config.js @@ -9,7 +9,7 @@ const name = process.env.VUE_APP_TITLE || '鐢靛姏宸℃鑸嚎瑙勫垝'; // 缃戦〉鏍囬 -const baseUrl = 'http://192.168.1.113:8080'; // 鍚庣鎺ュ彛 +const baseUrl = 'http://192.168.1.5:7070'; // 鍚庣鎺ュ彛 const port = process.env.port || process.env.npm_config_port || 80; // 绔彛 -- Gitblit v1.9.3