江苏省建筑培训网_中企动力科技股份有限公司潍坊分公司_口碑营销成功案例简短_信息流优化师职业规划

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

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

本质是通过着色器改瓦片颜色。我们看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);}