import { ref,reactive } from 'vue'
|
import * as Cesium from 'cesium';
|
// import { appointroutePlanning } from '@/api/RoutePlanning';
|
import { analyzeKmzFile, XMLToJSON } from '@/utils/cesium/kmz.js';
|
import { getLnglatAltitude, getPositionsHeight, getLnglatDist, cartesian3Convert, getCenterPoint } from '@/utils/cesium/mapUtil'
|
import cesiumOperation from '@/utils/cesium-tsa';
|
const { removeAllPoint, removeById, flyTo } = cesiumOperation();
|
|
import { ElMessage } from 'element-plus'
|
|
import { useMyStore } from '@/store'
|
|
export function initPlanarWayline () {
|
const store = useMyStore()
|
const state = reactive({
|
droneCoordinates: null,
|
longitude: 0, // 机场经纬度
|
latitude: 0,
|
clampToGroundshow: (store.state.common.mapSetting.visual == '2D' ? true : false)
|
})
|
async function planarWayline (route:any,longitude:any, latitude:any) {
|
removeAllPoint();
|
if (!route || !longitude) return;
|
state.longitude = longitude
|
state.latitude = latitude
|
// 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 { fileInfoObj } = await analyzeKmzFile(`${route}?_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'];
|
drawPlanarWayline(templateXMLJSON, waylinesXMLJSON);
|
}
|
async function drawPlanarWayline(templateXMLJSON:any, waylinesXMLJSON:any) {
|
let coordArr = null;
|
const placemark = templateXMLJSON.Folder?.Placemark;
|
// 取出点位
|
const coordinates = placemark.Polygon?.outerBoundaryIs.LinearRing.coordinates?.['#text']?.split('\n') || [];
|
// 数组转换
|
coordArr = coordinates.map((coordinate:any) =>
|
coordinate
|
.replace(/\s+/g, '')
|
.split(',')
|
.map((v) => Number(v)),
|
);
|
// 获取当前经纬度海拔高度
|
const newCoordArr = [];
|
// 获取机场信息
|
getLnglatAltitude(state.longitude, state.latitude, window.cesiumViewer).then((res) => {
|
state.droneCoordinates = Cesium.Cartesian3.fromDegrees(
|
Number(state.longitude),
|
Number(state.latitude),
|
Number(res.height),
|
)
|
})
|
// 面状点位
|
for (let [index, coord] of coordArr.entries()) {
|
const [lng, lat] = coord;
|
const { height: hAltitude } = await getLnglatAltitude(
|
Number(lng),
|
Number(lat),
|
window.cesiumViewer,
|
);
|
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(state.droneCoordinates);
|
if (!state.clampToGroundshow) {
|
let cartesian = addTurnPoint(
|
waylinePointLnglats[0],
|
waylinePointLnglats[1],
|
);
|
waylinePointLnglats.splice(1, 0, cartesian);
|
}
|
|
window.cesiumViewer.entities.add({
|
id: 'task_result_wayline',
|
polyline: {
|
width: 3,
|
positions: waylinePointLnglats,
|
material: Cesium.Color.CHARTREUSE,
|
zIndex: 1,
|
clampToGround: state.clampToGroundshow,
|
},
|
});
|
// 面状航线第一个点突出展示
|
StartingIncreasePoint(waylinePointLnglats);
|
// 面状判断当前点位数量
|
const cloneCoordArr = [...newCoordArr];
|
if (cloneCoordArr.length >= 3) {
|
cloneCoordArr.push(newCoordArr[0]);
|
}
|
|
store.commit('SET_WAYLINE_POINTS', {
|
type: 'planar',
|
data: waylinePointLnglats,
|
planarOutline: cloneCoordArr,
|
planarPolygon: newCoordArr,
|
clampToGroundshow: state.clampToGroundshow,
|
});
|
|
// 绘制面状边框线--------------------
|
window.cesiumViewer.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,
|
},
|
});
|
// 绘制面状地块--------------------
|
window.cesiumViewer.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,
|
},
|
});
|
// 飞向此处
|
flyToRouterShow(waylinePointLnglats);
|
}
|
// 指向该区域
|
function flyToRouterShow (waylinePosition:any) {
|
let cartesianlengthArr = waylinePosition.map((cartesian:any) => {
|
return [
|
cartesian3Convert(cartesian, window.cesiumViewer).longitude,
|
cartesian3Convert(cartesian, window.cesiumViewer).latitude,
|
]
|
})
|
const centerpoint = getCenterPoint(cartesianlengthArr)
|
let maxlength = 0
|
cartesianlengthArr.forEach((item:any, index:any) => {
|
let banseTwoPoints = getLnglatDist(
|
item[0],
|
item[1],
|
centerpoint.lng,
|
centerpoint.lat,
|
)
|
if (banseTwoPoints > maxlength) {
|
maxlength = banseTwoPoints
|
}
|
})
|
let flyNum = state.clampToGroundshow ? 7 : 12
|
flyTo(
|
{ longitude: centerpoint.lng, latitude: centerpoint.lat },
|
3,
|
maxlength * flyNum,
|
)
|
}
|
// 在机场和第一个点直接增加一个中间转折点
|
function addTurnPoint (firstPoint:any, SecondPoint:any) {
|
const dronePosition = cartesian3Convert(firstPoint, window.cesiumViewer)
|
const firstPosition = cartesian3Convert(SecondPoint, window.cesiumViewer)
|
return new Cesium.Cartesian3.fromDegrees(
|
dronePosition?.longitude,
|
dronePosition?.latitude,
|
firstPosition?.height,
|
)
|
}
|
function StartingIncreasePoint(wayData) {
|
let positions = state.clampToGroundshow ? wayData[1] : wayData[2];
|
removeById('task_point_start');
|
let setting = {
|
id: 'task_point_start',
|
position: positions,
|
billboard: {
|
image: PlanaBillboard('#2D8CF0'),
|
pixelOffset: new Cesium.Cartesian2(146, 72),
|
zIndex: 2,
|
clampToGround: state.clampToGroundshow,
|
},
|
};
|
window.cesiumViewer.entities.add(setting);
|
}
|
//面状点设置
|
function 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;
|
}
|
return {
|
planarWayline
|
}
|
}
|
