import * as Cesium from 'cesium';
|
import { appointroutePlanning } from '@/api/RoutePlanning';
|
import { analyzeKmzFile, XMLToJSON } from '@/utils/cesium/kmz.js';
|
import { getLnglatAltitude } from '@/utils/cesium/mapUtil';
|
import cesiumOperation from '@/utils/cesium-tsa';
|
const { removeAllPoint, removeById } = cesiumOperation();
|
|
export default {
|
methods: {
|
// 初始化航线
|
async initPlanarWayline(route) {
|
removeAllPoint();
|
if (!route) return;
|
const { data: waylineUrl } = await appointroutePlanning(
|
this.wId,
|
route.id,
|
);
|
if (waylineUrl.code !== 0)
|
return this._showMessage.error(waylineUrl.message);
|
const { fileInfoObj } = await analyzeKmzFile(
|
`${waylineUrl.data}?_t=${new Date().getTime()}`,
|
);
|
const templateXML = await fileInfoObj['wpmz/template.kml'];
|
const waylinesXML = await fileInfoObj['wpmz/waylines.wpml'];
|
const templateXMLJSON = XMLToJSON(templateXML)?.['Document'];
|
const waylinesXMLJSON = XMLToJSON(waylinesXML)?.['Document'];
|
this.drawPlanarWayline(templateXMLJSON, waylinesXMLJSON);
|
},
|
async drawPlanarWayline(templateXMLJSON, waylinesXMLJSON) {
|
let coordArr = null;
|
const placemark = templateXMLJSON.Folder?.Placemark;
|
// 取出点位
|
const coordinates =
|
placemark.Polygon?.outerBoundaryIs.LinearRing.coordinates?.[
|
'#text'
|
]?.split('\n') || [];
|
// 数组转换
|
coordArr = coordinates.map((coordinate) =>
|
coordinate
|
.replace(/\s+/g, '')
|
.split(',')
|
.map((v) => Number(v)),
|
);
|
// 获取当前经纬度海拔高度
|
const newCoordArr = [];
|
// 面状点位
|
for (let [index, coord] of coordArr.entries()) {
|
const [lng, lat] = coord;
|
const { height: hAltitude } = await getLnglatAltitude(
|
Number(lng),
|
Number(lat),
|
global.$viewer,
|
);
|
newCoordArr.push([lng, lat, hAltitude]);
|
}
|
// 航线点位
|
const waylinePoints = waylinesXMLJSON.Folder.Placemark;
|
const waylinePointLnglats = waylinePoints.map((json) => {
|
const executeHeight = Number(json.executeHeight['#text']);
|
const coordinate = json.Point.coordinates['#text']
|
.split(',')
|
.map((lnglat) => Number(lnglat));
|
coordinates.push();
|
return Cesium.Cartesian3.fromDegrees(
|
coordinate[0],
|
coordinate[1],
|
executeHeight,
|
);
|
});
|
// 绘制面状航线--------------------
|
waylinePointLnglats.unshift(this.droneCoordinates);
|
if (!this.clampToGroundshow) {
|
let cartesian = this.addTurnPoint(
|
waylinePointLnglats[0],
|
waylinePointLnglats[1],
|
);
|
waylinePointLnglats.splice(1, 0, cartesian);
|
}
|
|
global.$viewer.entities.add({
|
id: 'task_result_wayline',
|
polyline: {
|
width: 3,
|
positions: waylinePointLnglats,
|
material: Cesium.Color.CHARTREUSE,
|
zIndex: 1,
|
clampToGround: this.clampToGroundshow,
|
},
|
});
|
// 面状航线第一个点突出展示
|
this.StartingIncreasePoint(waylinePointLnglats);
|
// 面状判断当前点位数量
|
const cloneCoordArr = [...newCoordArr];
|
if (cloneCoordArr.length >= 3) {
|
cloneCoordArr.push(newCoordArr[0]);
|
}
|
|
this.$store.commit('SET_WAYLINE_POINTS', {
|
type: 'planar',
|
data: waylinePointLnglats,
|
planarOutline: cloneCoordArr,
|
planarPolygon: newCoordArr,
|
clampToGroundshow: this.clampToGroundshow,
|
});
|
|
// 绘制面状边框线--------------------
|
global.$viewer.entities.add({
|
id: 'task_planarOutline',
|
polyline: {
|
positions: Cesium.Cartesian3.fromDegreesArrayHeights(
|
cloneCoordArr.flat(),
|
),
|
width: 4,
|
material: new Cesium.PolylineOutlineMaterialProperty({
|
color: new Cesium.Color.fromBytes(74, 138, 233),
|
outlineWidth: 2,
|
outlineColor: Cesium.Color.WHITE,
|
}),
|
zIndex: -1,
|
clampToGround: true,
|
},
|
});
|
// 绘制面状地块--------------------
|
global.$viewer.entities.add({
|
id: 'task_planarWayline',
|
polygon: {
|
hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(
|
newCoordArr.flat(),
|
),
|
material: new Cesium.Color.fromBytes(75, 159, 221, 100),
|
outline: true,
|
outlineColor: new Cesium.Color.fromBytes(35, 85, 216, 255),
|
zIndex: -1,
|
clampToGround: true,
|
},
|
});
|
// 飞向此处
|
this.flyToRouterShow(waylinePointLnglats);
|
},
|
// 起点增加点展示
|
StartingIncreasePoint(wayData) {
|
let positions = this.clampToGroundshow ? wayData[1] : wayData[2];
|
removeById('task_point_start');
|
let setting = {
|
id: 'task_point_start',
|
position: positions,
|
billboard: {
|
image: this.PlanaBillboard('#2D8CF0'),
|
pixelOffset: new Cesium.Cartesian2(146, 72),
|
zIndex: 2,
|
clampToGround: this.clampToGroundshow,
|
},
|
};
|
global.$viewer.entities.add(setting);
|
},
|
//面状点设置
|
PlanaBillboard(color) {
|
const billboard = document.createElement('canvas');
|
const ctx = billboard.getContext('2d');
|
const radius = 4;
|
ctx.beginPath();
|
ctx.arc(radius, radius, radius, 0, 2 * Math.PI, false);
|
ctx.fillStyle = color; // 设置填充颜色
|
ctx.fill();
|
return billboard;
|
},
|
},
|
};
|
