Cesium 自定义底图颜色

function colorRgb(inColor) {
  // 16进制颜色值的正则
  const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
  // 把颜色值变成小写
  let color = inColor.toLowerCase()
  if (reg.test(color)) {
    // 如果只有三位的值,需变成六位,如:#fff => #ffffff
    if (color.length === 4) {
      let colorNew = '#'
      for (let i = 1; i < 4; i += 1) {
        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1))
      }
      color = colorNew
    }
    // 处理六位的颜色值,转为RGB
    const colorChange = []
    for (let i = 1; i < 7; i += 2) {
      colorChange.push(parseInt('0x' + color.slice(i, i + 2)))
    }
    return colorChange
  }
  return []
}

const changeImageryProviderColors = (viewer, baseLayer) => {
  // 更改底图的着色器 代码
  const baseFragmentShaderSource =
    viewer.scene.globe._surfaceShaderSet.baseFragmentShaderSource.sources
  for (let i = 0; i < baseFragmentShaderSource.length; i++) {
    const oneSource = baseFragmentShaderSource[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;
      `
      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;
      `
    }

    if (oneSource.indexOf(strS) !== -1) {
      baseFragmentShaderSource[i] = baseFragmentShaderSource[i].replace(
        strS,
        strT
      )
    }
  }
}

const aMapProvider = new Cesium.UrlTemplateImageryProvider({  
    url: `https://webst0{s}.is.autonavi.com/appmaptile?style=${style}&x={x}&y={y}&z={z}&lang=zh_cn&size=1`,  
    subdomains: ['1', '2', '3', '4'], 
    tilingScheme: new Cesium.WebMercatorTilingScheme(),  
    minximuLevel: 3,
    maximumLevel: 15,
  });

const aMapImagery = viewer.imageryLayers.addImageryProvider(aMapProvider);

// 设置 滤镜效果
  aMapImagery.invertColor = 1.0;
  // aMapImagery.filterRGB = [255.0, 255.0, 255.0]
  aMapImagery.filterRGB = colorRgb("#4e70a6");
  // aMapImagery.filterRGB = colorRgb("#ffff00");

  // 更改cesium的着色器代码 关于滤镜和反色的 [在不更改cesium源文件的情况下]
  changeImageryProviderColors(viewer, aMapImagery);

  // aMapImagery.alpha = 0.5; // 透明度
  // aMapImagery.dayAlpha = 0.5; // 日间透明度
  // aMapImagery.nightAlpha = 0.5; // 夜间透明度
  aMapImagery.brightness = 0.6; // 亮度
  aMapImagery.contrast = 1.8; // 对比度
  aMapImagery.hue = 1; // 色相
  aMapImagery.saturation = 0.0; // 饱和度
  aMapImagery.gamma = 0.3; // 伽马值
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容