一:添加图片图层

1.L.imageOverlay(imageUrl,bound,options),通过该方法返回一个图片图层;

                                        
imageUrl  // 图片url
bound    //图片显示范围  [左上角，右下角]
options  //设置项
                                        
                                    

2.options 这里介绍两个常用到的options，opacity和,其他属性可在官网查看 设置pointToLayer属性,可以重新设置点样式

                                        
opacity:0.6  //设置图片透明度
interactive:true  // 设置为true，可以激活图层事件,因imagelayer继承自layer，所以具有layer的事件
                                        
                                    

3.全部代码

                                        
//加载MapBox
var map = new L.Map('map_MapBox');
var map_MapBoxUrl='https://api.mapbox.com/styles/v1/popstar/cjklf93zr6alb2qruedu6ioq4/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoicG9wc3RhciIsImEiOiJjamcwdDhtNnQxZDk4MndwYzR0bmJyeWx2In0.3RFc0AGJgsh-eI5Gsqf7kQ';
var MapBox = new L.TileLayer(map_MapBoxUrl, {id:'MapBox.streets', maxZoom: 18,minZoom:0,attribution:'Map data from Yangguochao' });
map.setView(new L.LatLng(31.864942016,117.2882028929),5);
map.addLayer(MapBox);

var imageUrl = './1.jpg',
    imageBounds = [[20.712216, 104.22655], [43.773941, 64.12544]];
var imagelayer=L.imageOverlay(imageUrl, imageBounds,{
    opacity:0.3
    interactive:true
}).addTo(map);

imagelayer.on("click",function(e){
    var popup = L.popup()
    .setLatLng(e.latlng)
    .setContent('this is a imageLayer')
    .openOn(map);
});
                                        
                                    

4.效果

二:视屏图层

1.L.videoOverlay(videoUrl,videoBounds,options).addTo(map),加载视屏的方法与图片类同；下面直接上代码 同样我们可以设置透明度，自动播放等属性

                                        
//加载MapBox
var map = new L.Map('map_MapBox');
var map_MapBoxUrl='https://api.mapbox.com/styles/v1/popstar/cjklf93zr6alb2qruedu6ioq4/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoicG9wc3RhciIsImEiOiJjamcwdDhtNnQxZDk4MndwYzR0bmJyeWx2In0.3RFc0AGJgsh-eI5Gsqf7kQ';
var MapBox = new L.TileLayer(map_MapBoxUrl, {id:'MapBox.streets', maxZoom: 18,minZoom:0,attribution:'Map data from Yangguochao' });
map.setView(new L.LatLng(31.864942016,117.2882028929),5);
map.addLayer(MapBox);
var videoUrls = [
 'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'    
];
var bounds = L.latLngBounds([[ 40, -130], [ 13, -100]]);
var videoOverlay = L.videoOverlay(videoUrls, bounds, {
    opacity: 1,
    autoplay:true
});
videoOverlay.addTo(map);
function play(){
    videoOverlay.getElement().play();
}
function pause(){
    videoOverlay.getElement().pause();
}        
                                        
                                    

3.效果图