如何实现忽略 "top" 层中的无数据的滑动功能

Question

我想将我制作的栅格与 Google 的卫星底图进行比较。我制作了一个地理参考彩色 TIFF，在它应该有的地方适当放置了无数据。然后我使用 gdal2tiles 平铺它。当我在 Google 上覆盖我的自定义 TIFF 时。 map 它工作正常，但我的自定义地图被灰色背景而不是透明背景包围。

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

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/

如何实现忽略 "top" 层中的无数据的滑动功能

How to achieve swipe functionality that ignores nodata in "top" layer

dictionary

overlay

raster

leaflet