import * as Cesium from 'cesium'
|
|
import {
|
analysisPointLineKmz,
|
handlePointListForKmz,
|
getPolyLine,
|
getNewPolygonData,
|
} from '@/hooks/common'
|
|
import rwqfdImg from '@/assets/images/signMachineNest/rwqfd.png'
|
import endPointImg from '@/assets/images/EndPointicon.png'
|
|
import { ArrowLineMaterialProperty } from '@/utils/cesium/Material'
|
import { flyVisual } from '@/utils/cesium/mapUtil'
|
|
let arrowLineMaterialProperty = new ArrowLineMaterialProperty({
|
color: new Cesium.Color(128 / 255, 215 / 255, 255 / 255, 1),
|
directionColor: new Cesium.Color(1, 1, 1, 1),
|
outlineColor: new Cesium.Color(1, 1, 1, 1),
|
outlineWidth: 0,
|
speed: 5,
|
})
|
|
export function useRouteLine () {
|
let viewer = null
|
let previewDataSource = null
|
|
const curRouteLineData = ref({
|
data: [],
|
polygonList: '',
|
templateType: '',
|
startPoint: '',
|
execute_height_mode: '',
|
auto_flight_speed: '',
|
wayline_type: '',
|
infos: {}
|
})
|
|
const routeLineListClick = async data => {
|
if (data.select) return
|
curRouteLineData.value.data.forEach(i => (i.select = false))
|
data.select = true
|
await renderRouteLine(data.data)
|
}
|
|
async function renderPreviewLine (kmzUrl, wayline_type, cb = () => { }, infos = {}) {
|
|
|
resetCurRouteLineData()
|
|
const { pointPlacemark, polygonList, templateType, startPoint, execute_height_mode, auto_flight_speed } =
|
await analysisPointLineKmz(kmzUrl)
|
|
curRouteLineData.value = {
|
polygonList,
|
templateType,
|
startPoint,
|
execute_height_mode,
|
auto_flight_speed,
|
wayline_type,
|
infos: infos
|
}
|
|
cb(curRouteLineData.value.polygonList.map(item => [Number(item[0]), Number(item[1])]))
|
|
if (templateType === 'mapping3d') {
|
curRouteLineData.value.data = pointPlacemark.map(item => ({
|
data: item,
|
select: false,
|
}))
|
routeLineListClick(curRouteLineData.value.data[0])
|
} else {
|
curRouteLineData.value.data = []
|
await renderRouteLine(pointPlacemark)
|
}
|
}
|
|
async function renderRouteLine (data) {
|
if (previewDataSource) {
|
removePreviewLine()
|
} else {
|
previewDataSource = new Cesium.CustomDataSource('previewDataSource')
|
await viewer.dataSources.add(previewDataSource)
|
}
|
|
let lineMaterial = [2, 4].includes(Number(curRouteLineData.value.wayline_type))
|
? Cesium.Color.fromCssColorString('#00D690')
|
: arrowLineMaterialProperty
|
|
if ([2, 4].includes(Number(curRouteLineData.value.wayline_type))) {
|
if (curRouteLineData.value.templateType === 'mapping3d') {
|
let newPolygonData = getNewPolygonData(curRouteLineData.value.data)
|
|
let newPolygonDisposePositions = newPolygonData.map(i =>
|
Cesium.Cartesian3.fromDegrees(Number(i[0]), Number(i[1]))
|
)
|
|
previewDataSource.entities.add({
|
polygon: {
|
hierarchy: new Cesium.CallbackProperty(() => {
|
return new Cesium.PolygonHierarchy(newPolygonDisposePositions)
|
}, false),
|
material: Cesium.Color.fromBytes(255, 228, 22, 44),
|
outline: false,
|
outlineWidth: 2,
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
},
|
})
|
}
|
|
let polygonDisposePositions = curRouteLineData.value.polygonList.map(item => {
|
return Cesium.Cartesian3.fromDegrees(Number(item[0]), Number(item[1]), Number(item[2]))
|
})
|
|
previewDataSource.entities.add({
|
polygon: {
|
hierarchy: new Cesium.CallbackProperty(() => {
|
return new Cesium.PolygonHierarchy(polygonDisposePositions)
|
}, false),
|
material: Cesium.Color.fromBytes(45, 140, 240, 99),
|
outline: false,
|
outlineWidth: 2,
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
},
|
|
polyline: {
|
width: 2,
|
material: Cesium.Color.fromBytes(45, 140, 240, 255),
|
clampToGround: true,
|
positions: new Cesium.CallbackProperty(() => {
|
return [...polygonDisposePositions, polygonDisposePositions[0]]
|
}, false),
|
},
|
})
|
}
|
|
let pointList = handlePointListForKmz({
|
placemark: data,
|
startPoint: curRouteLineData.value.startPoint,
|
execute_height_mode: curRouteLineData.value.execute_height_mode,
|
auto_flight_speed: curRouteLineData.value.auto_flight_speed,
|
})
|
|
pointList.shift()
|
|
if (JSON.stringify(curRouteLineData.value.infos) != '{}') {
|
pointList.unshift({
|
longitude: curRouteLineData.value.infos[0].longitude,
|
latitude: curRouteLineData.value.infos[0].latitude,
|
height: curRouteLineData.value.infos[0].height || 0,
|
})
|
}
|
|
const routePositions = pointList.map(i => Cesium.Cartesian3.fromDegrees(Number(i.longitude), Number(i.latitude), Number(i.height)))
|
|
previewDataSource.entities.add({
|
polyline: {
|
width: 4,
|
positions: routePositions,
|
material: lineMaterial,
|
clampToGround: false,
|
},
|
})
|
|
// 落点线
|
; (pointList || [])?.forEach((item, index) => {
|
const topPosition = Cesium.Cartesian3.fromDegrees(Number(item.longitude), Number(item.latitude), Number(item.height))
|
let setting = {
|
position: topPosition,
|
polyline: getPolyLine(viewer, { value: pointList }, index),
|
}
|
previewDataSource.entities.add(setting)
|
})
|
|
// 终点
|
previewDataSource.entities.add({
|
position: routePositions[routePositions.length - 1],
|
billboard: {
|
image: new Cesium.ConstantProperty(endPointImg),
|
width: 30,
|
height: 30,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 底部对齐
|
},
|
})
|
// 起点
|
previewDataSource.entities.add({
|
position: routePositions[0],
|
billboard: {
|
image: rwqfdImg,
|
width: 50,
|
height: 50,
|
},
|
})
|
|
flyVisual(
|
pointList.map(i => [Number(i.longitude), Number(i.latitude), Number(i.height)]),
|
viewer,
|
20
|
)
|
}
|
|
function removePreviewLine () {
|
previewDataSource?.entities.removeAll()
|
}
|
|
function resetCurRouteLineData () {
|
curRouteLineData.value = {
|
data: [],
|
polygonList: '',
|
templateType: '',
|
startPoint: '',
|
execute_height_mode: '',
|
auto_flight_speed: '',
|
wayline_type: '',
|
}
|
}
|
|
const initViewer = (v) => {
|
viewer = v
|
}
|
|
onBeforeUnmount(() => {
|
resetCurRouteLineData()
|
removePreviewLine()
|
})
|
|
return {
|
curRouteLineData,
|
routeLineListClick,
|
initViewer,
|
renderPreviewLine,
|
removePreviewLine,
|
resetCurRouteLineData
|
}
|
}
|
