Cesium中使用实时数据更新实体的实现问题求助

代码中的核心问题 #

• JSON文件加载错误：JSON.parse('本地路径')是把字符串解析成JSON，而非读取本地文件，前端必须通过fetch加载文件，且需避免跨域。
• await使用不当：await Cesium.IonResource.fromAssetId()未放在async函数中，会直接报错中断代码执行，导致页面空白。
• 朝向属性参数错误：VelocityOrientationProperty需要传入位置属性（SampledPositionProperty），而非单个坐标，否则无法计算动态朝向。
• 实时更新逻辑缺失：clock.onTick事件中没有实际获取新坐标并更新位置的代码。

修正后的完整代码 #

Cesium.Ion.defaultAccessToken = 'xxxx';

// 用async函数包裹异步操作
async function initCesium() {
    const viewer = new Cesium.Viewer('cesiumContainer', {
        terrainProvider: Cesium.createWorldTerrain()
    });
    
    const osmBuildings = viewer.scene.primitives.add(Cesium.createOsmBuildings());

    // 1. 正确加载JSON数据（需通过本地服务器访问，避免跨域）
    let data;
    try {
        const response = await fetch('./telemetryGet.json'); // 假设JSON与HTML同目录
        data = await response.json();
    } catch (err) {
        console.error('加载初始数据失败:', err);
        return;
    }

    // 初始化动态位置属性
    const dronePositions = new Cesium.SampledPositionProperty();
    const initialTime = Cesium.JulianDate.fromDate(new Date());
    const initialPosition = Cesium.Cartesian3.fromDegrees(
        data.longitude, 
        data.latitude, 
        data.altitude || 100 // 给高度设置默认值
    );
    dronePositions.addSample(initialTime, initialPosition);

    // 2. 正确加载Cesium Ion模型
    const airplaneUri = await Cesium.IonResource.fromAssetId(1634734);
    const DroneEntity = viewer.entities.add({
        position: dronePositions,
        model: { uri: airplaneUri },
        // 3. 传入位置属性计算动态朝向
        orientation: new Cesium.VelocityOrientationProperty(dronePositions),    
    });

    viewer.selectedEntity = DroneEntity;
    viewer.zoomTo(DroneEntity); // 直接缩放到无人机实体更精准

    // 4. 实现实时位置更新逻辑
    const clock = viewer.clock;
    let lastUpdated = clock.currentTime;
    clock.onTick.addEventListener(async function() {
        const dt = Cesium.JulianDate.secondsDifference(clock.currentTime, lastUpdated);
        if (dt >= 1.0) {
            lastUpdated = clock.currentTime;
            // 替换为你的实时数据源接口，此处示例重新加载本地JSON
            try {
                const latestResponse = await fetch('./telemetryGet.json');
                const latestData = await latestResponse.json();
                const newPosition = Cesium.Cartesian3.fromDegrees(
                    latestData.longitude, 
                    latestData.latitude, 
                    latestData.altitude || 100
                );
                // 添加新的位置采样点
                dronePositions.addSample(clock.currentTime, newPosition);
            } catch (err) {
                console.error('更新位置失败:', err);
            }
        }
    });
}

// 启动Cesium初始化
initCesium();

关键注意事项 #

• 跨域解决：必须通过本地服务器运行项目（比如VS Code的Live Server插件），不能直接双击HTML文件打开，否则会因跨域无法加载资源。
• 实时数据源：若需真正的实时数据，将fetch('./telemetryGet.json')替换为你的后端API接口，确保接口返回最新的经纬度和高度。
• Token有效性：确保Cesium.Ion.defaultAccessToken中的token有效，否则无法加载Ion平台的模型和地形。
• 模型朝向调整：如果模型朝向异常，可在model属性中添加headingPitchRoll参数修正朝向。

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