Question

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

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

我想用ImageOverlay重现相同的行为，但没有能够获取图像元素（leaflet docs）的函数。有没有办法做到这一点？

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

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

1 个答案: