99 lines
2.6 KiB
JavaScript
99 lines
2.6 KiB
JavaScript
import { useState } from "react";
|
|
import { Entity, PointGraphics, useCesium } from "resium";
|
|
import { useInterval } from "ahooks";
|
|
import {
|
|
Cartesian3,
|
|
Color,
|
|
JulianDate,
|
|
LinearApproximation,
|
|
SampledPositionProperty,
|
|
TimeInterval,
|
|
TimeIntervalCollection,
|
|
VelocityOrientationProperty,
|
|
} from "cesium";
|
|
|
|
// 从南极到青藏高原
|
|
const dataAntarcticaToQTP = [
|
|
{ longitude: -110, latitude: -60, height: 0, time: 0 },
|
|
{ longitude: -110, latitude: -60, height: 1000000, time: 5 },
|
|
{ longitude: -30, latitude: -55, height: 1000000, time: 10 },
|
|
{ longitude: 30, latitude: -40, height: 1000000, time: 15 },
|
|
{ longitude: 65, latitude: -35, height: 1000000, time: 20 },
|
|
{ longitude: 95, latitude: -30, height: 1000000, time: 27 },
|
|
{ longitude: 95, latitude: -30, height: 0, time: 30 },
|
|
];
|
|
|
|
function Point() {
|
|
const { viewer } = useCesium();
|
|
|
|
const [delay, setDelay] = useState(1000);
|
|
|
|
const start = viewer.clock.startTime;
|
|
const stop = viewer.clock.stopTime;
|
|
|
|
const pathMaterial = new Color(4 / 255, 251 / 255, 253 / 255);
|
|
|
|
useInterval(() => {
|
|
if (viewer.clock?.shouldAnimate) setDelay(undefined);
|
|
}, delay);
|
|
|
|
/**
|
|
* 计算飞行路径
|
|
* 数据坐标
|
|
* {SampledPositionProperty|*}
|
|
*/
|
|
function createProperty(source) {
|
|
let property = new SampledPositionProperty();
|
|
for (let i = 0; i < source.length; i++) {
|
|
let time = JulianDate.addSeconds(start, source[i].time, new JulianDate());
|
|
let position = Cartesian3.fromDegrees(
|
|
source[i].longitude,
|
|
source[i].latitude,
|
|
source[i].height
|
|
);
|
|
// 添加位置，和时间对应
|
|
property.addSample(time, position);
|
|
}
|
|
property.setInterpolationOptions({
|
|
interpolationDegree: 1,
|
|
interpolationAlgorithm: LinearApproximation,
|
|
});
|
|
return property;
|
|
}
|
|
|
|
const property = createProperty(dataAntarcticaToQTP);
|
|
|
|
return (
|
|
<Entity
|
|
id={"point"}
|
|
position={property}
|
|
availability={
|
|
new TimeIntervalCollection([
|
|
new TimeInterval({
|
|
start,
|
|
stop,
|
|
}),
|
|
])
|
|
}
|
|
orientation={new VelocityOrientationProperty(property)}
|
|
path={{
|
|
resolution: 1,
|
|
material: pathMaterial,
|
|
// leadTime、trailTime 不设置 path全显示
|
|
leadTime: 0, // 设置为0时 模型通过后显示path
|
|
// trailTime: 0, // 设置为0时 模型通过后隐藏path
|
|
width: 2,
|
|
}}
|
|
>
|
|
<PointGraphics
|
|
show={true}
|
|
color={Color.SKYBLUE}
|
|
outlineColor={Color.YELLOW}
|
|
outlineWidth={3}
|
|
/>
|
|
</Entity>
|
|
);
|
|
}
|
|
|
|
export default Point;
|