如何使用Cesium JS在3D地图添加标记？含实时追踪需求

Hey there! Let's get your CesiumJS real-time tracking system up and running smoothly. Adding a 3D marker that moves over time is totally achievable, and I’ll break down the key fixes and improvements for your code.

First, let’s clean up your initial entity code to avoid small issues, then dive into the time-based movement logic.

1. Clean Up Your Base Entity Setup #

Your existing code has a minor typo (entitylable → entityLabel) and is setting a static position, which won’t update over time. Here’s a polished version of your base entity:

// Initialize your 3D marker entity with label and model
var entityLabel = viewer.entities.add({
  label: {
    show: true,
    showBackground: true,
    font: '20px monospace',
    fillColor: Cesium.Color.GHOSTWHITE,
    horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    pixelOffset: new Cesium.Cartesian2(0, -25),
    disableDepthTestDistance: Number.POSITIVE_INFINITY
  },
  model: {
    uri: "@Url.Content("~/Images/3dCesium_Man.glb")" // Ensure this path is correct!
  }
});

2. Two Ways to Make the Marker Move Over Time #

Cesium provides two primary approaches for time-based movement, depending on your use case:

Option 1: Predefined Trajectory (SampledPositionProperty) #

Use this if you have a set of pre-recorded position-time pairs (e.g., a simulated path). Cesium will automatically interpolate positions between your time points for smooth movement.

// Create a sampled position property to hold time-based positions
var positionProperty = new Cesium.SampledPositionProperty();

// Get the start time from Cesium's clock
var startTime = viewer.clock.startTime;

// Add position samples at different time points (adjust coordinates as needed)
// Sample 1: Start position at clock start
positionProperty.addSample(
  startTime,
  Cesium.Cartesian3.fromDegrees(yourInitialLon, yourInitialLat, 0)
);

// Sample 2: Position 10 seconds later
positionProperty.addSample(
  Cesium.JulianDate.addSeconds(startTime, 10, new Cesium.JulianDate()),
  Cesium.Cartesian3.fromDegrees(yourInitialLon + 0.005, yourInitialLat + 0.005, 0)
);

// Sample 3: Position 20 seconds later
positionProperty.addSample(
  Cesium.JulianDate.addSeconds(startTime, 20, new Cesium.JulianDate()),
  Cesium.Cartesian3.fromDegrees(yourInitialLon + 0.01, yourInitialLat, 0)
);

// Assign the sampled property to your entity's position
entityLabel.position = positionProperty;

// Optional: Make the model face the direction it's moving
entityLabel.orientation = new Cesium.VelocityOrientationProperty(positionProperty);

Option 2: Real-Time Position Updates (For Live Tracking) #

Use this if you’re pulling live position data (e.g., from a backend API, WebSocket, or sensor). We’ll use a timer to regularly update the marker’s position.

// Set an initial position for your marker
var currentLon = yourInitialLon;
var currentLat = yourInitialLat;
entityLabel.position = Cesium.Cartesian3.fromDegrees(currentLon, currentLat, 0);

// Simulate real-time position updates (replace this with your actual data fetch logic)
setInterval(() => {
  // Fetch new coordinates from your data source here
  // Example: Move the marker slightly east and north each second
  currentLon += 0.0001;
  currentLat += 0.0001;

  // Update the entity's position
  var newPosition = Cesium.Cartesian3.fromDegrees(currentLon, currentLat, 0);
  entityLabel.position.setValue(newPosition);

  // Optional: Make the model face the direction of movement
  var previousPosition = entityLabel.position.getValue(Cesium.JulianDate.addSeconds(viewer.clock.currentTime, -1, new Cesium.JulianDate()));
  if (previousPosition) {
    var direction = Cesium.Cartesian3.subtract(newPosition, previousPosition, new Cesium.Cartesian3());
    Cesium.Cartesian3.normalize(direction, direction);
    var heading = Cesium.Math.atan2(direction.x, direction.z);
    var orientation = Cesium.Transforms.headingPitchRollQuaternion(newPosition, new Cesium.HeadingPitchRoll(heading, 0, 0));
    entityLabel.orientation.setValue(orientation);
  }
}, 1000); // Update every 1 second (adjust interval as needed)

Key Notes to Remember #

• Static vs. Dynamic Position: You can’t just assign a single Cartesian3 value to entity.position and expect it to update over time—use Cesium’s property types (like SampledPositionProperty) or explicitly update the position’s value in real time.
• Model Path: Double-check that your model.uri path is correct relative to your application’s root.
• Performance: For high-frequency updates (e.g., 10+ times per second), use requestAnimationFrame instead of setInterval to sync with Cesium’s rendering loop.

内容的提问来源于stack exchange，提问作者Gargee