Cesium中Scene模块学习和使用

Scene是Cesium中比较重要的模块之一，因为学习Cesium初期，部分api还没使用到，我就从实用性的角度，将我实战中所用到的相关api进行分析，并逐步进行补充。

设置地球模型底图颜色和场景的背景颜色

通过scene可以找到globe球体的属性，并通过globe的baseColor属性修改地球模型底图的颜色。

const viewer = new Viewer('cesiumContainer')  
const scene = viewer.scene  

scene.globe.baseColor = Cesium.Color.BLACK  

设置场景背景颜色，可以先通过scene.skybox隐藏星空盒子背景，然后通过scene.backgroundColor修改背景颜色。

scene.skybox = false  
scene.backgroundColor = Cesium.Color.CORNFLOWERBLUE  

通过鼠标事件获取场景中某个坐标或者某个实例数据

我在实现鼠标事件交互时，会获取地图中的坐标或者想通过点击某个实例点来获取它的id，这个时候就需要通过scene.pick(position)方法来获取相关数据。

这里handler是Cesium的一个事件监听实例，callback是一个回调函数，这是一个单击事件，具体我们看一下，通过鼠标点击地图中的某一实例点，可以获取到对应的坐标position，通过scene.pick()接收一个坐标数据，则会返回实例点的具体数据（pickedObject）。

const normalEvent = {  
    click: function(handler, callback) {  
        handler.setInputAction( movement => {  
            const position = movement.position  
            const pickedObject = viewer.scene.pick(position)  
            callback(pickedObject, position)  
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)  
    },  
    dbclick:...  
}

性能提高

在初期学习时，我构建的地图实例的帧数感人，特别是在大量数据加载时，Cesium给出了一个提高性能的方案，提供了scene.requestRenderMode接口，该属性接收一个布尔值，如果设置为true，则只会在指定情况下进行渲染。这些环境包括：

• 通过Cesium的摄像模块api修改视图位置或方向。
• 仿真时间超过了指定的阈值。
• 加载在地形，图像，3D瓷砖，或数据源，包括每个单独的瓷砖加载。在较低的级别，当通过URI或blob解析web请求或从web工作者返回异步流程时，将触发此操作。
• 添加、删除或更改全球图像层。
• 地理高程模型改变。
• 场景模式变化。
• 框架是用Cesium API显式呈现的。

除开上述情况，其它通过Cesium API执行的操作不会主动进行渲染，也可以理解为只监听上述情况对应的API进行渲染。这样在空闲状态下，CPU的利用率会大大降低，提高性能。

配置scene.requestRenderMode属性方法:

// new Viwer实例时进行配置  
const viewer = new Cesium.Viewer('cesiumContainer', {  
    requestRenderMode : true  
});  

// 或者new了Viewer实例之后配置  
const viewer = new Cesium.Viewer('cesiumContainer')  
viewer.scene.requestRenderMode = true  

那如果我们希望使用上述场景以外的某个API时也进行渲染，应该怎么办呢，Cesium提供了scene.requestRender()方法手动渲染，如在隐藏星空背景后，执行一次scene.requestRender()方法进行渲染。

// Hides the stars  
scene.skyBox.show = false  
// Explicitly render a new frame  
scene.requestRender()  

还有一种情况，如果场景中有随时间变化的元素，比如动画、灯光变化、水面罩或视频，就要考虑到设置多少秒渲染一次，以提高性能。因为如果有动态元素，在默认情况下，会0.0秒进行一次渲染。Cesium提供了scene.maximumRenderTimeChange API，接收Number类型数据，设置多少秒后请求一个新帧。

const viewer = new Cesium.Viewer('cesiumContainer', {  
    requestRenderMode : true,  
    maximumRenderTimeChange : 0.5  
})  

如果没有随时间变化的元素，则可将maximumRenderTimeChange设置为无穷大

var viewer = new Cesium.Viewer('cesiumContainer', {  
    requestRenderMode : true,
    maximumRenderTimeChange : Infinity  
})

性能优化参考网站：Improving Performance with Explicit Rendering

如发现我有理解错误的请指教。