| | |
| | | <div class="cesiumContent"> |
| | | <div class="flyAction"> |
| | | <div class="actionName">{{currentAction ?currentAction.type :'' }}</div> |
| | | <i class="el-icon-delete" /> |
| | | <i class="el-icon-delete" @click="deleteAction(chooseItem)" /> |
| | | </div> |
| | | <div class="flayDataAll"> |
| | | <div class="flyData"> |
| | |
| | | </div> |
| | | |
| | | </div> |
| | | <div class="cesiumButtonGroup"> |
| | | <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> |
| | | </div> |
| | | |
| | | <!-- <div class="key-container"> |
| | | <div class="arrow-row"> |
| | | <div |
| | |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | |
| | | <el-button id="groundPoi" class="groundPoi" @click="addGroundPoi()" type="info" plain >地面点</el-button> |
| | | <div class="cesiumButtonGroup"> |
| | | <el-input v-model="mergeNumber" placeholder="合并范围" type="number" style="width: 120px;"></el-input> |
| | | <el-button @click="mergePoint()" type="success">合并</el-button> |
| | | </div> |
| | | <!-- 动态坐标、动态相机参数显示 --> |
| | | <!-- <div id="moveResult" class="moveResult"> |
| | | <div id="moveResultCon" class="moveResultCon"></div> |
| | |
| | | let pois = [globalon, globalat,0] |
| | | let cameraVideo |
| | | let ScopeElement; //光轴、视频 |
| | | let preVideoScopePrimitiveArrTie = []; |
| | | // let preVideoScopePrimitiveArrTie = []; |
| | | let scratchSetViewMatrix3 = new Cesium.Matrix3(); |
| | | let chooseId |
| | | // let pois = [0, 0,0] |
| | |
| | | pointFly: { lon: 0, lat: 0, height: 0 }, |
| | | rowData:null, |
| | | time: 10, |
| | | takePhoto: '111', // 初始数据 |
| | | takePhoto: '默认名称', // 初始数据 |
| | | newTakePhoto: '', // 编辑时的新数据 |
| | | isEditingPhoto: false, // 控制是否处于编辑状态 |
| | | takeVideo: '111', // 初始数据 |
| | | takeVideo: '默认名称', // 初始数据 |
| | | newTakeVideo: '', // 编辑时的新数据 |
| | | isEditingVideo: false, // 控制是否处于编辑状态 |
| | | actionCounter:0, |
| | | currentAction:null |
| | | currentAction:null, |
| | | preVideoScopePrimitiveArrTie:[] |
| | | } |
| | | }, |
| | | mounted(){ |
| | |
| | | } |
| | | }) |
| | | const result = Object.keys(grouped).map((key, idx) => { |
| | | console.log(group) |
| | | const group = grouped[key]; |
| | | const positionGround = group.groundPoiId.getValue(Cesium.JulianDate.now()) |
| | | const positionAerialPo = group.aerialPoiId.getValue(Cesium.JulianDate.now()) |
| | |
| | | pmObj.name = data.name; |
| | | pmObj.primitive = cameraVideo; |
| | | viewerM.scene.primitives.add(cameraVideo); |
| | | preVideoScopePrimitiveArrTie.push(pmObj); |
| | | preVideoScopePrimitiveArrTie.map((item)=>{ |
| | | this.preVideoScopePrimitiveArrTie.push(pmObj); |
| | | this.preVideoScopePrimitiveArrTie.map((item)=>{ |
| | | if(item.id != chooseId){ |
| | | item.primitive.show = false |
| | | } |
| | |
| | | document.getElementById('cammoveResultCon').innerHTML = camResult; |
| | | // 计算距离(单位:米) |
| | | const distanceBetween = Cesium.Cartesian3.distance(point1, point2) |
| | | preVideoScopePrimitiveArrTie.map((item)=>{ |
| | | this.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 |
| | |
| | | DealVisualCone(data,node){ |
| | | this.rowData = data |
| | | console.log(data) |
| | | this.pointGround = { |
| | | console.log(this.preVideoScopePrimitiveArrTie) |
| | | this.pointFly = { |
| | | lon:data.children[0].longitude, |
| | | lat:data.children[0].latitude, |
| | | height:data.children[0].height |
| | | } |
| | | this.pointFly = { |
| | | this.pointGround = { |
| | | lon:data.longitude, |
| | | lat:data.latitude, |
| | | height:data.height |
| | | } |
| | | if(data.children && data.children?.length > 0) { |
| | | preVideoScopePrimitiveArrTie.map((item)=>{ |
| | | this.preVideoScopePrimitiveArrTie.map((item)=>{ |
| | | if(item.name != data.children[0].label){ |
| | | item.primitive.show = false |
| | | }else{ |
| | |
| | | } |
| | | }) |
| | | }else { |
| | | preVideoScopePrimitiveArrTie.map((item)=>{ |
| | | this.preVideoScopePrimitiveArrTie.map((item)=>{ |
| | | if(item.name != data.label){ |
| | | item.primitive.show = false |
| | | }else { |
| | |
| | | editAction(action){ |
| | | // 点击左侧小图标,右侧切换到该 action |
| | | this.currentAction = action; |
| | | console.log(action) |
| | | console.log(this.currentAction) |
| | | if(action.type == '悬停') { |
| | | this.time = action.extra.value |
| | | } else if(action.type == '拍照'){ |
| | | this.newTakePhoto = action.extra.value |
| | | this.takePhoto = action.extra.value |
| | | }else if(action.type == '开始录像'){ |
| | | this.newTakeVideo = action.extra.value |
| | | this.takeVideo = action.extra.value |
| | | }else if(action.type == '结束录像'){ |
| | | } |
| | | }, |
| | | deleteAction(item){ |
| | | console.log(item.children[0].actions) |
| | | if(!this.currentAction) return; |
| | | console.log(this.currentAction) |
| | | const point = this.currentAction.point; |
| | | // 从 point.actions 中删除 |
| | | const index = item.children[0].actions.findIndex(a => a.id === this.currentAction.id); |
| | | if(index !== -1){ |
| | | item.children[0].actions.splice(index, 1); |
| | | } |
| | | |
| | | this.$message.success("已删除操作"); |
| | | this.currentAction = null; |
| | | this.$emit('dealAction',item) |
| | | }, |
| | | changeTime(val) { |
| | | this.time += val; |
| | |
| | | console.log(this.newTakePhoto) |
| | | this.takePhoto = this.newTakePhoto; // 点击对号时,更新数据 |
| | | this.isEditingPhoto = false; // 结束编辑 |
| | | this.currentAction.extra.value = this.takePhoto |
| | | this.currentAction.extra.value = this.newTakePhoto |
| | | window.addEventListener("keydown", this.onKeyDown); |
| | | window.addEventListener("keyup", this.onKeyUp); |
| | | }, |
| | | cancelEditing() { |
| | | this.newTakePhoto = this.takePhoto; // 点击取消时,恢复原数据 |
| | | this.isEditingPhoto = false; // 结束编辑 |
| | | window.addEventListener("keydown", this.onKeyDown); |
| | | window.addEventListener("keyup", this.onKeyUp); |
| | | }, |
| | | startEditingVideo() { |
| | | this.newTakeVideo = this.takeVideo; // 进入编辑时,保存当前的值 |
| | | this.isEditingVideo = true; |
| | | window.removeEventListener("keydown", this.onKeyDown); |
| | | window.removeEventListener("keyup", this.onKeyUp); |
| | | }, |
| | | validateVideoInput() { |
| | | this.takeVideo = this.newTakeVideo; // 点击对号时,更新数据 |
| | | this.isEditingVideo = false; // 结束编辑 |
| | | this.currentAction.extra.value = this.takeVideo |
| | | this.currentAction.extra.value = this.newTakeVideo |
| | | window.addEventListener("keydown", this.onKeyDown); |
| | | window.addEventListener("keyup", this.onKeyUp); |
| | | }, |
| | | cancelVideoEditing() { |
| | | this.newTakeVideo = this.takeVideo; // 点击取消时,恢复原数据 |
| | | this.isEditingVideo = false; // 结束编辑 |
| | | window.addEventListener("keydown", this.onKeyDown); |
| | | window.addEventListener("keyup", this.onKeyUp); |
| | | }, |
| | | doAction(point, type){ |
| | | console.log(point) |
| | | this.actionCounter++; |
| | | let action = { |
| | | id: this.actionCounter, |
| | |
| | | action.extra.value = 'stopVideo' |
| | | } |
| | | console.log(action) |
| | | point.actions.push(action); |
| | | point.children[0].actions.push(action); |
| | | console.log(point) |
| | | this.$emit('dealAction',point) |
| | | this.time = 10 |
| | | this.newTakePhoto = '111' |
| | | this.newTakeVideo = '111' |
| | | this.takeVideo = '111' |
| | | this.takePhoto = '111' |
| | | this.newTakePhoto = '默认名称' |
| | | this.newTakeVideo = '默认名称' |
| | | this.takeVideo = '默认名称' |
| | | this.takePhoto = '默认名称' |
| | | // 切换到右侧 |
| | | this.currentAction = action; |
| | | }, |
| | |
| | | |
| | | <style scoped> |
| | | |
| | | |
| | | .cesium-example{ |
| | | height: calc(100vh - 185px); |
| | | /* height: calc(100vh - 185px); */ |
| | | height: 100%; |
| | | } |
| | | #cesiumContainer { |
| | | margin: 0; |
| | |
| | | /* padding: 0 5px; */ |
| | | right: 10px; |
| | | /* top: 0px; */ |
| | | bottom: 80px; |
| | | bottom: 30px; |
| | | margin: 0; |
| | | width: 400px; |
| | | height: 300px; |
| | |
| | | } |
| | | .flayDataAll { |
| | | background-color:#232323; |
| | | height: calc(100% - 55px); |
| | | /* height: calc(100% - 55px); */ |
| | | height: calc(100% - 5px); |
| | | height: calc(100% + 15px); |
| | | width: 100%; |
| | | } |
| | | .flyData{ |
| | | width: calc(100% - 32px); |
| | | height: calc(100% - 55px); |
| | | /* height: calc(100% - 55px); */ |
| | | height: calc(100% - 5px); |
| | | margin: auto; |
| | | color: white; |
| | | } |
| | | .cesiumButtonGroup{ |
| | | position: absolute; |
| | | bottom: 0; |
| | | top: 15px; |
| | | left: 100px; |
| | | /* margin-top: 10px; |
| | | margin-left: 10px; */ |
| | | } |
| | | .groundPoi { |
| | | position: absolute; |
| | | top: 15px; |
| | | left: 340px; |
| | | } |
| | | .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} |
| | |
| | | height: 300px; |
| | | position: absolute; |
| | | right: 10px; |
| | | bottom:80px; |
| | | bottom:30px; |
| | | /* background-color: red; */ |
| | | z-index: 9; |
| | | |