cesium事件监听总结

Cesium 监听地图渲染事件的方法

在 Cesium 中监听地图渲染状态和事件可以通过以下几种方式实现：

1. 监听场景渲染前事件 (preRender)

viewer.scene.preRender.addEventListener(function(scene, time) {
    // 在每一帧渲染前调用
    console.log("即将渲染新帧", time);
});

2. 监听场景渲染后事件 (postRender)

viewer.scene.postRender.addEventListener(function(scene, time) {
    // 在每一帧渲染完成后调用
    console.log("完成渲染新帧", time);
    
    // 可以在这里获取当前相机位置等信息
    var cameraPosition = viewer.camera.position;
    console.log("相机位置:", cameraPosition);
});

3. 监听相机变化事件 (camera.changed)

viewer.camera.changed.addEventListener(function() {
    // 当相机位置或视角发生变化时触发
    console.log("相机状态已改变");
});

4. 监听地形/影像图层加载事件

监听地形加载状态

viewer.terrainProvider.readyPromise.then(function() {
    console.log("地形数据已加载完成");
});

viewer.scene.globe.tileLoadProgressEvent.addEventListener(function(remaining) {
    console.log("剩余加载的地形瓦片:", remaining);
});

监听影像图层加载状态

var imageryLayer = viewer.imageryLayers.addImageryProvider(
    new Cesium.ArcGisMapServerImageryProvider({
        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
    })
);

imageryLayer.readyEvent.addEventListener(function() {
    console.log("影像图层已加载完成");
});

5. 综合渲染状态监听示例

// 创建一个渲染状态对象
var renderStatus = {
    isRendering: false,
    lastFrameTime: null,
    frameCount: 0
};

// 监听渲染开始
viewer.scene.preRender.addEventListener(function() {
    renderStatus.isRendering = true;
    renderStatus.frameCount++;
});

// 监听渲染结束
viewer.scene.postRender.addEventListener(function() {
    renderStatus.isRendering = false;
    renderStatus.lastFrameTime = new Date();
    
    // 每100帧输出一次状态
    if (renderStatus.frameCount % 100 === 0) {
        console.log("渲染状态:", {
            frameCount: renderStatus.frameCount,
            lastFrameTime: renderStatus.lastFrameTime,
            cameraPosition: viewer.camera.position
        });
    }
});

// 监听相机变化
viewer.camera.changed.addEventListener(function() {
    console.log("相机视角变化");
});

6. 性能监控和帧率计算

var lastTime = performance.now();
var frameCount = 0;
var fps = 0;

viewer.scene.postRender.addEventListener(function() {
    frameCount++;
    var currentTime = performance.now();
    
    if (currentTime - lastTime >= 1000) {
        fps = frameCount;
        frameCount = 0;
        lastTime = currentTime;
        
        console.log("当前FPS:", fps);
        console.log("渲染性能:", viewer.scene._performanceDisplay);
    }
});

7. 监听特定实体渲染状态

var entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(116.4, 39.9),
    point: {
        pixelSize: 10,
        color: Cesium.Color.RED
    }
});

// 监听实体渲染变化
viewer.scene.postRender.addEventListener(function() {
    var position = entity.position.getValue(viewer.clock.currentTime);
    var pixelSize = viewer.scene.context.uniformState.viewport.width;
    
    if (position && Cesium.Cartesian3.distance(position, viewer.camera.position) < 100000) {
        console.log("实体即将进入视野");
    }
});

注意事项

1. 性能考虑：在渲染回调中避免执行耗时操作，否则会影响渲染性能
2. 内存管理：记得在不需要时移除事件监听器
3. 异步加载：地形和影像图层的加载是异步的，需要使用Promise或事件监听
4. 错误处理：添加适当的错误处理逻辑