103 lines
2.7 KiB
JavaScript
103 lines
2.7 KiB
JavaScript
import { useState } from "react";
|
|
import { Entity, PointGraphics, useCesium } from "resium";
|
|
import { useInterval } from "ahooks";
|
|
import {
|
|
Cartesian3,
|
|
Color,
|
|
JulianDate,
|
|
LagrangePolynomialApproximation,
|
|
PolylineDashMaterialProperty,
|
|
SampledPositionProperty,
|
|
TimeInterval,
|
|
TimeIntervalCollection,
|
|
VelocityOrientationProperty,
|
|
} from "cesium";
|
|
|
|
const data = [
|
|
{ longitude: -29, latitude: -33, height: 0, time: 0 },
|
|
{ longitude: -29, latitude: -33, height: 1000000, time: 2 },
|
|
{ longitude: 18, latitude: -50, height: 1000000, time: 6 },
|
|
{ longitude: 80, latitude: -50, height: 1000000, time: 10 },
|
|
{ longitude: 157, latitude: -35, height: 1000000, time: 14 },
|
|
{ longitude: 178, latitude: -50, height: 1000000, time: 18 },
|
|
{ longitude: -130, latitude: -65, height: 1000000, time: 22 },
|
|
];
|
|
|
|
function Point() {
|
|
const { viewer } = useCesium();
|
|
const [delay, setDelay] = useState(1000);
|
|
|
|
const start = viewer.clock.startTime;
|
|
const stop = viewer.clock.stopTime;
|
|
|
|
const pathMaterial = new PolylineDashMaterialProperty({
|
|
dashLength: 20,
|
|
color: 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: 2,
|
|
// interpolationAlgorithm: LagrangePolynomialApproximation,
|
|
// });
|
|
|
|
return property;
|
|
}
|
|
|
|
const property = createProperty(data);
|
|
|
|
return (
|
|
<Entity
|
|
id={"point"}
|
|
position={property}
|
|
availability={
|
|
new TimeIntervalCollection([
|
|
new TimeInterval({
|
|
start: start,
|
|
stop: 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}
|
|
pixelSize={10}
|
|
outlineColor={Color.YELLOW}
|
|
outlineWidth={3}
|
|
/>
|
|
</Entity>
|
|
);
|
|
}
|
|
|
|
export default Point;
|