|
|
|
@ -45,12 +45,13 @@ watch(
|
|
|
|
|
const emits = defineEmits(["exitDraw","flyToThere"])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const airPoints = ref([])
|
|
|
|
|
const currentAirPoint = ref({});
|
|
|
|
|
const airPointConfigShow = ref(false);
|
|
|
|
|
|
|
|
|
|
// 全局平移工具
|
|
|
|
|
let moveTool:mars3d.thing.MatrixMove2;
|
|
|
|
|
|
|
|
|
|
// 监听航点变化
|
|
|
|
|
watch(
|
|
|
|
|
currentAirPoint,
|
|
|
|
@ -84,12 +85,23 @@ let polygonGraphicLayer:mars3d.layer.GraphicLayer;
|
|
|
|
|
|
|
|
|
|
let polygonLineGraphicLayer:mars3d.layer.GeoJsonLayer;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 航点地面投影点
|
|
|
|
|
let stickGroundPointLayer:mars3d.layer.GraphicLayer;
|
|
|
|
|
|
|
|
|
|
// 航点连接线
|
|
|
|
|
let lineGroundPointLayer:mars3d.layer.GraphicLayer;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let graphic = null;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const exitDraw = () => {
|
|
|
|
|
// 清空数据
|
|
|
|
|
graphicLayer ? graphicLayer.clear() : null;
|
|
|
|
|
stickGroundPointLayer ? stickGroundPointLayer.clear() : null;
|
|
|
|
|
lineGroundPointLayer ? lineGroundPointLayer.clear() : null;
|
|
|
|
|
|
|
|
|
|
polygonGraphicLayer ? polygonGraphicLayer.clear() : null;
|
|
|
|
|
polygonLineGraphicLayer ? polygonLineGraphicLayer.clear() : null;
|
|
|
|
|
airPoints.value = [];
|
|
|
|
@ -136,7 +148,7 @@ const initMap = ()=>{
|
|
|
|
|
map = new mars3d.Map(vChartRef.value,
|
|
|
|
|
{
|
|
|
|
|
"scene": {
|
|
|
|
|
"center": {"lat":35.134762,"lng":118.295245,"alt":953.2,"heading":360,"pitch":-60},
|
|
|
|
|
"center": {"lat":35.132103,"lng":118.296315,"alt":260.9,"heading":357.9,"pitch":-32},
|
|
|
|
|
"scene3DOnly": false,
|
|
|
|
|
"shadows": false,
|
|
|
|
|
"removeDblClick": true,
|
|
|
|
@ -363,7 +375,41 @@ const initMap = ()=>{
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
graphicLayer.bindContextMenu([
|
|
|
|
|
{
|
|
|
|
|
text: "按轴平移",
|
|
|
|
|
icon: "fa fa-pencil",
|
|
|
|
|
callback: (event) => {
|
|
|
|
|
|
|
|
|
|
const graphic = event.graphic
|
|
|
|
|
let id = event.graphic.options.id;
|
|
|
|
|
|
|
|
|
|
if(moveTool){
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
// 按轴移动
|
|
|
|
|
moveTool = new mars3d.thing.MatrixMove2({
|
|
|
|
|
position: graphic.position,
|
|
|
|
|
})
|
|
|
|
|
map.addThing(moveTool)
|
|
|
|
|
moveTool.on(mars3d.EventType.change, (event) => {
|
|
|
|
|
graphic.position = event.position
|
|
|
|
|
pointMove(event,id);
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
text: "停止平移",
|
|
|
|
|
icon: "fa fa-pencil",
|
|
|
|
|
callback: (event) => {
|
|
|
|
|
const graphic = event.graphic
|
|
|
|
|
if(moveTool){
|
|
|
|
|
map.removeThing(moveTool);
|
|
|
|
|
moveTool.destroy();
|
|
|
|
|
moveTool = null;
|
|
|
|
|
console.log("moveTool",moveTool);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}, {
|
|
|
|
|
text: "删除",
|
|
|
|
|
icon: "fa fa-camera-retro", // 支持 font-class 的字体方式图标
|
|
|
|
|
callback: (e) => {
|
|
|
|
@ -373,6 +419,19 @@ const initMap = ()=>{
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
map.addLayer(graphicLayer);
|
|
|
|
|
|
|
|
|
|
// 航点地面投影点
|
|
|
|
|
stickGroundPointLayer = new mars3d.layer.GraphicLayer({
|
|
|
|
|
isAutoEditing: false // 是否自动激活编辑
|
|
|
|
|
})
|
|
|
|
|
map.addLayer(stickGroundPointLayer);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 航点连接线
|
|
|
|
|
lineGroundPointLayer = new mars3d.layer.GraphicLayer({
|
|
|
|
|
isAutoEditing: false // 是否自动激活编辑
|
|
|
|
|
})
|
|
|
|
|
map.addLayer(lineGroundPointLayer);
|
|
|
|
|
|
|
|
|
|
// 绘制航线
|
|
|
|
|
graphicLayer.on(mars3d.EventType.click,(e)=>{
|
|
|
|
@ -433,12 +492,17 @@ const uavPoints = ref([]);
|
|
|
|
|
// 绘制航点
|
|
|
|
|
const handlerDrawPoint = (e) => {
|
|
|
|
|
|
|
|
|
|
if(moveTool){
|
|
|
|
|
moveTool.destroy();
|
|
|
|
|
moveTool = null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let position = mars3d.LngLatPoint.fromCartesian(e.position);
|
|
|
|
|
|
|
|
|
|
let uuid = buildUUID();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 航点
|
|
|
|
|
const graphic = new mars3d.graphic.BillboardEntity({
|
|
|
|
|
let graphic = new mars3d.graphic.BillboardEntity({
|
|
|
|
|
id:uuid,
|
|
|
|
|
name: "航点",
|
|
|
|
|
position: [position._lng,position._lat,position._alt],
|
|
|
|
@ -457,34 +521,59 @@ const handlerDrawPoint = (e) => {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
graphicLayer.addGraphic(graphic)
|
|
|
|
|
|
|
|
|
|
uavPoints.value.push(graphic);
|
|
|
|
|
|
|
|
|
|
// 相机
|
|
|
|
|
const rectSensor = new mars3d.graphic.RectSensor({
|
|
|
|
|
id: "camera"+uuid,
|
|
|
|
|
position: [position._lng,position._lat,position._alt],
|
|
|
|
|
show:true,
|
|
|
|
|
// 地面投影点
|
|
|
|
|
let stickGraphic = new mars3d.graphic.PointEntity({
|
|
|
|
|
id:"stick"+uuid,
|
|
|
|
|
position: [position._lng,position._lat],
|
|
|
|
|
style: {
|
|
|
|
|
angle1: 30, // 椎体夹角1
|
|
|
|
|
angle2: 30, // 椎体夹角2
|
|
|
|
|
length: 10, // 椎体长度
|
|
|
|
|
rayEllipsoid: false,
|
|
|
|
|
color: "rgba(0,255,255,0.3)",
|
|
|
|
|
color: "#f5f5f5",
|
|
|
|
|
pixelSize: 8,
|
|
|
|
|
outline: true,
|
|
|
|
|
topShow: true,
|
|
|
|
|
topSteps: 2,
|
|
|
|
|
flat: true,
|
|
|
|
|
cameraHpr: true,
|
|
|
|
|
heading: 0,
|
|
|
|
|
pitch: 90, // 俯仰角 0 - 360度
|
|
|
|
|
roll: 0,
|
|
|
|
|
|
|
|
|
|
outlineColor: "#f5f5f5",
|
|
|
|
|
outlineWidth: 1,
|
|
|
|
|
clampToGround:true,
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
graphicLayer.addGraphic(rectSensor)
|
|
|
|
|
stickGroundPointLayer.addGraphic(stickGraphic);
|
|
|
|
|
|
|
|
|
|
// 航点 投影点连接线
|
|
|
|
|
let lineGraphic = new mars3d.graphic.PolylineEntity({
|
|
|
|
|
id:"line"+uuid,
|
|
|
|
|
positions: [[position._lng,position._lat,position._alt], [position._lng,position._lat,0]],
|
|
|
|
|
style: {
|
|
|
|
|
color: '#f5f5f5',
|
|
|
|
|
width: 1,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
lineGroundPointLayer.addGraphic(lineGraphic);
|
|
|
|
|
|
|
|
|
|
// 相机
|
|
|
|
|
// const rectSensor = new mars3d.graphic.RectSensor({
|
|
|
|
|
// id: "camera"+uuid,
|
|
|
|
|
// position: [position._lng,position._lat,position._alt],
|
|
|
|
|
// show:true,
|
|
|
|
|
// style: {
|
|
|
|
|
// angle1: 30, // 椎体夹角1
|
|
|
|
|
// angle2: 30, // 椎体夹角2
|
|
|
|
|
// length: 10, // 椎体长度
|
|
|
|
|
// rayEllipsoid: false,
|
|
|
|
|
// color: "rgba(0,255,255,0.3)",
|
|
|
|
|
// outline: true,
|
|
|
|
|
// topShow: true,
|
|
|
|
|
// topSteps: 2,
|
|
|
|
|
// flat: true,
|
|
|
|
|
// cameraHpr: true,
|
|
|
|
|
// heading: 0,
|
|
|
|
|
// pitch: 90, // 俯仰角 0 - 360度
|
|
|
|
|
// roll: 0,
|
|
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
// graphicLayer.addGraphic(rectSensor);
|
|
|
|
|
|
|
|
|
|
// 航点列表
|
|
|
|
|
let airPointInfo = {
|
|
|
|
|
id:uuid,
|
|
|
|
|
name:"航点",
|
|
|
|
@ -496,17 +585,61 @@ const handlerDrawPoint = (e) => {
|
|
|
|
|
cameraVerticalAngle:0,
|
|
|
|
|
focalLength:0,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
airPoints.value?.push(airPointInfo);
|
|
|
|
|
|
|
|
|
|
uavPoints.value.push(graphic);
|
|
|
|
|
|
|
|
|
|
// 当前航点
|
|
|
|
|
currentAirPoint.value = airPoints.value[airPoints.value?.length-1]
|
|
|
|
|
|
|
|
|
|
// 绘制航线
|
|
|
|
|
handlerDrawLine();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
graphicLayer.addGraphic(graphic)
|
|
|
|
|
// 航点移动
|
|
|
|
|
const pointMove = (e,id)=>{
|
|
|
|
|
const cartographic = mars3d.Cesium.Cartographic.fromCartesian(e.position);
|
|
|
|
|
const longitude = mars3d.Cesium.Math.toDegrees(cartographic.longitude);
|
|
|
|
|
const latitude = mars3d.Cesium.Math.toDegrees(cartographic.latitude);
|
|
|
|
|
const height = cartographic.height; // 高度(米)
|
|
|
|
|
let stickGraphic = stickGroundPointLayer.getGraphicById("stick"+id);
|
|
|
|
|
if(stickGraphic){
|
|
|
|
|
stickGraphic.setOptions({
|
|
|
|
|
position: [longitude,latitude],
|
|
|
|
|
style: {
|
|
|
|
|
color: "#f5f5f5",
|
|
|
|
|
pixelSize: 8,
|
|
|
|
|
outline: true,
|
|
|
|
|
outlineColor: "#f5f5f5",
|
|
|
|
|
outlineWidth: 1,
|
|
|
|
|
clampToGround:true,
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
let lineGraphic = lineGroundPointLayer.getGraphicById("line"+id);
|
|
|
|
|
if(lineGraphic){
|
|
|
|
|
lineGraphic.setOptions({
|
|
|
|
|
positions: [[longitude,latitude,height], [longitude,latitude,0]],
|
|
|
|
|
style: {
|
|
|
|
|
color: '#f5f5f5',
|
|
|
|
|
width: 1,
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 更新坐标数据
|
|
|
|
|
airPoints.value?.forEach((item,index)=>{
|
|
|
|
|
if(item.id == id){
|
|
|
|
|
airPoints.value[index].lng = longitude;
|
|
|
|
|
airPoints.value[index].lat = latitude;
|
|
|
|
|
airPoints.value[index].alt = height;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 更新航线
|
|
|
|
|
handlerDrawLine();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 绘制航线
|
|
|
|
|
const handlerDrawLine = () => {
|
|
|
|
|
|
|
|
|
@ -523,7 +656,7 @@ const handlerDrawLine = () => {
|
|
|
|
|
positions.unshift([startPosition.value[0],startPosition.value[1],startPosition.value[2]]);
|
|
|
|
|
|
|
|
|
|
// 判断是否已经绘制
|
|
|
|
|
if(positions.length>0){
|
|
|
|
|
if(positions.length>1){
|
|
|
|
|
let lineGraphic = graphicLayer.getGraphicById("pointsLine");
|
|
|
|
|
|
|
|
|
|
if(lineGraphic){
|
|
|
|
@ -842,9 +975,9 @@ const CalculateAreaInfo = (polygon,lines)=>{
|
|
|
|
|
|
|
|
|
|
// 更新航点
|
|
|
|
|
const updateAirPoint = (e)=>{
|
|
|
|
|
// 根据id获取graphic
|
|
|
|
|
let graphic = graphicLayer.getGraphicById(e.id);
|
|
|
|
|
|
|
|
|
|
// 更新航点
|
|
|
|
|
let graphic = graphicLayer.getGraphicById(e.id);
|
|
|
|
|
if(graphic){
|
|
|
|
|
graphic.setOptions({
|
|
|
|
|
id:e.id,
|
|
|
|
@ -867,8 +1000,35 @@ const updateAirPoint = (e)=>{
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let cameraGraphic = graphicLayer.getGraphicById('camera'+e.id);
|
|
|
|
|
// 更新贴地点
|
|
|
|
|
let stickGraphic = stickGroundPointLayer.getGraphicById("stick"+e.id);
|
|
|
|
|
if(stickGraphic){
|
|
|
|
|
stickGraphic.setOptions({
|
|
|
|
|
position: [e.lng,e.lat],
|
|
|
|
|
style: {
|
|
|
|
|
color: "#f5f5f5",
|
|
|
|
|
pixelSize: 8,
|
|
|
|
|
outline: true,
|
|
|
|
|
outlineColor: "#f5f5f5",
|
|
|
|
|
outlineWidth: 1,
|
|
|
|
|
clampToGround:true,
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 更新投影点连线
|
|
|
|
|
let lineGraphic = lineGroundPointLayer.getGraphicById("line"+e.id)
|
|
|
|
|
if(lineGraphic){
|
|
|
|
|
lineGraphic.setOptions({
|
|
|
|
|
positions: [[e.lng,e.lat,e.alt], [e.lng,e.lat,0]],
|
|
|
|
|
style: {
|
|
|
|
|
color: '#f5f5f5',
|
|
|
|
|
width: 1,
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let cameraGraphic = graphicLayer.getGraphicById('camera'+e.id);
|
|
|
|
|
if(cameraGraphic){
|
|
|
|
|
cameraGraphic.setOptions({
|
|
|
|
|
position: [e.lng,e.lat,e.alt],
|
|
|
|
@ -893,6 +1053,7 @@ const updateAirPoint = (e)=>{
|
|
|
|
|
// }
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 更新航线
|
|
|
|
|
handlerDrawLine()
|
|
|
|
|
}
|
|
|
|
@ -929,9 +1090,10 @@ const deleteAirPoint = (e)=>{
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let stickGraphicLayer:mars3d.layer.GraphicLayer;
|
|
|
|
|
|
|
|
|
|
let moveTool:mars3d.thing.MatrixMove2;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 飞行到此处
|
|
|
|
|
const flyToThere = (e) => {
|
|
|
|
@ -955,13 +1117,13 @@ const flyToThere = (e) => {
|
|
|
|
|
moveTool = new mars3d.thing.MatrixMove2({
|
|
|
|
|
position: graphic.position,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
map.addThing(moveTool)
|
|
|
|
|
moveTool.on(mars3d.EventType.change, (event) => {
|
|
|
|
|
graphic.position = event.position
|
|
|
|
|
uavGraphicMove(event);
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
map.addThing(moveTool)
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
@ -974,6 +1136,13 @@ const flyToThere = (e) => {
|
|
|
|
|
moveTool = null;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
text: "删除",
|
|
|
|
|
icon: "fa fa-camera-retro", // 支持 font-class 的字体方式图标
|
|
|
|
|
callback: (e) => {
|
|
|
|
|
deleteFlyToThere(e);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
@ -1057,7 +1226,7 @@ const flyToThere = (e) => {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 连接线
|
|
|
|
|
const connectLine = new mars3d.graphic.PolylineEntity({
|
|
|
|
|
let connectLine = new mars3d.graphic.PolylineEntity({
|
|
|
|
|
id:"flytothere-line",
|
|
|
|
|
positions: [[position._lng,position._lat,position._alt], [position._lng,position._lat,0]],
|
|
|
|
|
style: {
|
|
|
|
@ -1066,9 +1235,6 @@ const flyToThere = (e) => {
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
uavGraphicLayer.addGraphic(graphic);
|
|
|
|
|
stickGraphicLayer.addGraphic(stickGraphic);
|
|
|
|
|
uavGraphicLayer.addGraphic(connectLine);
|
|
|
|
@ -1115,12 +1281,39 @@ const stickGraphicMove = (e) => {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 删除飞行到此处
|
|
|
|
|
const deleteFlyToThere = (e) =>{
|
|
|
|
|
|
|
|
|
|
let id = e.graphic.id;
|
|
|
|
|
|
|
|
|
|
let uavGraphic = uavGraphicLayer.getGraphicById(id);
|
|
|
|
|
if(uavGraphic){
|
|
|
|
|
uavGraphicLayer.removeGraphic(uavGraphic);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let lineGraphic = uavGraphicLayer.getGraphicById("flytothere-line");
|
|
|
|
|
if(lineGraphic){
|
|
|
|
|
uavGraphicLayer.removeGraphic(lineGraphic);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let stickGraphic = stickGraphicLayer.getGraphicById("flytothere-stick");
|
|
|
|
|
if(stickGraphic){
|
|
|
|
|
stickGraphicLayer.removeGraphic(stickGraphic);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(moveTool){
|
|
|
|
|
moveTool.destroy();
|
|
|
|
|
moveTool = null;
|
|
|
|
|
}
|
|
|
|
|
emits("flyToThere",{_lng:null,_lat:null,_alt:null})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 无人机点按轴移动
|
|
|
|
|
const uavGraphicMove = (e) => {
|
|
|
|
|
|
|
|
|
|
const cartographic = mars3d.Cesium.Cartographic.fromCartesian(e.position);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 弧度转度数
|
|
|
|
|
const longitude = mars3d.Cesium.Math.toDegrees(cartographic.longitude);
|
|
|
|
|
const latitude = mars3d.Cesium.Math.toDegrees(cartographic.latitude);
|
|
|
|
|