第15章 - 样式与可视化效果

第15章：样式与可视化效果

15.1 颜色与材质

15.1.1 颜色定义

// 预定义颜色
Cesium.Color.RED
Cesium.Color.GREEN
Cesium.Color.BLUE
Cesium.Color.YELLOW
Cesium.Color.WHITE
Cesium.Color.BLACK
Cesium.Color.TRANSPARENT

// 带透明度
Cesium.Color.RED.withAlpha(0.5)

// CSS 颜色字符串
Cesium.Color.fromCssColorString('#ff0000')
Cesium.Color.fromCssColorString('rgb(255, 0, 0)')
Cesium.Color.fromCssColorString('rgba(255, 0, 0, 0.5)')

// RGBA 值 (0-1)
new Cesium.Color(1.0, 0.0, 0.0, 1.0)

// 字节值 (0-255)
Cesium.Color.fromBytes(255, 0, 0, 255)

// HSL
Cesium.Color.fromHsl(0.0, 1.0, 0.5, 1.0)

// 随机颜色
Cesium.Color.fromRandom({ alpha: 0.8 })

15.1.2 材质类型

// 纯色材质
entity.polygon.material = Cesium.Color.RED

// 图片材质
entity.polygon.material = new Cesium.ImageMaterialProperty({
    image: 'texture.png',
    repeat: new Cesium.Cartesian2(4, 4),
    transparent: true
})

// 条纹材质
entity.polygon.material = new Cesium.StripeMaterialProperty({
    evenColor: Cesium.Color.WHITE,
    oddColor: Cesium.Color.BLACK,
    repeat: 10,
    offset: 0,
    orientation: Cesium.StripeOrientation.HORIZONTAL
})

// 网格材质
entity.polygon.material = new Cesium.GridMaterialProperty({
    color: Cesium.Color.YELLOW,
    cellAlpha: 0.2,
    lineCount: new Cesium.Cartesian2(8, 8),
    lineThickness: new Cesium.Cartesian2(2, 2)
})

// 棋盘格材质
entity.polygon.material = new Cesium.CheckerboardMaterialProperty({
    evenColor: Cesium.Color.WHITE,
    oddColor: Cesium.Color.BLACK,
    repeat: new Cesium.Cartesian2(4, 4)
})

// 点阵材质
entity.polygon.material = new Cesium.DotMaterialProperty({
    lightColor: Cesium.Color.WHITE,
    darkColor: Cesium.Color.BLACK,
    repeat: new Cesium.Cartesian2(8, 8)
})

15.1.3 折线材质

// 实线
entity.polyline.material = Cesium.Color.RED

// 虚线
entity.polyline.material = new Cesium.PolylineDashMaterialProperty({
    color: Cesium.Color.RED,
    dashLength: 16,
    dashPattern: parseInt('1111000011110000', 2)
})

// 箭头
entity.polyline.material = new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED)

// 发光
entity.polyline.material = new Cesium.PolylineGlowMaterialProperty({
    color: Cesium.Color.CYAN,
    glowPower: 0.3,
    taperPower: 1.0
})

// 轮廓
entity.polyline.material = new Cesium.PolylineOutlineMaterialProperty({
    color: Cesium.Color.RED,
    outlineWidth: 2,
    outlineColor: Cesium.Color.BLACK
})

15.2 后处理效果

15.2.1 内置后处理

// 泛光效果
viewer.scene.postProcessStages.bloom.enabled = true
viewer.scene.postProcessStages.bloom.uniforms.brightness = 1.0
viewer.scene.postProcessStages.bloom.uniforms.glowOnly = false
viewer.scene.postProcessStages.bloom.uniforms.contrast = 128
viewer.scene.postProcessStages.bloom.uniforms.delta = 1.0
viewer.scene.postProcessStages.bloom.uniforms.sigma = 3.78
viewer.scene.postProcessStages.bloom.uniforms.stepSize = 5

