在 Leaflet 中添加或删除 ImageOverlay 时的动画 API

Question

我正在尝试在我的地图上添加和删除 ImageOverlay 的动画。基本上，TileLayer 有这个 getContainer() 函数，它允许检索对应于图层的 html 元素。然后我可以调用 fadeIn() 或 fadeOut() 函数来为其设置动画：

$(tileLayer.getContainer()).fadeOut(5000, function(){
    map.removeLayer(tileLayer);
});

我想用我的 ImageOverlay 重现相同的行为，但没有任何函数可以获取图像元素 (leaflet docs)。有什么办法吗？

Answer 1

Use 可以使用您的 L.ImageOverlay 实例的 _image 属性。它包含对实际图像元素的引用，您可以使用 leaflet-image-layer class 将元素放在 display: none:

上

样式表：

.leaflet-image-layer {
    display: none;
}

Javascript:

var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];

// Fade in   
var imageOverlay = L.imageOverlay(imageUrl, imageBounds).addTo(map);
$(imageOverlay._image).fadeIn(5000);

// Fade out
$(imageOverlay._image).fadeOut(5000, function(){
    map.removeLayer(imageOverlay);
});

对 Plunker 采取行动：http://plnkr.co/edit/CCbyZh?p=preview

在 Leaflet 中添加或删除 ImageOverlay 时的动画 API

Animation when add or remove ImageOverlay in Leaflet API

javascript

jquery

leaflet