Leaflet ImageOverlay中的像素透明度？

Question

我试图从这个雷达图像中滤除无关的（低Dbz）颜色。

 L.imageOverlay("http://radar.weather.gov/ridge/Conus/RadarImg/latest_radaronly.gif?t" + Date.now(), [
                [50.406626367301044, -127.620375523875420], [21.65253806280344, -66.517937876818]
            ]).addTo(map);

是否可以在Leaflet的光栅imageOverlay中将一个或一系列颜色设置为透明？

Answer 1

你要求的是：

  

我的网络浏览器正在加载图片并“按原样”显示。如何加载图像，对其所有像素应用滤镜功能，然后显示结果？

请注意，Leaflet不包含任何此类功能。

在JS世界中，有两种方法可以实现这一目标：

• Pixel manipulation with 2D <canvas>

• 使用更复杂但速度更快的WebGL shaders for image manipulation

可以将这些技术包装在Leaflet插件中。例如，请参阅L.TileLayer.GL，其允许有条件地操纵TileLayer中的像素颜色，或更简单的L.TileLayer.PixelFilter和L.TileLayer.Grayscale，它们都使用较慢的2D <canvas> API。

应该可以创建一个Leaflet plugin来实现L.ImageOverlay而不是L.TileLayer的类似效果，但据我所知，还没有人做过。我建议您考虑这样做，首先阅读插件教程和Leaflet的L.ImageOverlay源代码。