web地图底图颜色修改

最新推荐文章于 2025-10-23 06:37:43 发布

原创最新推荐文章于 2025-10-23 06:37:43 发布 · 551 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

最近使用的午夜蓝地图服务停了。但是业务大屏需要炫酷颜色的底图于是打算自己做。

大部分底图瓦片颜色是白的，因此需要更改。

本质是通过着色器改瓦片颜色。我们看web通过两种方式：

1.1 css修改图片颜色

二维底图用的leaflet，leaflet是通过加载图片显示底图，那这样可以通过css修改图片颜色，主要代码：

.leaflet-layer {
  filter: invert(100%) hue-rotate(13deg);
}

leaflet-layer 表示瓦片所在图层，这样不干扰其他图层颜色。

1.2 cesium 修改着色器修改颜色

cesium只有一张canvas图层，无法通过css改变，通过着色器接口实现：

      let options = {
        brightness:1,
        contrast:1,
        gamma:1,
        hue:14,
        saturation:0,
        //反色?
        invertColor: true,
        //滤镜值
        filterRGB: [],
      };
      const baseLayer = viewer.imageryLayers.get(0);
      //以下几个参数根据实际情况修改,目前我是参照火星科技的参数,个人感觉效果还不错
      baseLayer.brightness = options.brightness || 0.6;
      baseLayer.contrast = options.contrast || 1.8;
      baseLayer.gamma = options.gamma || 0.3;
      baseLayer.hue = options.hue || 1;
      baseLayer.saturation = options.saturation || 0;
      const baseFragShader =
        viewer.scene.globe._surfaceShaderSet.baseFragmentShaderSource.sources;
      for (let i = 0; i < baseFragShader.length; i++) {
        const strS =
          "color = czm_saturation(color, textureSaturation);\n#endif\n";
        let strT =
          "color = czm_saturation(color, textureSaturation);\n#endif\n";
        if (options.invertColor) {
          strT += `
      color.r = 1.0 - color.r;
      color.g = 1.0 - color.g;
      color.b = 1.0 - color.b;
      `;
        }
        if (options.filterRGB.length > 0) {
          strT += `
      color.r = color.r * ${options.filterRGB[0]}.0/255.0;
      color.g = color.g * ${options.filterRGB[1]}.0/255.0;
      color.b = color.b * ${options.filterRGB[2]}.0/255.0;
      `;
        }
        baseFragShader[i] = baseFragShader[i].replace(strS, strT);
      }