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

Question

ImageOverlay我正在尝试制作地图上添加和删除的动画。基本上，TileLayer有这个getContainer()功能可以检索与图层相对应的 html 元素。然后我可以调用 afadeIn()或fadeOut()函数来为其设置动画，如下所示：

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

我想用 my 重现相同的行为ImageOverlay，但没有可以获取图像元素的函数（传单文档）。有什么办法可以做到这一点吗？

Answer 1

使用可以使用_image您的实例的属性L.ImageOverlay。它保存对实际图像元素的引用，您可以使用该类leaflet-image-layer将元素放在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