cesium 地图颜色滤镜

2,045 阅读1分钟

实现地图颜色滤镜

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

imageryLayer.webp

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

image.png

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

修改源码实现

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

image.png

image.png

image.png

image.png

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

image.png

image.png

image.png

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

image.png image.png image.png image.png

业务端调用

  // 部分代码,业务端调用时修改这些属性就可以了
  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;
      }
    }
  }

效果

imageryLayer.webp