cesium 地图颜色滤镜

实现地图颜色滤镜

这是cesium提供的更改地图颜色的效果

ImageryLayer提供了修改 brightness图层亮度 contrast对比度 hue色相 saturation饱和度 gamma伽玛校正 这些属性

但是用完你会发现，调不出来我想要的颜色，产品想要的一个颜色效果，用这些配置根本达不到要求，所以需要增加一个颜色属性，然后再配合这些属性进行微调

修改源码实现

仿照ImageryLayer源码的原有属性的代码，在其相关地方加入filterRGB属性用于设置颜色

这里为了使用方便，对颜色值进行一个调整

上面实现了一种滤镜颜色效果，进一步优化，再增加一种灰度反色滤镜效果。

业务端调用

  // 部分代码，业务端调用时修改这些属性就可以了
  let layersLength = this.viewerCesium.imageryLayers.length;
  if (layersLength === 0) return false;

  for (let j = 0; j < layersLength; j++) {
    let imageryLayer = this.viewerCesium.imageryLayers.get(j);
    imageryLayer.alpha = mapBottomParam.alpha;
    imageryLayer.brightness = mapBottomParam.brightness;
    imageryLayer.contrast = mapBottomParam.contrast;
    imageryLayer.saturation = mapBottomParam.saturation;

    if (mapBottomParam.filterColor) {
      const color = Color.fromCssColorString(mapBottomParam.filterColor);
      if (mapMode === 1) {
        // @ts-ignore
        imageryLayer.color = new Cartesian3(color.red, color.green, color.blue);
        // @ts-ignore
        imageryLayer.colorEnable = true;
        // @ts-ignore
        imageryLayer.filterColorEnable = false;
        imageryLayer.gamma = 0.3;
      } else if (mapMode === 3) {
        // @ts-ignore
        imageryLayer.filterColor = new Cartesian3(color.red, color.green, color.blue);
        // @ts-ignore
        imageryLayer.filterColorEnable = true;
        // @ts-ignore
        imageryLayer.colorEnable = false;
      }
    }
  }

效果