JSFiddle - React, Tailwind, and code Playground

by falldeaf

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CesiumJS Moving Point Example</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        #cesiumContainer { width: 100%; height: 100vh; }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script src="app.js"></script> <!-- Your JavaScript file -->
</body>
</html>

JavaScript

// Initialize the Cesium Viewer in the HTML element with the ID 'cesiumContainer'.
const viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain()
});

// Sample path with latitude, longitude, and altitude.
const samplePath = [
    { lat: 35.0, lon: -120.0, alt: 10000.0 },
    { lat: 40.0, lon: -110.0, alt: 15000.0 },
    { lat: 45.0, lon: -100.0, alt: 20000.0 },
    { lat: 50.0, lon: -90.0, alt: 25000.0 }
];

// Create a time-dynamic position property.
const property = new Cesium.SampledPositionProperty();

samplePath.forEach((point, index) => {
    const time = Cesium.JulianDate.addSeconds(Cesium.JulianDate.now(), index * 10, new Cesium.JulianDate());
    const position = Cesium.Cartesian3.fromDegrees(point.lon, point.lat, point.alt);
    property.addSample(time, position);

    console.log(`Added point: ${point.lat}, ${point.lon}, ${point.alt} at time ${time.toString()}`);
});

// Create a point entity.
const movingPoint = viewer.entities.add({
    position: property,
    point: {
        pixelSize: 10,
        color: Cesium.Color.RED
    }
});

// Configure the viewer's clock and timeline.
viewer.clock.multiplier = 10; // Speed up the animation
viewer.clock.shouldAnimate = true;
viewer.timeline.zoomTo(property.startTime, property.stopTime);