cesium 修改着色器实现酷炫地图颜色

上一节我们学习了:cesium启用指南罗盘和比例尺今天我们要学习的是修改着色器实现酷炫地图颜色。

实例代码

// 导出一个名为 modifyMap 的函数，接受一个名为 viewer 的参数。
export default function modifyMap(viewer) {
    // 从 viewer 中获取第一个地图影像图层。
    let baseLayer = viewer.imageryLayers.get(0);

    // 在 baseLayer 上设置一个名为 invertColor 的布尔变量，用于决定是否反转颜色。
    baseLayer.invertColor = true;

    // 在 baseLayer 上设置一个名为 filterRGB 的数组，用于进行颜色过滤。
    baseLayer.filterRGB = [0, 50, 100];

    // 获取底图的 fragment shader 的代码。
    const baseFragmentShader =
        viewer.scene.globe._surfaceShaderSet.baseFragmentShaderSource.sources;

    // 循环遍历 fragment shader 的每一个部分。
    for (let i = 0; i < baseFragmentShader.length; i++) {

        // 指定我们希望在 shader 中寻找和替换的字符串（着色器代码）。
        const strS = "color = czm_saturation(color, textureSaturation);\n#endif\n";
        let strT = "color = czm_saturation(color, textureSaturation);\n#endif\n";

        // 如果 invertColor 为 true，则添加代码反转颜色。
        if (baseLayer.invertColor) {
            strT += `
        color.r = 1.0 - color.r;
        color.g = 1.0 - color.g;
        color.b = 1.0 - color.b;
      `;
        }

        // 如果 filterRGB 存在，则添加代码应用 RGB 过滤。
        if (baseLayer.filterRGB) {
            strT += `
        color.r = color.r*${baseLayer.filterRGB[0]}.0/255.0;
        color.g = color.g*${baseLayer.filterRGB[1]}.0/255.0;
        color.b = color.b*${baseLayer.filterRGB[2]}.0/255.0;
      `;
        }

        // 使用新的字符串（strT）替换原来在 shader 中的字符串（strS）。
        baseFragmentShader[i] = baseFragmentShader[i].replace(strS, strT);
    }
}

方法介绍

viewer.imageryLayers

viewer.imageryLayers 是 CesiumJS 地图应用中的一个重要对象，用于管理影像图层（也叫做底图或影像数据）。这个对象包含了一个图层的集合，这些图层按照其在集合中的顺序进行渲染。

主要功能：

添加图层: 你可以通过 add 方法添加新的图层。

viewer.imageryLayers.addImageryProvider(new Cesium.TileMapServiceImageryProvider({
    url : 'some_url'
}));

删除图层: 使用 remove 方法删除现有的图层。
```
viewer.imageryLayers.remove(layer);
```
获取图层: 可以使用 get 方法获取特定索引处的图层。
```
let baseLayer = viewer.imageryLayers.get(0);
```
图层顺序: 通过 raise 和 lower 方法来改变图层的渲染顺序。
```
viewer.imageryLayers.raise(layer);
viewer.imageryLayers.lower(layer);
```
图层属性: 你可以访问或修改图层的各种属性，如透明度 (alpha), 亮度 (brightness) 等。
```
layer.alpha = 0.5;
layer.brightness = 2.0;
```

示例：

// 获取第一个图层
let firstLayer = viewer.imageryLayers.get(0);

// 改变图层的透明度
firstLayer.alpha = 0.5;

// 添加一个新的图层
viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
    url : 'https://some.server/arcgis/rest/services/World_Street_Map/MapServer'
}));

viewer.imageryLayers 提供了一种灵活而强大的方式来控制 CesiumJS 地图中的影像数据，包括其渲染顺序和可视化属性。使用它，你可以高度定制你的地图应用。

实例演示地址

cesium修改着色器实现酷炫地图颜色

当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课课程-cesium 修改着色器实现酷炫地图颜色-实践的学习笔记

实例代码下载

代码运行环境：vue3 + vite + js nodejs 14