修改绘制地图角度、绘制方式
parent
f9948909ba
commit
9416112d23
|
|
@ -2,7 +2,7 @@
|
|||
<div>
|
||||
<div class="shade-container"></div>
|
||||
<div class="patrol-map" v-if="step == 1">
|
||||
<div class="title">绘制范围</div>
|
||||
<div class="title">绘制事件区域</div>
|
||||
<div class="map-container">
|
||||
<div class="map-container-content">
|
||||
<Map :drawArea="drawarea" @areaData="getAreaData" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,11 @@
|
|||
<!-- 地图 -->
|
||||
<div ref="vChartRef " :id="'mars3d-container_' + mapId" class="mars3d-container">
|
||||
<!-- 航点航线 -->
|
||||
<div v-if="props.airLineForm.airLineType == 'waypoint'" v-show="props.editMode != 'detail'" class="air-container">
|
||||
<div
|
||||
v-if="props.airLineForm.airLineType == 'waypoint'"
|
||||
v-show="props.editMode != 'detail'"
|
||||
class="air-container"
|
||||
>
|
||||
<airPoint
|
||||
:airInfo="lineInfo"
|
||||
:editModel="props.editMode"
|
||||
|
|
@ -48,10 +52,14 @@
|
|||
@positionChange="positionChange"
|
||||
></airPointConfig>
|
||||
</div>
|
||||
<!-- 面绘制 -->
|
||||
<div class="draw-polygon-patrol" title="绘制面区域" v-if="props.drawArea" @click="handlerDrawPolygonPatrol">
|
||||
<EditOutlined />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, defineProps, watch, defineEmits } from 'vue';
|
||||
import { ref, onMounted, defineProps, watch, defineEmits, reactive } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { GeojsonToWkt, WktToGeojson } from '@/components/MapboxMaps/src/WktGeojsonTransform';
|
||||
import { buildUUID } from '@/utils/uuid';
|
||||
|
|
@ -59,9 +67,9 @@
|
|||
import * as mars3d from 'mars3d';
|
||||
import { EventBus } from '@/utils/eventBus';
|
||||
import { airPortStore } from '@/store/modules/airport';
|
||||
import { airPointActions } from '../waylineConfig/actionConfig'
|
||||
import { airPointActions } from '../waylineConfig/actionConfig';
|
||||
import 'mars3d-space';
|
||||
|
||||
import { EditOutlined } from '@ant-design/icons-vue';
|
||||
import * as Cesium from 'mars3d-cesium';
|
||||
// import * as turf from '@turf/turf';
|
||||
import airPolygon from './airPolygon.vue';
|
||||
|
|
@ -235,6 +243,11 @@
|
|||
type: Object,
|
||||
},
|
||||
});
|
||||
const centerObj = reactive({
|
||||
lat: 260.9,
|
||||
heading: 357.9,
|
||||
pitch: -32,
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.editMode,
|
||||
|
|
@ -246,7 +259,6 @@
|
|||
} else if (props.airLineForm.airLineType == 'mapping2d') {
|
||||
handlerEditPolygonAirLine();
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
);
|
||||
|
|
@ -444,10 +456,8 @@
|
|||
|
||||
let graphic = null;
|
||||
|
||||
|
||||
// // 清空所有数据
|
||||
const exitDraw = () => {
|
||||
|
||||
graphicLayer ? graphicLayer.clear() : null;
|
||||
|
||||
takeOffPointGraphicLayer ? takeOffPointGraphicLayer.clear() : null;
|
||||
|
|
@ -502,6 +512,11 @@
|
|||
const vChartRef = ref<HTMLElement>();
|
||||
|
||||
onMounted(() => {
|
||||
if (props.drawArea) {
|
||||
centerObj.lat = 835.9;
|
||||
centerObj.heading = 2;
|
||||
centerObj.pitch = -86;
|
||||
}
|
||||
initMap();
|
||||
|
||||
EventBus.on('closeTranslation', (val: any) => {
|
||||
|
|
@ -511,12 +526,19 @@
|
|||
}
|
||||
});
|
||||
});
|
||||
// center: { lat: 35.132103, lng: 118.296315, alt: 260.9, heading: 357.9, pitch: -32 },
|
||||
|
||||
// 初始化地图
|
||||
const initMap = () => {
|
||||
map = new mars3d.Map('mars3d-container_' + mapId.value, {
|
||||
scene: {
|
||||
center: { lat: 35.132103, lng: 118.296315, alt: 260.9, heading: 357.9, pitch: -32 },
|
||||
center: {
|
||||
lat: 35.132103,
|
||||
lng: 118.296315,
|
||||
alt: centerObj.lat,
|
||||
heading: centerObj.heading,
|
||||
pitch: centerObj.pitch,
|
||||
},
|
||||
scene3DOnly: false,
|
||||
shadows: false,
|
||||
removeDblClick: true,
|
||||
|
|
@ -689,7 +711,6 @@
|
|||
|
||||
map.addLayer(graphicLayer);
|
||||
|
||||
|
||||
// 参考起飞点图层
|
||||
takeOffPointGraphicLayer = new mars3d.layer.GraphicLayer({
|
||||
isAutoEditing: true,
|
||||
|
|
@ -780,15 +801,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 监测面区域回显
|
||||
if (props.polygonArea) {
|
||||
handlerReportPolygonAirLine();
|
||||
}
|
||||
|
||||
emits('mapOnLoad', map);
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -849,17 +867,17 @@
|
|||
},
|
||||
];
|
||||
}
|
||||
if (props.drawArea) {
|
||||
mapContextmenuItems = [
|
||||
{
|
||||
text: '添加面区域',
|
||||
icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
|
||||
callback: (e) => {
|
||||
handlerDrawPolygonPatrol();
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
// if (props.drawArea) {
|
||||
// mapContextmenuItems = [
|
||||
// {
|
||||
// text: '添加面区域',
|
||||
// icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
|
||||
// callback: (e) => {
|
||||
// handlerDrawPolygonPatrol();
|
||||
// },
|
||||
// },
|
||||
// ];
|
||||
// }
|
||||
|
||||
map.bindContextMenu(mapContextmenuItems);
|
||||
};
|
||||
|
|
@ -1082,7 +1100,6 @@
|
|||
};
|
||||
// 绘制面航线
|
||||
const handlerDrawPolygonLine = (lines) => {
|
||||
|
||||
// 设置首航点
|
||||
let firstAirLinePoint = polygonGraphicLayer.getGraphicById('polygon-node-1');
|
||||
if (firstAirLinePoint) {
|
||||
|
|
@ -1417,14 +1434,12 @@
|
|||
return edgeLengths;
|
||||
};
|
||||
|
||||
|
||||
// 绘制文本标注
|
||||
const handlerLoadtextLabelGraphicLayer = (info) => {
|
||||
|
||||
if (textLabelGraphicLayer == null) {
|
||||
textLabelGraphicLayer = new mars3d.layer.GraphicLayer({
|
||||
isAutoEditing:false
|
||||
})
|
||||
isAutoEditing: false,
|
||||
});
|
||||
map.addLayer(textLabelGraphicLayer);
|
||||
} else {
|
||||
textLabelGraphicLayer.clear();
|
||||
|
|
@ -1434,25 +1449,24 @@ const handlerLoadtextLabelGraphicLayer = (info) => {
|
|||
const graphic = new mars3d.graphic.LabelEntity({
|
||||
position: [item.center[0], item.center[1], 0],
|
||||
style: {
|
||||
text: item.length+"m",
|
||||
text: item.length + 'm',
|
||||
font_size: 15,
|
||||
scale: 1,
|
||||
font_family: "微软雅黑",
|
||||
color: "#ffffff",
|
||||
font_family: '微软雅黑',
|
||||
color: '#ffffff',
|
||||
outline: true,
|
||||
outlineColor: "#000000",
|
||||
outlineColor: '#000000',
|
||||
outlineWidth: 2,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
visibleDepth: false,
|
||||
clampToGround: true,
|
||||
},
|
||||
attr: { remark: "示例1" }
|
||||
})
|
||||
textLabelGraphicLayer.addGraphic(graphic)
|
||||
})
|
||||
}
|
||||
|
||||
attr: { remark: '示例1' },
|
||||
});
|
||||
textLabelGraphicLayer.addGraphic(graphic);
|
||||
});
|
||||
};
|
||||
|
||||
// 编辑回显面状航线
|
||||
// 编辑回显航线
|
||||
|
|
@ -1581,7 +1595,6 @@ const handlerEditPolygonAirLine = async () => {
|
|||
// handlerDrawPolygonLine(line);
|
||||
};
|
||||
|
||||
|
||||
// 监测区域面图层回显
|
||||
const handlerReportPolygonAirLine = () => {
|
||||
let geometry = {
|
||||
|
|
@ -1994,54 +2007,51 @@ const handlerEditPolygonAirLine = async () => {
|
|||
const paramChagne = (info) => {
|
||||
console.log('info1232', info);
|
||||
|
||||
|
||||
// 判断事件类型
|
||||
|
||||
if(info.value == 'rotateYaw'){ // 飞行器偏航角
|
||||
if (info.value == 'rotateYaw') {
|
||||
// 飞行器偏航角
|
||||
// 设置参数
|
||||
currentAirPoint.value.aircraftHorizontalAngle = info.config.actionActuatorFuncParam.aircraftHeading;
|
||||
currentAirPoint.value.aircraftHorizontalAngle =
|
||||
info.config.actionActuatorFuncParam.aircraftHeading;
|
||||
// 更新镜头
|
||||
handlerDrawCamera(currentAirPoint.value);
|
||||
// 更新航点
|
||||
updateAirPoint(currentAirPoint.value);
|
||||
}
|
||||
|
||||
if(info.value == "gimbalRotate"){ // 云台俯仰角
|
||||
if (info.value == 'gimbalRotate') {
|
||||
// 云台俯仰角
|
||||
// 设置参数
|
||||
currentAirPoint.value.cameraVerticalAngle =info.config.actionActuatorFuncParam.gimbalPitchRotateAngle;
|
||||
currentAirPoint.value.cameraVerticalAngle =
|
||||
info.config.actionActuatorFuncParam.gimbalPitchRotateAngle;
|
||||
// 更新镜头
|
||||
handlerDrawCamera(currentAirPoint.value);
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(info.value == 'position'){ // 坐标高度改变
|
||||
|
||||
}
|
||||
|
||||
|
||||
if (info.value == 'position') {
|
||||
// 坐标高度改变
|
||||
}
|
||||
};
|
||||
|
||||
// 航点位置参数改变
|
||||
const positionChange = () => {
|
||||
|
||||
// 更新航点
|
||||
updateAirPoint(currentAirPoint.value);
|
||||
|
||||
// 更新镜头
|
||||
handlerDrawCamera(currentAirPoint.value);
|
||||
}
|
||||
};
|
||||
|
||||
// 切换航点
|
||||
const pointChange = (id, type) => {
|
||||
|
||||
if(type == "next"){
|
||||
if (type == 'next') {
|
||||
if (id == airPoints.value.length) {
|
||||
currentAirPoint.value = airPoints.value[0];
|
||||
} else {
|
||||
currentAirPoint.value = airPoints.value[id];
|
||||
}
|
||||
}else if(type == "last"){
|
||||
} else if (type == 'last') {
|
||||
if (id == 1) {
|
||||
currentAirPoint.value = airPoints.value[airPoints.value.length - 1];
|
||||
} else {
|
||||
|
|
@ -2051,8 +2061,7 @@ const pointChange = (id,type) => {
|
|||
|
||||
// 更新镜头
|
||||
handlerDrawCamera(currentAirPoint.value);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// 删除航点
|
||||
const deleteAirPoint = (e) => {
|
||||
|
|
@ -2095,11 +2104,18 @@ const pointChange = (id,type) => {
|
|||
|
||||
// 编辑回显航点航线
|
||||
const handlerEditWaypointAirLine = async () => {
|
||||
|
||||
// 解析和设置参考起飞点
|
||||
let takeoffArray = props.templateKmlConfig.missionConfig.takeOffRefPoint.split(",");
|
||||
takeOffPointPosition.value = [parseFloat(takeoffArray[1]),parseFloat(takeoffArray[0]),parseFloat(takeoffArray[2])]
|
||||
polygonAirForm.value.startingPoint = [parseFloat(takeoffArray[1]),parseFloat(takeoffArray[0]),parseFloat(takeoffArray[2])];
|
||||
let takeoffArray = props.templateKmlConfig.missionConfig.takeOffRefPoint.split(',');
|
||||
takeOffPointPosition.value = [
|
||||
parseFloat(takeoffArray[1]),
|
||||
parseFloat(takeoffArray[0]),
|
||||
parseFloat(takeoffArray[2]),
|
||||
];
|
||||
polygonAirForm.value.startingPoint = [
|
||||
parseFloat(takeoffArray[1]),
|
||||
parseFloat(takeoffArray[0]),
|
||||
parseFloat(takeoffArray[2]),
|
||||
];
|
||||
takeOffPointGraphicLayer ? takeOffPointGraphicLayer.clear() : null;
|
||||
let startFlyGraphic = new mars3d.graphic.BillboardEntity({
|
||||
position: takeOffPointPosition.value,
|
||||
|
|
@ -2117,7 +2133,7 @@ const handlerEditWaypointAirLine =async () => {
|
|||
},
|
||||
clampToGround: true,
|
||||
},
|
||||
})
|
||||
});
|
||||
takeOffPointGraphicLayer.addGraphic(startFlyGraphic);
|
||||
|
||||
// 处理和加载航点
|
||||
|
|
@ -2134,26 +2150,27 @@ const handlerEditWaypointAirLine =async () => {
|
|||
cameraHorizontalAngle: 0,
|
||||
cameraVerticalAngle: 0,
|
||||
focalLength: 24,
|
||||
actions:[]
|
||||
actions: [],
|
||||
};
|
||||
// 处理动作
|
||||
item.actionGroup.action?.forEach((action, idx) => {
|
||||
let actionConfig = JSON.parse(JSON.stringify(airPointActions[action.actionActuatorFunc]))
|
||||
let actionConfig = JSON.parse(JSON.stringify(airPointActions[action.actionActuatorFunc]));
|
||||
actionConfig.config = JSON.parse(JSON.stringify(action));
|
||||
|
||||
console.log("123",action);
|
||||
console.log('123', action);
|
||||
|
||||
// 处理航偏角和俯仰角
|
||||
if (action.actionActuatorFunc == 'rotateYaw') {
|
||||
airPointInfo.aircraftHorizontalAngle = action.actionActuatorFuncParam.aircraftHeading
|
||||
airPointInfo.aircraftHorizontalAngle = action.actionActuatorFuncParam.aircraftHeading;
|
||||
}
|
||||
|
||||
if (action.actionActuatorFunc == 'gimbalRotate') {
|
||||
airPointInfo.cameraVerticalAngle = action.actionActuatorFuncParam.gimbalPitchRotateAngle
|
||||
airPointInfo.cameraVerticalAngle =
|
||||
action.actionActuatorFuncParam.gimbalPitchRotateAngle;
|
||||
}
|
||||
|
||||
airPointInfo.actions.push(actionConfig);
|
||||
})
|
||||
});
|
||||
airPoints.value?.push(airPointInfo);
|
||||
// 回显航点
|
||||
displayWaypointAirLine(airPointInfo);
|
||||
|
|
@ -2161,37 +2178,35 @@ const handlerEditWaypointAirLine =async () => {
|
|||
// 更新航线
|
||||
handlerDrawLine();
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
// 回显航点航线信息
|
||||
const displayWaypointAirLine = (position) => {
|
||||
console.log("position123",position);
|
||||
console.log('position123', position);
|
||||
|
||||
// 设置航线默认高度
|
||||
let uuid = buildUUID();
|
||||
|
||||
// 获取默认航线高度
|
||||
|
||||
|
||||
// 航点三维模型
|
||||
let uavAngleGraphic = new mars3d.graphic.ModelEntity({
|
||||
id: position.id,
|
||||
name: "航向",
|
||||
name: '航向',
|
||||
position: [position.lng, position.lat, position.alt],
|
||||
style: {
|
||||
url: "/map/uav-angle.gltf",
|
||||
url: '/map/uav-angle.gltf',
|
||||
scale: 0.1,
|
||||
heading: position.aircraftHorizontalAngle + 90,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_near: 0,
|
||||
distanceDisplayPoint: {
|
||||
color: "#00ff00",
|
||||
pixelSize: 8
|
||||
}
|
||||
}
|
||||
})
|
||||
graphicLayer.addGraphic(uavAngleGraphic)
|
||||
color: '#00ff00',
|
||||
pixelSize: 8,
|
||||
},
|
||||
},
|
||||
});
|
||||
graphicLayer.addGraphic(uavAngleGraphic);
|
||||
|
||||
// 地面投影点
|
||||
let stickGraphic = new mars3d.graphic.PointEntity({
|
||||
|
|
@ -2221,14 +2236,10 @@ const displayWaypointAirLine = (position)=>{
|
|||
},
|
||||
});
|
||||
lineGroundPointLayer.addGraphic(lineGraphic);
|
||||
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
let stickGraphicLayer: mars3d.layer.GraphicLayer;
|
||||
|
||||
|
||||
// 飞行到此处
|
||||
const flyToThere = (e) => {
|
||||
if (!uavGraphicLayer) {
|
||||
|
|
@ -2734,7 +2745,6 @@ let stickGraphicLayer: mars3d.layer.GraphicLayer;
|
|||
};
|
||||
// 设置无人机轨迹
|
||||
const setUAVPosition = () => {
|
||||
|
||||
let point = graphicLayer.getGraphicById('set-uav');
|
||||
const position = [props.uavTrack.longitude, props.uavTrack.latitude, props.uavTrack.height];
|
||||
// 更新航点
|
||||
|
|
@ -2898,16 +2908,13 @@ let stickGraphicLayer: mars3d.layer.GraphicLayer;
|
|||
|
||||
/////////////////////////////////动作处理//////////////////////////////////////
|
||||
const addAction = (action) => {
|
||||
|
||||
// 需要特殊处理拍照动作
|
||||
if(action.value == "takePhoto"){
|
||||
if (action.value == 'takePhoto') {
|
||||
currentAirPoint.value.actions.push(JSON.parse(JSON.stringify(airPointActions['focus'])));
|
||||
}
|
||||
|
||||
// 当前航点添加动作
|
||||
currentAirPoint.value.actions.push(JSON.parse(JSON.stringify(action)));
|
||||
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -2949,4 +2956,21 @@ let stickGraphicLayer: mars3d.layer.GraphicLayer;
|
|||
right: 40px;
|
||||
z-index: 999;
|
||||
}
|
||||
.draw-polygon-patrol {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
color: #fff;
|
||||
background: linear-gradient(180deg, rgba(13, 25, 45, 0.87) 0%, #25436c 100%);
|
||||
box-shadow: 0px 10px 30px 0px rgba(0, 0, 6, 0.15);
|
||||
border-radius: 10px;
|
||||
border-image: linear-gradient(180deg, #3661a4, rgba(61, 109, 171, 0.68)) 1 1;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue