CesiumJS【Pro】- #6 变色龙III

原创已于 2024-06-26 09:44:05 修改 · 387 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#cesium

于 2023-03-09 22:22:33 首次发布

MyCesiumJS Pro 专栏收录该内容

17 篇文章 ¥359.90 ¥399.90

订阅专栏

本博客介绍了一种在Cesium中通过全局暴力修改shader来改变背景颜色的方法，详细阐述了实现该功能的思路及关键代码，包括加载高德地图和处理图片的步骤。

文章目录

说在前面

本章节介绍一种直接全局暴力修改shader的变色方法。

实现的功能

改变背景色

思路

使用shader

关键代码

1 加载高德地图

const options = {
  digital: {
    //电子地图
    url: "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
    subdomains: [1, 2, 3, 4],
  },
  image: {
    //影像地图
    url: "https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
    subdomains: [1, 2, 3, 4],
  },
  mark: {
    //注记
    url: "http://webst0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
    subdomains: [1, 2, 3, 4],
  },
};

var imageryProvider = new Cesium.UrlTemplateImageryProvider(
      options.digital
    );
this.layer = viewer.imageryLayers.addImageryProvider(imageryProvider);

2 处理图片

export default function modifyMap(viewer) {
  // 获取地图影像图层
  let baseLayer = viewer.imageryLayers.get(0);
  //设置2个变量，用来判断是否进行颜色的翻转和过滤
  baseLayer.invertColor = true;

  baseLayer.filterRGB = [0, 50, 100]; //[255,255,255] = > [0,50,100]
  //   更改底图着色器的代码
  const baseFragmentShader =
    viewer.scene.globe._surfaceShaderSet.baseFragmentShaderSource.sources;
  // console.log(baseFragmentShader);

  // 循环修改着色器
  for (let i = 0; i < baseFragmentShader.length; i++) {
    // console.log(baseFragmentShader[i]);
    const strS = "color = czm_saturation(color, textureSaturation);\n#endif\n";
    let strT = "color = czm_saturation(color, textureSaturation);\n#endif\n";
    if (baseLayer.invertColor) {
      strT += `
        color.r = 1.0 - color.r;
        color.g = 1.0 - color.g;
        color.b = 1.0 - color.b;
      `;
    }
    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;
      `;
    }

    baseFragmentShader[i] = baseFragmentShader[i].replace(strS, strT);
  }
}