在 Leaflet.js 中消除光栅图像上的白色、无数据像素时遇到问题，通过 GeoServer 提供服务

Posted 2023-03-25

【中文标题】在 Leaflet.js 中消除光栅图像上的白色、无数据像素时遇到问题，通过 GeoServer 提供服务

【英文标题】：Trouble eliminating white, no-data pixels on raster image in Leaflet.js, served via GeoServer

【发布时间】：2020-01-29 19:33:32

【问题描述】：

我正在学习 Leaflet.js，并希望能够创建一个可以与 GeoServer 一起使用的 web 地图。我现在的主要问题是从通过L.tileLayer.wms 引入的导入栅格图层中消除白色背景。我之前遇到过这个问题，虽然是矢量数据，我通过设置transparent: true和zIndex: 2解决了这个问题，而底图设置为1。当我将新的栅格图层透明度和zIndex 设置为相同的参数值时，整个图层就会消失；现在我能看到的只有我的底图。我可以在网上找到消除这种白色背景的所有方法是设置zIndex 和设置transparent: true。希望那里的人以前遇到过这个问题并且可以教我一些我缺少的东西。

附上我的代码示例：

var esri = L.esri.basemapLayer('Imagery').addTo(map);

var test_layer = L.tileLayer.wms('http://localhost:8080/geoserver/learn_js/wms',
    layers: 'learn_js:geotiff_coverage',
    format: 'image/png',
    zIndex: 2,
    transparent: true
  //opacity: 0.5
).addTo(map);

【问题讨论】：

您在运行自己的地理服务器实例吗？ WMS 层是否使用任何其他 WMS 客户端透明？您应该首先检查问题是在 WMS 图像的生成中还是在显示端。

当我将transparent 设置为`false` 时，图像完美显示，尽管白色背景覆盖了整个底图。是的，我正在运行 GeoServer 实例。我还没有尝试使用任何其他服务。

【参考方案1】：

问题似乎与我正在使用的光栅图像有关。我将光栅图像切换到我感兴趣的区域内的一个，现在图像似乎正在加载，背景像素被消除。我仍然不知道为什么一个有效而另一个无效，但至少我知道没有编码或地理服务器问题出问题。也许是光栅图像的内部结构导致了这种挂断。我确实知道，对于我的原始图像，geoserver 仪表板中的切片图层预览不会将图像显示为 png，而是显示为 jpeg。使用我的新图像，geoserver 的切片图层预览会以所有格式显示图像。