javascript - 无法消除通过 GeoServer 提供的 Leaflet.js 中光栅图像上的白色、无数据像素

Question

我正在学习 leaflet.js，并且希望能够创建一个可以与 GeoServer 一起使用的 web map 。我现在的主要问题是消除通过 L.tileLayer.wms 引入的导入栅格图层中的白色背景。我以前也遇到过这个问题，尽管是矢量数据，我通过设置 transparent: true 和 zIndex: 2 解决了这个问题，而 basemap 设置为 >1。当我将新的栅格图层透明度和 zIndex 设置为相同的参数值时，整个图层消失了；现在我只能看到我的 basemap 。我在网上能找到的消除这种白色背景的方法就是设置 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);

Answer 1

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