|
|
|
|
@ -25,7 +25,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 航面航线 -->
|
|
|
|
|
<div v-if="props.airLineForm.airLineType == 'mapping2d'" class="airpolygon-container">
|
|
|
|
|
<div v-if="props.airLineForm.airLineType == 'mapping2d'" v-show="props.editMode != 'detail'" class="airpolygon-container">
|
|
|
|
|
<airPolygon
|
|
|
|
|
:airInfo="airInfo"
|
|
|
|
|
:editModel="props.editMode"
|
|
|
|
|
@ -52,6 +52,35 @@
|
|
|
|
|
@positionChange="positionChange"
|
|
|
|
|
></airPointConfig>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 航线预览信息 -->
|
|
|
|
|
<div class="airline-preview-container" v-if="props.editMode == 'detail'">
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
<div class="info-value">46461m²</div>
|
|
|
|
|
<div class="info-label">区域面积</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
<div class="info-value">46461m²</div>
|
|
|
|
|
<div class="info-label">航线长度</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
<div class="info-value">34分钟</div>
|
|
|
|
|
<div class="info-label">预计时间</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
<div class="info-value">78张</div>
|
|
|
|
|
<div class="info-label">照片数量</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
<div>
|
|
|
|
|
<a-button type="primary" danger size="small" @click="exitDraw">
|
|
|
|
|
<CloseOutlined />
|
|
|
|
|
</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
<div>关闭</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 面绘制 -->
|
|
|
|
|
<div class="draw-polygon-patrol" title="绘制面区域" v-if="props.drawArea" @click="handlerDrawPolygonPatrol">
|
|
|
|
|
<EditOutlined />
|
|
|
|
|
@ -61,6 +90,7 @@
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { ref, onMounted, defineProps, watch, defineEmits, reactive } from 'vue';
|
|
|
|
|
import { message } from 'ant-design-vue';
|
|
|
|
|
import { CloseOutlined } from '@ant-design/icons-vue';
|
|
|
|
|
import { GeojsonToWkt, WktToGeojson } from '@/components/MapboxMaps/src/WktGeojsonTransform';
|
|
|
|
|
import { buildUUID } from '@/utils/uuid';
|
|
|
|
|
import airPoint from './airPoint.vue';
|
|
|
|
|
@ -251,17 +281,18 @@
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
|
() => props.editMode,
|
|
|
|
|
(newVal, oldVal) => {
|
|
|
|
|
if (newVal == 'edit' || newVal == 'detail') {
|
|
|
|
|
// 判断航线类型进行加载编辑
|
|
|
|
|
if (props.airLineForm.airLineType == 'waypoint') {
|
|
|
|
|
handlerEditWaypointAirLine();
|
|
|
|
|
} else if (props.airLineForm.airLineType == 'mapping2d') {
|
|
|
|
|
handlerEditPolygonAirLine();
|
|
|
|
|
(newVal,oldVal)=>{
|
|
|
|
|
if(newVal == 'edit' || newVal == 'detail'){
|
|
|
|
|
if(props.airLineForm.airLineType == 'waypoint'){
|
|
|
|
|
handlerEditWaypointAirLine();
|
|
|
|
|
}else if(props.airLineForm.airLineType == 'mapping2d'){
|
|
|
|
|
handlerEditPolygonAirLine();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
|
() => props.polygonArea,
|
|
|
|
|
(newVal, oldVal) => {
|
|
|
|
|
@ -990,7 +1021,6 @@
|
|
|
|
|
///////////////////////////////面状航线计算////////////////////////////////////////////
|
|
|
|
|
|
|
|
|
|
// 全局面状测区
|
|
|
|
|
|
|
|
|
|
const polygonGeoJson = ref();
|
|
|
|
|
|
|
|
|
|
// 计算参数
|
|
|
|
|
@ -1006,42 +1036,35 @@
|
|
|
|
|
|
|
|
|
|
// 绘制面状测区
|
|
|
|
|
const handlerDrawPolygon = async () => {
|
|
|
|
|
const graphic = await polygonGraphicLayer.startDraw({
|
|
|
|
|
type: 'polygon',
|
|
|
|
|
style: {
|
|
|
|
|
color: '#408eff',
|
|
|
|
|
opacity: 0.3,
|
|
|
|
|
outline: true,
|
|
|
|
|
outlineColor: '#408eff',
|
|
|
|
|
outlineWidth: 3.0,
|
|
|
|
|
clampToGround: true,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
console.log('graphic1233', graphic.toGeoJSON());
|
|
|
|
|
let coordinates = graphic.toJSON().positions;
|
|
|
|
|
|
|
|
|
|
coordinates.push(coordinates[0]);
|
|
|
|
|
|
|
|
|
|
polygonGeoJson.value = coordinates;
|
|
|
|
|
|
|
|
|
|
console.log('polygonGeoJson', polygonGeoJson.value);
|
|
|
|
|
|
|
|
|
|
let polygon = turf.polygon([coordinates]);
|
|
|
|
|
|
|
|
|
|
let polygonWkt = GeojsonToWkt(polygon['geometry']);
|
|
|
|
|
|
|
|
|
|
props.airLineForm.flyToFirstPointMode = polygonWkt;
|
|
|
|
|
|
|
|
|
|
let spceing = parseFloat(polygonCalculateParams.value?.spacing) / 10000;
|
|
|
|
|
let lines = generateScanLines(polygon, spceing, 0);
|
|
|
|
|
|
|
|
|
|
// 计算面积
|
|
|
|
|
CalculateAreaInfo(polygon, lines);
|
|
|
|
|
// 绘制面航线
|
|
|
|
|
handlerDrawPolygonLine(lines);
|
|
|
|
|
// 计算边长等信息
|
|
|
|
|
handlerGetPolygonBorderInfo(polygonGeoJson.value);
|
|
|
|
|
const graphic = await polygonGraphicLayer.startDraw({
|
|
|
|
|
type: 'polygon',
|
|
|
|
|
style: {
|
|
|
|
|
color: '#408eff',
|
|
|
|
|
opacity: 0.3,
|
|
|
|
|
outline: true,
|
|
|
|
|
outlineColor: '#408eff',
|
|
|
|
|
outlineWidth: 3.0,
|
|
|
|
|
clampToGround: true,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
let coordinates = graphic.toJSON().positions;
|
|
|
|
|
coordinates.push(coordinates[0]);
|
|
|
|
|
polygonGeoJson.value = coordinates;
|
|
|
|
|
let polygon = turf.polygon([coordinates]);
|
|
|
|
|
let polygonWkt = GeojsonToWkt(polygon['geometry']);
|
|
|
|
|
props.airLineForm.flyToFirstPointMode = polygonWkt;
|
|
|
|
|
// 航线间距
|
|
|
|
|
let spceing = parseFloat(polygonCalculateParams.value?.spacing) / 10000;
|
|
|
|
|
// 初始化角度
|
|
|
|
|
let direction = props.templateKmlConfig.Folder.Placemark.direction ? props.templateKmlConfig.Folder.Placemark.direction : 0;
|
|
|
|
|
// 计算航线
|
|
|
|
|
let lines = generateScanLines(polygon, spceing, direction);
|
|
|
|
|
// 计算测区面积、航线长度
|
|
|
|
|
CalculateAreaInfo(polygon, lines);
|
|
|
|
|
// 绘制面航线
|
|
|
|
|
handlerDrawPolygonLine(lines);
|
|
|
|
|
// 计算边长等信息
|
|
|
|
|
handlerGetPolygonBorderInfo(polygonGeoJson.value);
|
|
|
|
|
};
|
|
|
|
|
// 绘制监测区域
|
|
|
|
|
const handlerDrawPolygonPatrol = async () => {
|
|
|
|
|
@ -1056,13 +1079,11 @@
|
|
|
|
|
clampToGround: true,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
let coordinates = graphic.toJSON().positions;
|
|
|
|
|
coordinates.push(coordinates[0]);
|
|
|
|
|
polygonGeoJson.value = coordinates;
|
|
|
|
|
emits('areaData', polygonGeoJson.value);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 测区编辑后重新计算航线
|
|
|
|
|
const onPolygonGraphicLayerEdit = (e) => {
|
|
|
|
|
let coordinates = e.graphic.toJSON().positions;
|
|
|
|
|
@ -1079,7 +1100,8 @@
|
|
|
|
|
props.airLineForm.flyToFirstPointMode = polygonWkt;
|
|
|
|
|
|
|
|
|
|
let spceing = parseFloat(polygonCalculateParams.value?.spacing) / 10000;
|
|
|
|
|
let lines = generateScanLines(polygon, spceing, 0);
|
|
|
|
|
let direction = props.templateKmlConfig.Folder.Placemark.direction;
|
|
|
|
|
let lines = generateScanLines(polygon, spceing, direction);
|
|
|
|
|
|
|
|
|
|
// 计算面积
|
|
|
|
|
CalculateAreaInfo(polygon, lines);
|
|
|
|
|
@ -1445,28 +1467,43 @@
|
|
|
|
|
textLabelGraphicLayer.clear();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
info?.forEach((item, index) => {
|
|
|
|
|
|
|
|
|
|
// 绘制文本标注
|
|
|
|
|
const handlerLoadtextLabelGraphicLayer = (info) => {
|
|
|
|
|
|
|
|
|
|
if(textLabelGraphicLayer == null){
|
|
|
|
|
textLabelGraphicLayer = new mars3d.layer.GraphicLayer({
|
|
|
|
|
isAutoEditing:false
|
|
|
|
|
})
|
|
|
|
|
map.addLayer(textLabelGraphicLayer);
|
|
|
|
|
}else{
|
|
|
|
|
textLabelGraphicLayer.clear();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
info?.forEach((item,index)=>{
|
|
|
|
|
const graphic = new mars3d.graphic.LabelEntity({
|
|
|
|
|
position: [item.center[0], item.center[1], 0],
|
|
|
|
|
style: {
|
|
|
|
|
text: item.length + 'm',
|
|
|
|
|
font_size: 15,
|
|
|
|
|
scale: 1,
|
|
|
|
|
font_family: '微软雅黑',
|
|
|
|
|
color: '#ffffff',
|
|
|
|
|
text: item.length+"m",
|
|
|
|
|
font_size: 15,
|
|
|
|
|
scale: 1,
|
|
|
|
|
font_family: "微软雅黑",
|
|
|
|
|
color: "#ffffff",
|
|
|
|
|
outline: true,
|
|
|
|
|
outlineColor: '#000000',
|
|
|
|
|
outlineColor: "#000000",
|
|
|
|
|
outlineWidth: 2,
|
|
|
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
|
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
|
|
visibleDepth: false,
|
|
|
|
|
clampToGround: true,
|
|
|
|
|
clampToGround:true,
|
|
|
|
|
},
|
|
|
|
|
attr: { remark: '示例1' },
|
|
|
|
|
});
|
|
|
|
|
textLabelGraphicLayer.addGraphic(graphic);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
attr: { remark: "示例1" }
|
|
|
|
|
})
|
|
|
|
|
textLabelGraphicLayer.addGraphic(graphic)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 编辑回显面状航线
|
|
|
|
|
// 编辑回显航线
|
|
|
|
|
@ -2956,6 +2993,7 @@
|
|
|
|
|
right: 40px;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.draw-polygon-patrol {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
position: absolute;
|
|
|
|
|
@ -2973,4 +3011,28 @@
|
|
|
|
|
border-image: linear-gradient(180deg, #3661a4, rgba(61, 109, 171, 0.68)) 1 1;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.airline-preview-container{
|
|
|
|
|
width:500px;
|
|
|
|
|
background:rgba(0,0,0,0.6);
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom:100px;
|
|
|
|
|
left:50%;
|
|
|
|
|
transform: translate(0%,0);
|
|
|
|
|
z-index:999;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
padding:20px;
|
|
|
|
|
font-size:18px;
|
|
|
|
|
color:#fff;
|
|
|
|
|
}
|
|
|
|
|
.airline-preview-container .info-item{
|
|
|
|
|
flex:1;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.airline-preview-container .info-item .info-label{
|
|
|
|
|
font-size:14px;
|
|
|
|
|
margin-top:12px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
徐景良