如何在＆＃34; top＆＃34;中实现忽略nodata的滑动功能层

Question

我想比较一下我对谷歌卫星底图制作的光栅。我制作了一个地理参考的彩色TIFF，并在其应有的地方放置了适当的nodata。然后我用gdal2tiles平铺了它。当我在Google上覆盖我的自定义TIFF时。地图它工作正常但我的自定义地图被灰色背景包围而不是透明的。

我相信它是因为滑动完全取代了这两层。有没有办法实现我想要的正确？

Answer 1

您可能正在使用leaflet-side-by-side插件？

在这种情况下，如果你需要两面都有相同的背景图块，一个非常简单的技巧就是将背景图块层添加到地图中，但不添加到L.control.sideBySide。例如，您可以将左侧保留为空数组。

var backgroundTiles = L.tileLayer(backgroundTilesUrl).addTo(map);

// Tiles with transparent background
var customTransparentTiles = L.tileLayer(customTilesUrl}).addTo(map);

L.control.sideBySide([], customTransparentTiles).addTo(map);

演示：http://jsfiddle.net/ve2huzxw/149/

如果右侧需要不同的背景图块图层（在自定义透明图块下），只需创建一个新的图块层实例并将图层数组作为L.control.sideBySide的第二个参数传递。

注意：由于某种原因，左边的Tile Layer必须最后添加到地图中。

var backgroundTilesRight = L.tileLayer(backgroundTilesRightUrl).addTo(map);

var backgroundTilesLeft = L.tileLayer(backgroundTilesLeftUrl).addTo(map);

// Tiles with transparent background
var customTransparentTiles = L.tileLayer(customTilesUrl).addTo(map);

L.control.sideBySide(
  backgroundTilesLeft,
  [
    backgroundTilesRight,
    customTransparentTiles
  ]).addTo(map);

演示：http://jsfiddle.net/ve2huzxw/150/