// 环境光遮蔽
viewer.scene.postProcessStages.ambientOcclusion.enabled = true
viewer.scene.postProcessStages.ambientOcclusion.uniforms.intensity = 3.0
viewer.scene.postProcessStages.ambientOcclusion.uniforms.bias = 0.1
viewer.scene.postProcessStages.ambientOcclusion.uniforms.lengthCap = 0.03
viewer.scene.postProcessStages.ambientOcclusion.uniforms.stepSize = 1.0
viewer.scene.postProcessStages.ambientOcclusion.uniforms.frustumLength = 1000

// FXAA 抗锯齿
viewer.scene.postProcessStages.fxaa.enabled = true

15.2.2 自定义后处理

// 灰度效果
const grayscaleStage = new Cesium.PostProcessStage({
    fragmentShader: `
        uniform sampler2D colorTexture;
        in vec2 v_textureCoordinates;
        
        void main() {
            vec4 color = texture(colorTexture, v_textureCoordinates);
            float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
            out_FragColor = vec4(vec3(gray), color.a);
        }
    `
});
viewer.scene.postProcessStages.add(grayscaleStage);

// 反色效果
const invertStage = new Cesium.PostProcessStage({
    fragmentShader: `
        uniform sampler2D colorTexture;
        in vec2 v_textureCoordinates;
        
        void main() {
            vec4 color = texture(colorTexture, v_textureCoordinates);
            out_FragColor = vec4(vec3(1.0) - color.rgb, color.a);
        }
    `
});
viewer.scene.postProcessStages.add(invertStage);

15.3 光照与阴影

// 启用光照
viewer.scene.globe.enableLighting = true
viewer.scene.globe.dynamicAtmosphereLighting = true

// 阴影配置
viewer.shadows = true
viewer.terrainShadows = Cesium.ShadowMode.ENABLED

const shadowMap = viewer.scene.shadowMap
shadowMap.enabled = true
shadowMap.size = 2048
shadowMap.softShadows = true
shadowMap.darkness = 0.3

// 自定义光源
viewer.scene.light = new Cesium.DirectionalLight({
    direction: new Cesium.Cartesian3(0.5, -0.5, -0.5),
    color: Cesium.Color.WHITE,
    intensity: 2.0
})

15.4 热力图效果

// 简单热力图实现
class HeatmapLayer {
    constructor(viewer, data, options = {}) {
        this.viewer = viewer
        this.data = data
        this.radius = options.radius || 20
        this.blur = options.blur || 15
        this.entity = null
    }
    
    create() {
        // 使用 Canvas 生成热力图
        const canvas = document.createElement('canvas')
        canvas.width = 512
        canvas.height = 512
        const ctx = canvas.getContext('2d')
        
        // 绘制热力点
        this.data.forEach(point => {
            const gradient = ctx.createRadialGradient(
                point.x, point.y, 0,
                point.x, point.y, this.radius
            )
            gradient.addColorStop(0, `rgba(255, 0, 0, ${point.intensity})`)
            gradient.addColorStop(1, 'rgba(255, 0, 0, 0)')
            
            ctx.fillStyle = gradient
            ctx.fillRect(point.x - this.radius, point.y - this.radius, 
                         this.radius * 2, this.radius * 2)
        })
        
        // 添加到场景
        this.entity = this.viewer.entities.add({
            rectangle: {
                coordinates: Cesium.Rectangle.fromDegrees(
                    this.bounds.west, this.bounds.south,
                    this.bounds.east, this.bounds.north
                ),
                material: new Cesium.ImageMaterialProperty({
                    image: canvas,
                    transparent: true
                })
            }
        })
    }
    
    remove() {
        if (this.entity) {
            this.viewer.entities.remove(this.entity)
        }
    }
}

15.5 本章小结

本章介绍了样式与可视化效果：

1. 颜色材质：颜色定义、各种材质类型
2. 后处理：泛光、环境光遮蔽、自定义效果
3. 光照阴影：光照配置、阴影设置
4. 热力图：简单热力图实现

在下一章中，我们将详细介绍粒子系统与特效。

15.6 思考与练习

1. 实现颜色主题切换功能。
2. 开发自定义后处理滤镜。
3. 创建昼夜交替效果。
4. 实现热力图可视化。
5. 开发动态材质效果。