<template>
|
<div>
|
<el-dialog
|
title="拍摄点编辑"
|
:visible="dialogVisible"
|
append-to-body
|
fullscreen
|
:before-close="handleClose">
|
<el-row :gutter="6">
|
<el-col :span="4">
|
<el-card class="noScroll">
|
<div class="chooseModel">
|
<el-button type="primary" @click='chooseModel'>模型</el-button>
|
<div class="modelType">
|
模型名称：{{ modelName }}
|
</div>
|
<div>
|
模型类型：{{ templateType }}
|
</div>
|
<el-form label-width="70px" :model="form">
|
<el-form-item label="模板名称">
|
<el-input v-model="form.templateName"></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="modelTree">
|
<div class='modelTreeTitle'>巡检点目录</div>
|
<el-tabs v-model="activeName">
|
<el-tab-pane label="航点树" name="first">
|
<el-tree
|
class="filter-tree"
|
:data="treeData"
|
:props="defaultProps"
|
draggable
|
:allow-drop="allowDrop"
|
@node-drop="handleDrop"
|
default-expand-all
|
@node-click="handleNodeClick"
|
ref="tree">
|
</el-tree>
|
</el-tab-pane>
|
<el-tab-pane label="航点列表" name="second">
|
<div class="waypoint-panel">
|
|
<!-- 航点列表 -->
|
<div class="waypoints">
|
<div
|
v-for="(wp, index) in treeData"
|
:key="index"
|
class="waypoint-item"
|
:class="{ active: selectedIndex === index }"
|
@click="toggleSelect(wp,index)"
|
>
|
<div class="waypoint-header">
|
<i
|
class="el-icon-success"
|
></i>
|
<div class="waypoint-contnet">
|
<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.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==='变焦'" />
|
<!-- <i v-if="action.type==='拍照'" class="el-icon-video-camera"></i> -->
|
</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="20">
|
<InitMap v-if="showMap" @mergePoint="mergePoint" :towerUrl="towerUrl" :deviceData="deviceData" @dealTreeData="dealTreeData" ref="initMap" :chooseItem="chooseItem" @dealAction = 'dealAction'></InitMap>
|
</el-col>
|
</el-row>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="closeModal">取 消</el-button>
|
<el-button type="primary" @click="submit()" >确 定</el-button>
|
</span>
|
</el-dialog>
|
<ChooseModelDialog v-if="showModel" @cancel ='cancel' @getRowData="getRowData"></ChooseModelDialog>
|
</div>
|
</template>
|
<script>
|
import CesiumMap from "../../../../utils/components/cesium-map.vue";
|
import InitMap from "../../../../utils/components/init-map.vue";
|
import ChooseModelDialog from './chooseModelDialog.vue';
|
import { addPoint , getPointInfo} from "@/api/system/template"
|
let globalon = 0
|
let globalat = 0
|
let towerHeight = 45
|
//塔的朝向算法所用到的 旋转度数
|
let rotationAngle = Cesium.Math.toRadians(0)
|
const typeDictionary = {
|
"拍照": "01",
|
"变倍": "02",
|
"开始录像": "03",
|
'结束录像':'04',
|
"悬停": "05",
|
|
}
|
export default{
|
name:'shootPointDialog',
|
components: {
|
CesiumMap,
|
ChooseModelDialog,
|
InitMap
|
},
|
props: {
|
templateId: {
|
type: String,
|
defaule: null
|
}
|
},
|
data(){
|
return{
|
dialogVisible :true,
|
showModel:false,
|
treeData:[],
|
defaultProps: {
|
children: 'children',
|
label: 'label'
|
},
|
// 相机初始状态
|
initialCameraPosition: null,
|
initialCameraOrientation: null,
|
animationFrameId: null,
|
showMap:false,
|
towerUrl:null,
|
chooseModelId:null,
|
modelName:null,
|
templateType:null,
|
form:{},
|
deviceData:null,
|
activeName: 'first',
|
totalDistance: 3054.9,
|
totalTime: '5m 56s',
|
totalPoints: 11,
|
totalPhotos: 3,
|
waypoints:[],
|
selectedIndex:null,
|
chooseItem: null,
|
lastTableArr:[]
|
}
|
},
|
mounted(){
|
console.log(this.templateId)
|
if(this.templateId) {
|
//预览逻辑
|
getPointInfo(this.templateId).then(res=>{
|
if(res.code == 200 ) {
|
console.log(res.data)
|
this.getRowData(res.data)
|
let drawArr = this.convertToTree(res.data.ardListWayPointsLS)
|
setTimeout(() => {
|
//渲染时间问题 加个延时器
|
this.drawLines(drawArr)
|
}, 500);
|
}
|
})
|
}
|
},
|
methods:{
|
toggleSelect(data,index) {
|
this.chooseItem = data
|
console.log(this.treeData)
|
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 === 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(data)
|
},
|
// 计算 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轴向上
|
},
|
|
// 飞到 from 看向 to
|
flyToAndLookAt(from, to) {
|
const fromCartesian = Cesium.Cartesian3.fromDegrees(from[0], from[1], from[2]);
|
const toCartesian = Cesium.Cartesian3.fromDegrees(to[0], to[1], to[2]);
|
|
const heading = this.computeHeading(fromCartesian, toCartesian);
|
const pitch = this.computePitch(fromCartesian, toCartesian);
|
let viewer = window.viewerM
|
viewer.camera.flyTo({
|
destination: fromCartesian,
|
orientation: {
|
heading: heading,
|
pitch: pitch,
|
roll: 0.0
|
},
|
duration: 3
|
});
|
},
|
handleNodeClick(data,node) {
|
if(data.children && data.children.length >0) {
|
//点击父级
|
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);
|
} else {
|
//点击子级
|
const from = [data.longitude,data.latitude, data.height];
|
const to = [node.parent?.data?.longitude,node.parent?.data?.latitude, node.parent?.data?.height];
|
// this.flyToAndLookAt(from, to);
|
}
|
this.$refs.initMap.DealVisualCone(data,node)
|
},
|
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 {
|
ele.actions = []
|
}
|
})
|
this.waypoints = childrenArr
|
console.log(childrenArr)
|
console.log(this.treeData)
|
},
|
convertToTree(data) {
|
return data.map((item, index) => {
|
const parentId = 'air_' + index;
|
return {
|
id: parentId,
|
label: item.targetName,
|
longitude: item.longitude,
|
latitude: item.latitude,
|
height: item.altitude,
|
children: (item.ardGroundPoint || []).map((g, i) => {
|
return {
|
id: parentId + '_ground_' + i,
|
label: g.targetName,
|
longitude: g.longitude,
|
latitude: g.latitude,
|
height: g.height
|
}
|
})
|
}
|
});
|
},
|
drawLines(treeData) {
|
console.log(treeData)
|
console.log(window)
|
console.log(window.viewerM)
|
let viewer = window.viewerM
|
|
// 收集空中点位置
|
const airPositions = treeData.map(point => {
|
return Cesium.Cartesian3.fromDegrees(
|
point.longitude,
|
point.latitude,
|
point.height
|
);
|
});
|
|
// 1. 空中点之间用黄色实线连接
|
viewer.entities.add({
|
polyline: {
|
positions: airPositions,
|
width: 2,
|
material: Cesium.Color.YELLOW
|
}
|
});
|
|
// 2. 每个空中点与地面点用蓝色虚线连接
|
treeData.forEach(point => {
|
const airPos = Cesium.Cartesian3.fromDegrees(point.longitude, point.latitude, point.height);
|
point.children.forEach(child => {
|
const groundPos = Cesium.Cartesian3.fromDegrees(child.longitude, child.latitude, child.height);
|
viewer.entities.add({
|
polyline: {
|
positions: [airPos, groundPos],
|
width: 1,
|
material: new Cesium.PolylineDashMaterialProperty({
|
color: Cesium.Color.BLUE,
|
dashLength: 8
|
})
|
}
|
});
|
});
|
});
|
},
|
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
|
},
|
chooseModel(){
|
this.showModel = true
|
},
|
closeModal(){
|
this.$emit('close')
|
},
|
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;
|
});
|
},
|
//合并逻辑 将附近n米范围内的点合并 并且处理成数据
|
mergePoint(arr,mergeNumber,viewer){
|
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);
|
this.treeData = updated
|
const airPoints = []
|
this.treeData.forEach(item => {
|
const ground = item
|
const air = item.children[0]
|
|
// 地面点到7空中点 — 白色虚线
|
viewer.entities.add({
|
polyline: {
|
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
|
ground.longitude, ground.latitude, ground.height,
|
air.longitude, air.latitude, air.height
|
]),
|
width: 5,
|
material: new Cesium.PolylineDashMaterialProperty({
|
color: Cesium.Color.RED,
|
dashLength: 16.0
|
})
|
}
|
})
|
|
airPoints.push(air)
|
})
|
if (airPoints.length > 1) {
|
const positions = airPoints.map(p => [p.longitude, p.latitude, p.height]).flat()
|
viewer.entities.add({
|
polyline: {
|
positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions),
|
width: 5,
|
material: Cesium.Color.RED
|
}
|
})
|
}
|
console.log(this.treeData)
|
},
|
//数组 塔的精度 塔的纬度 塔的高度 半径
|
insertRaisedPoints(data, centerLon, centerLat, centerHeight, radius = 10) {
|
const center = Cesium.Cartesian3.fromDegrees(centerLon, centerLat, centerHeight);
|
const result = JSON.parse(JSON.stringify(data)); // 深拷贝避免污染原数据
|
const inserts = []; // 用于存储插入项及其目标位置
|
|
for (let i = 0; i < result.length - 1; i++) {
|
const pointA = result[i].children?.[0];
|
const pointB = result[i + 1].children?.[0];
|
|
if (!pointA || !pointB) continue;
|
|
const cartA = Cesium.Cartesian3.fromDegrees(pointA.longitude, pointA.latitude, pointA.height);
|
const cartB = Cesium.Cartesian3.fromDegrees(pointB.longitude, pointB.latitude, pointB.height);
|
|
const closest = this.closestPointOnSegment(cartA, cartB, center);
|
const distance = Cesium.Cartesian3.distance(closest, center);
|
console.log(distance)
|
if (distance < radius) {
|
// 对第 i 个点插入新数据
|
const groundA = result[i];
|
const raisedA = {
|
id: this.generateId(),
|
label: groundA.label+ "-加高111",
|
longitude: groundA.longitude,
|
latitude: groundA.latitude,
|
height: groundA.height,
|
children: [
|
{
|
...pointA,
|
id: this.generateId(),
|
label: pointA.label + "-加高2222",
|
height: pointA.height + 50,
|
actions:[]
|
}
|
]
|
};
|
inserts.push({ index: i + 1, item: raisedA });
|
|
// 对第 i+1 个点插入新数据
|
const groundB = result[i + 1];
|
const raisedB = {
|
id: this.generateId(),
|
label: groundB.label,
|
longitude: groundB.longitude,
|
latitude: groundB.latitude,
|
height: groundB.height,
|
children: [
|
{
|
...pointB,
|
id: this.generateId(),
|
label: pointB.label + "-加高3333",
|
height: pointB.height + 50,
|
actions:[]
|
}
|
]
|
};
|
inserts.unshift({ index: i + 2, item: raisedB }); // 注意插入后下标需要 +1
|
i++; // 跳过已处理对，避免重复
|
}
|
}
|
|
// 逆序插入，避免下标错位
|
inserts.reverse().forEach(({ index, item }) => {
|
result.splice(index, 0, item);
|
});
|
|
return result;
|
},
|
|
closestPointOnSegment(A, B, P) {
|
const AB = Cesium.Cartesian3.subtract(B, A, new Cesium.Cartesian3());
|
const AP = Cesium.Cartesian3.subtract(P, A, new Cesium.Cartesian3());
|
const ab2 = Cesium.Cartesian3.dot(AB, AB);
|
const ap_ab = Cesium.Cartesian3.dot(AP, AB);
|
const t = Cesium.Math.clamp(ap_ab / ab2, 0.0, 1.0);
|
const result = new Cesium.Cartesian3();
|
Cesium.Cartesian3.multiplyByScalar(AB, t, result);
|
return Cesium.Cartesian3.add(A, result, result);
|
},
|
generateId() {
|
return 'id_' + Math.random().toString(36).substring(2, 10);
|
},
|
replaceCloseChildrenWithHighestPoint(data, maxDistance ) {
|
const childrenPoints = [];
|
|
// 收集所有 children 点及其父引用
|
data.forEach(parent => {
|
parent.children.forEach(child => {
|
childrenPoints.push({
|
parent,
|
child
|
});
|
});
|
});
|
|
const groups = [];
|
|
// 标记是否被分组
|
const visited = new Array(childrenPoints.length).fill(false);
|
|
for (let i = 0; i < childrenPoints.length; i++) {
|
if (visited[i]) continue;
|
|
const group = [childrenPoints[i]];
|
visited[i] = true;
|
|
const pointA = Cesium.Cartesian3.fromDegrees(
|
childrenPoints[i].child.longitude,
|
childrenPoints[i].child.latitude
|
);
|
|
for (let j = i + 1; j < childrenPoints.length; j++) {
|
if (visited[j]) continue;
|
|
const pointB = Cesium.Cartesian3.fromDegrees(
|
childrenPoints[j].child.longitude,
|
childrenPoints[j].child.latitude
|
);
|
|
const distance = Cesium.Cartesian3.distance(pointA, pointB);
|
if (distance <= maxDistance) {
|
group.push(childrenPoints[j]);
|
visited[j] = true;
|
}
|
}
|
|
groups.push(group);
|
}
|
|
// 替换为最高的点
|
groups.forEach(group => {
|
let highest = group[0].child;
|
group.forEach(item => {
|
if (item.child.height > highest.height) {
|
highest = item.child;
|
}
|
});
|
|
// 替换所有该组中的 children
|
group.forEach(item => {
|
item.parent.children = [Object.assign({}, highest)]; // 深拷贝防止引用混乱
|
});
|
});
|
|
return data;
|
},
|
getRowData(row){
|
console.log(row)
|
this.modelName = row.modelName
|
this.templateType = row.modelType
|
this.deviceData = row
|
if(this.templateId){
|
this.form.templateName = row.templateName || ''
|
}
|
this.chooseModelId = row.id
|
towerHeight = row.modelHeight || 45
|
this.showMap =false
|
this.$nextTick(()=>{
|
if(this.templateId){
|
this.towerUrl = row.ardTowerModel.modelRoute
|
}else {
|
this.towerUrl = row.modelRoute
|
}
|
this.showMap = true
|
})
|
},
|
beforeDestroy() {
|
// 清理 RAF 和事件
|
cancelAnimationFrame(this.animationFrameId);
|
document.removeEventListener("keydown", this.onKeyDown);
|
document.removeEventListener("keyup", this.onKeyUp);
|
},
|
allowDrag (draggingNode) {
|
// 例如根节点也允许拖动，这里直接返回 true
|
return true
|
},
|
allowDrop (draggingNode, dropNode, dropType) {
|
if (dropType === 'inner') return false
|
|
const dragParent = draggingNode.parent
|
const dropParent = dropNode.parent
|
|
// 如果都是顶级节点（parent 为 null），允许互换
|
if (!dragParent && !dropParent) {
|
return dropType === 'prev' || dropType === 'next'
|
}
|
|
// 如果有父节点，必须是同一个父节点
|
if (dragParent && dropParent && dragParent === dropParent) {
|
return dropType === 'prev' || dropType === 'next'
|
}
|
|
// 其他情况不允许
|
return false
|
},
|
handleDrop (draggingNode, dropNode, dropType, ev) {
|
console.log('拖拽完成', { draggingNode, dropNode, dropType })
|
},
|
submit(){
|
if(!this.form.templateName){
|
return this.$message({
|
message: '请先输入模板名称再保存',
|
type: 'warning'
|
})
|
}
|
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)
|
this.dialogVisible = false
|
// const dealArr = this.submitDealData()
|
const transformed = this.treeData.map((ground, index) => {
|
const pointNumber = index + 1;
|
const child = ground.children?.[0] || {};
|
|
return {
|
altitude: child.height,
|
ardGroundPoint: [
|
{
|
height: ground.height,
|
latitude: ground.latitude,
|
longitude: ground.longitude,
|
pointNumber: 1,
|
targetName: ground.label,
|
actions:child.actions.map((item, index) => ({
|
actionIndex: index.toString(),
|
actionType: typeDictionary[item.type] || "", // 如果类型不存在字典中，默认空字符串
|
actionValue: item.extra.value
|
}))
|
}
|
],
|
latitude: child.latitude,
|
longitude: child.longitude,
|
pointNumber: pointNumber,
|
targetName: child.label
|
};
|
})
|
console.log(transformed)
|
let parmas = {
|
templateName:this.form.templateName,
|
modelId:this.chooseModelId,
|
ardListWayPointsLS: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)
|
},
|
// 计算点A绕点B逆时针旋转指定角度后的新位置
|
// 空中点或者地面点笛卡尔坐标 塔的笛卡尔坐标 塔的朝向值
|
rotateAroundPoint(startPoint,pivotPoint,rotationAngle) {
|
// 创建一个从B点到本地坐标系的转换矩阵（东方向为X轴，北方向为Y轴，垂直方向为Z轴）
|
const transformationMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(pivotPoint);
|
// 获取世界坐标系到本地坐标系的转换矩阵
|
const inverseTransformationMatrix = Cesium.Matrix4.inverse(transformationMatrix,new Cesium.Matrix4());
|
// 将A点转换到局部坐标系中
|
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());
|
},
|
dealAction(data){
|
console.log(this.treeData)
|
console.log(this.waypoints)
|
console.log(data)
|
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]);
|
console.log(index)
|
if (index !== -1) {
|
if (vm) {
|
vm.$set(list, index, newItem); // Vue2 响应式替换
|
} else {
|
list.splice(index, 1, newItem);
|
}
|
} else {
|
list.push(newItem);
|
}
|
},
|
clickItem(value){
|
this.$refs.initMap.editAction(value);
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
::v-deep .el-dialog__header {
|
padding: 10px; /* 修改内边距 */
|
font-size: 18px; /* 修改字体大小 */
|
}
|
.noScroll{
|
height: calc(100vh - 175px);
|
overflow: auto;
|
position: relative;
|
}
|
.modelType{
|
margin-top: 10px;
|
}
|
.modelTreeTitle {
|
text-align: center;
|
}
|
.chooseModel{
|
height: 120px;
|
/* border: 1px solid #dddddd; */
|
}
|
.cameraView{
|
height: 250px;
|
text-align: center;
|
border: 1px solid #dddddd;
|
}
|
.uavView{
|
height: 250px;
|
text-align: center;
|
border: 1px solid #dddddd;
|
|
}
|
.operationControl{
|
text-align: center;
|
height: 220px;
|
border: 1px solid #dddddd;
|
|
}
|
.container {
|
text-align: left;
|
/* margin-top: 60px; */
|
font-family: Arial, sans-serif;
|
}
|
|
.keypad {
|
display: inline-block;
|
padding:5px;
|
background: #f2f2f2;
|
border-radius: 16px;
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
}
|
|
.row {
|
display: flex;
|
justify-content: center;
|
margin: 10px 0;
|
}
|
|
.key {
|
width: 60px;
|
height: 60px;
|
margin: 0 10px;
|
background-color: white;
|
border-radius: 10px;
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
|
font-size: 12x;
|
font-weight: bold;
|
text-align: center;
|
line-height: 60px;
|
transition: all 0.2s ease;
|
}
|
|
.key.active {
|
background-color: #42b983;
|
color: white;
|
font-size: 12px;
|
box-shadow: 0 4px 15px rgba(66, 185, 131, 0.6);
|
}
|
.arrow-pad {
|
display: inline-block;
|
padding: 10px;
|
float: right;
|
/* margin-left: 50px; */
|
background: #f2f2f2;
|
border-radius: 16px;
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
margin-bottom: 20px;
|
}
|
|
.arrow-row {
|
display: flex;
|
justify-content: center;
|
margin: 5px 0;
|
}
|
|
.arrow {
|
width: 60px;
|
height: 60px;
|
margin: 0 5px;
|
background-color: white;
|
border-radius: 10px;
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
|
font-size: 12px;
|
font-weight: bold;
|
text-align: center;
|
line-height: 60px;
|
transition: all 0.2s ease;
|
}
|
|
.arrow.active {
|
background-color: #42b983;
|
color: white;
|
transform: scale(1.1);
|
box-shadow: 0 4px 15px rgba(66, 185, 131, 0.6);
|
}
|
|
.arrow.empty {
|
background: transparent;
|
box-shadow: none;
|
}
|
</style>
|
<style scoped>
|
.waypoint-panel {
|
width: 300px;
|
/* background: #1e1e1e;
|
color: white; */
|
font-size: 14px;
|
height: 500px;
|
overflow-y: scroll;
|
/* overflow: scroll; */
|
}
|
.waypoint-panel .waypoints {
|
min-height: 50px;
|
}
|
|
.stats {
|
display: flex;
|
justify-content: space-around;
|
padding: 8px;
|
border-bottom: 1px solid #333;
|
}
|
|
.stat-item {
|
display: flex;
|
align-items: center;
|
}
|
|
.stat-item i {
|
margin-right: 4px;
|
}
|
|
.waypoint-item {
|
border-bottom: 1px solid #333;
|
min-height: 40px;
|
line-height: 40px;
|
}
|
|
.waypoint-item.active {
|
background-color: rgba(0, 122, 255, 0.3); /* 高亮色 */
|
}
|
|
.waypoint-header {
|
display: flex;
|
align-items: center;
|
cursor: pointer;
|
padding: 4px 8px;
|
width: 280px;
|
word-wrap: break-word;
|
}
|
.waypoint-header i {
|
margin-right: 6px;
|
height: 36px;
|
line-height: 36x;
|
transition: transform 0.2s;
|
font-size: 24px;
|
|
}
|
|
|
.waypoint-header .waypoint-index {
|
font-size: 24px;
|
}
|
.rotated {
|
transform: rotate(-90deg);
|
}
|
|
.waypoint-content {
|
flex: 1;
|
background: rgb(73, 76, 128);
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
}
|
|
.waypoint-contnet img{
|
height: 25px;
|
margin-left: 5px;
|
}
|
|
</style>
|
