我正在尝试为地图上的ImageOverlay
的添加和删除添加动画效果。基本上,TileLayer
具有此getContainer()
函数,该函数允许检索与该图层对应的html元素。然后,我可以调用fadeIn()
或fadeOut()
函数对其进行动画处理,如下所示:
$(tileLayer.getContainer()).fadeOut(5000, function(){
map.removeLayer(tileLayer);
});
我想用我的
ImageOverlay
重现相同的行为,但是没有能够获取图像元素(leaflet docs)的函数。有什么办法吗? 最佳答案
使用可以使用您的_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