|
|
|
|
@ -3,7 +3,7 @@
|
|
|
|
|
|
|
|
|
|
<!-- 航点航线 -->
|
|
|
|
|
<div v-if="props.airRoute.airLineType == '航点航线'" class="air-container">
|
|
|
|
|
<airPoint :airPoints="airPoints" @setFlyPoint="setFlyPoint" :airInfo="airInfo" :polygonAirForm="polygonAirForm"></airPoint>
|
|
|
|
|
<airPoint :airPoints="airPoints" @setFlyPoint="setFlyPoint" :airInfo="lineInfo" :polygonAirForm="polygonAirForm" @checkPoint="checkPoint"></airPoint>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 航面航线 -->
|
|
|
|
|
@ -12,8 +12,8 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 航点航线配置 -->
|
|
|
|
|
<div class="airpoint-config-container">
|
|
|
|
|
<airPointConfig></airPointConfig>
|
|
|
|
|
<div class="airpoint-config-container" v-if="airPointConfigShow">
|
|
|
|
|
<airPointConfig :currentAirPoint="currentAirPoint"></airPointConfig>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
@ -42,7 +42,25 @@ watch(
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const airPoints = ref([])
|
|
|
|
|
const currentAirPoint = ref({});
|
|
|
|
|
const airPointConfigShow = ref(false);
|
|
|
|
|
|
|
|
|
|
// 监听航点变化
|
|
|
|
|
watch(
|
|
|
|
|
currentAirPoint,
|
|
|
|
|
(newVal,oldVal)=>{
|
|
|
|
|
updateAirPoint(newVal);
|
|
|
|
|
},
|
|
|
|
|
{ deep: true }
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const checkPoint = (e)=>{
|
|
|
|
|
currentAirPoint.value = e;
|
|
|
|
|
airPointConfigShow.value = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let map: mars3d.Map; // 地图对象
|
|
|
|
|
let graphicLayer:mars3d.layer.GraphicLayer;
|
|
|
|
|
@ -54,6 +72,14 @@ let polygonLineGraphicLayer:mars3d.layer.GeoJsonLayer;
|
|
|
|
|
|
|
|
|
|
let graphic = null;
|
|
|
|
|
|
|
|
|
|
// 航点航线信息
|
|
|
|
|
const lineInfo = ref({
|
|
|
|
|
count:0,
|
|
|
|
|
length:0,
|
|
|
|
|
time:0,
|
|
|
|
|
picture:'- -'
|
|
|
|
|
})
|
|
|
|
|
// 面航线信息
|
|
|
|
|
const airInfo = ref({
|
|
|
|
|
area:0,
|
|
|
|
|
length:0,
|
|
|
|
|
@ -310,6 +336,17 @@ const initMap = ()=>{
|
|
|
|
|
graphicLayer = new mars3d.layer.GraphicLayer({
|
|
|
|
|
isAutoEditing: false // 是否自动激活编辑
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
graphicLayer.bindContextMenu([
|
|
|
|
|
{
|
|
|
|
|
text: "删除航点",
|
|
|
|
|
icon: "fa fa-camera-retro", // 支持 font-class 的字体方式图标
|
|
|
|
|
callback: (e) => {
|
|
|
|
|
deleteAirPoint(e);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
map.addLayer(graphicLayer);
|
|
|
|
|
|
|
|
|
|
// 绘制起点
|
|
|
|
|
@ -328,6 +365,11 @@ const handlerBindMapMenus = ()=>{
|
|
|
|
|
text: "添加航点",
|
|
|
|
|
icon: "fa fa-camera-retro", // 支持 font-class 的字体方式图标
|
|
|
|
|
callback: (e) => {
|
|
|
|
|
|
|
|
|
|
if(!startPosition.value){
|
|
|
|
|
message.warning("请先设置起飞点");
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
handlerDrawPoint(e);
|
|
|
|
|
}
|
|
|
|
|
},{
|
|
|
|
|
@ -355,15 +397,14 @@ const handlerDrawPoint = (e) => {
|
|
|
|
|
let position = mars3d.LngLatPoint.fromCartesian(e.position);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
position._alt = position._alt + 100;
|
|
|
|
|
|
|
|
|
|
let uuid = buildUUID();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 航点
|
|
|
|
|
const graphic = new mars3d.graphic.BillboardEntity({
|
|
|
|
|
id:uuid,
|
|
|
|
|
name: "航点",
|
|
|
|
|
position: [position._lng,position._lat,position._alt+180],
|
|
|
|
|
position: [position._lng,position._lat,position._alt],
|
|
|
|
|
style: {
|
|
|
|
|
image: "/map/node.png",
|
|
|
|
|
scale: 1,
|
|
|
|
|
@ -379,16 +420,18 @@ const handlerDrawPoint = (e) => {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
uavPoints.value.push(graphic);
|
|
|
|
|
|
|
|
|
|
uavPoints.value.push(graphic);
|
|
|
|
|
|
|
|
|
|
// 相机
|
|
|
|
|
const rectSensor = new mars3d.graphic.RectSensor({
|
|
|
|
|
id: "-rectSensor",
|
|
|
|
|
position: [position._lng,position._lat,position._alt+180],
|
|
|
|
|
id: "camera"+uuid,
|
|
|
|
|
position: [position._lng,position._lat,position._alt],
|
|
|
|
|
show:true,
|
|
|
|
|
style: {
|
|
|
|
|
angle1: 30, // 椎体夹角1
|
|
|
|
|
angle2: 30, // 椎体夹角2
|
|
|
|
|
length: 100, // 椎体长度
|
|
|
|
|
length: 50, // 椎体长度
|
|
|
|
|
rayEllipsoid: true,
|
|
|
|
|
color: "rgba(0,255,255,0.3)",
|
|
|
|
|
outline: true,
|
|
|
|
|
@ -398,7 +441,7 @@ const handlerDrawPoint = (e) => {
|
|
|
|
|
cameraHpr: true,
|
|
|
|
|
heading: 0,
|
|
|
|
|
pitch: 180,
|
|
|
|
|
roll: 30, //
|
|
|
|
|
roll: 0, //
|
|
|
|
|
clippingPlanes: [{
|
|
|
|
|
distance: 0, // 设置裁剪平面在地表（0高度）
|
|
|
|
|
normal: new Cesium.Cartesian3(0, 0, -1) // 法向量向下（隐藏地表以下部分）
|
|
|
|
|
@ -417,11 +460,13 @@ const handlerDrawPoint = (e) => {
|
|
|
|
|
aircraftHorizontalAngle:0,
|
|
|
|
|
cameraHorizontalAngle:0,
|
|
|
|
|
cameraVerticalAngle:0,
|
|
|
|
|
focalLength:2,
|
|
|
|
|
focalLength:0,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
airPoints.value?.push(airPointInfo);
|
|
|
|
|
|
|
|
|
|
currentAirPoint.value = airPoints.value[airPoints.value?.length-1]
|
|
|
|
|
|
|
|
|
|
graphicLayer.addGraphic(graphic)
|
|
|
|
|
|
|
|
|
|
handlerDrawLine();
|
|
|
|
|
@ -430,27 +475,48 @@ const handlerDrawPoint = (e) => {
|
|
|
|
|
|
|
|
|
|
// 绘制航线
|
|
|
|
|
const handlerDrawLine = () => {
|
|
|
|
|
console.log("uavPoints",uavPoints.value);
|
|
|
|
|
|
|
|
|
|
let positions = [];
|
|
|
|
|
uavPoints.value?.forEach((item,index)=>{
|
|
|
|
|
positions.push(item._position);
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log("positions",positions);
|
|
|
|
|
airPoints.value?.forEach((item,index)=>{
|
|
|
|
|
positions.push([item.lng,item.lat,item.alt]);
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
if(positions.length>1){
|
|
|
|
|
const graphic = new mars3d.graphic.PolylineEntity({
|
|
|
|
|
positions: positions,
|
|
|
|
|
style: {
|
|
|
|
|
width: 2,
|
|
|
|
|
color: "#3388ff",
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
graphicLayer.addGraphic(graphic)
|
|
|
|
|
|
|
|
|
|
positions.unshift([startPosition.value[0],startPosition.value[1],airPoints.value[0].alt])
|
|
|
|
|
|
|
|
|
|
positions.unshift([startPosition.value[0],startPosition.value[1],startPosition.value[2]]);
|
|
|
|
|
|
|
|
|
|
// 判断是否已经绘制
|
|
|
|
|
if(positions.length>0){
|
|
|
|
|
let lineGraphic = graphicLayer.getGraphicById("pointsLine");
|
|
|
|
|
|
|
|
|
|
if(lineGraphic){
|
|
|
|
|
lineGraphic.setOptions({
|
|
|
|
|
id:"pointsLine",
|
|
|
|
|
positions: positions,
|
|
|
|
|
style: {
|
|
|
|
|
width: 2,
|
|
|
|
|
color: "#3388ff",
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
}else{
|
|
|
|
|
const graphic = new mars3d.graphic.PolylineEntity({
|
|
|
|
|
id:"pointsLine",
|
|
|
|
|
positions: positions,
|
|
|
|
|
style: {
|
|
|
|
|
width: 2,
|
|
|
|
|
color: "#3388ff",
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
graphicLayer.addGraphic(graphic)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 计算航线长度
|
|
|
|
|
let lineString = turf.lineString(positions);
|
|
|
|
|
lineInfo.value.length = turf.length(lineString).toFixed(2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const startPosition = ref(null);
|
|
|
|
|
@ -477,6 +543,7 @@ const setFlyPoint = async ()=>{
|
|
|
|
|
|
|
|
|
|
startPosition.value = graphic.toJSON().position
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
polygonAirForm.value.startingPoint = graphic.toJSON().position;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
@ -733,10 +800,94 @@ const CalculateAreaInfo = (polygon,lines)=>{
|
|
|
|
|
|
|
|
|
|
// 照片数量
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 更新航点
|
|
|
|
|
const updateAirPoint = (e)=>{
|
|
|
|
|
// 根据id获取graphic
|
|
|
|
|
let graphic = graphicLayer.getGraphicById(e.id);
|
|
|
|
|
|
|
|
|
|
if(graphic){
|
|
|
|
|
graphic.setOptions({
|
|
|
|
|
id:e.id,
|
|
|
|
|
name: "航点",
|
|
|
|
|
position: [e.lng,e.lat,e.alt],
|
|
|
|
|
style: {
|
|
|
|
|
image: "/map/node.png",
|
|
|
|
|
scale: 1,
|
|
|
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
|
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
|
|
label: {
|
|
|
|
|
text: "航点",
|
|
|
|
|
font_size: 14,
|
|
|
|
|
color: "#ffffff",
|
|
|
|
|
outline: true,
|
|
|
|
|
outlineColor: "#000000",
|
|
|
|
|
pixelOffsetY: -35
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let cameraGraphic = graphicLayer.getGraphicById('camera'+e.id);
|
|
|
|
|
|
|
|
|
|
if(cameraGraphic){
|
|
|
|
|
cameraGraphic.setOptions({
|
|
|
|
|
position: [e.lng,e.lat,e.alt],
|
|
|
|
|
// style: {
|
|
|
|
|
// angle1: 30, // 椎体夹角1
|
|
|
|
|
// angle2: 30, // 椎体夹角2
|
|
|
|
|
// length: 50, // 椎体长度
|
|
|
|
|
// rayEllipsoid: true,
|
|
|
|
|
// color: "rgba(0,255,255,0.3)",
|
|
|
|
|
// outline: true,
|
|
|
|
|
// topShow: true,
|
|
|
|
|
// topSteps: 2,
|
|
|
|
|
// flat: true,
|
|
|
|
|
// cameraHpr: true,
|
|
|
|
|
// heading: 0,
|
|
|
|
|
// pitch: 180,
|
|
|
|
|
// roll: 0, //
|
|
|
|
|
// clippingPlanes: [{
|
|
|
|
|
// distance: 0, // 设置裁剪平面在地表（0高度）
|
|
|
|
|
// normal: new Cesium.Cartesian3(0, 0, -1) // 法向量向下（隐藏地表以下部分）
|
|
|
|
|
// }]
|
|
|
|
|
// }
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
// 更新航线
|
|
|
|
|
handlerDrawLine()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 删除航点
|
|
|
|
|
const deleteAirPoint = (e)=>{
|
|
|
|
|
let id = e.graphic.id;
|
|
|
|
|
|
|
|
|
|
// 删除航点
|
|
|
|
|
let point = graphicLayer.getGraphicById(id);
|
|
|
|
|
if(point){
|
|
|
|
|
graphicLayer.removeGraphic(point);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 删除相机
|
|
|
|
|
let camera = graphicLayer.getGraphicById('camera'+id);
|
|
|
|
|
if(camera){
|
|
|
|
|
graphicLayer.removeGraphic(camera);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 删除数据
|
|
|
|
|
airPoints.value?.forEach((item,index)=>{
|
|
|
|
|
if(item.id == id){
|
|
|
|
|
airPoints.value?.splice(index,1);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 更新航线
|
|
|
|
|
handlerDrawLine()
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
