leaflet入门教程(七):添加栅格图层imageOverlay、videoOverlay

已被阅读 3536 次 | 文章分类:leafLet | 2018-10-17 21:47

leaflet主要提供了加载四种图层的接口方法,包括TMS(tile)、WMS、Image、以及video图层,图片图层接口可以展示感兴趣区域与地图差别,或者加载多个图片图层进行对比,视屏图层常用在洋流。风场信息展示等方向

一:添加图片图层

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.效果

小白GIS

二:视屏图层

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.效果图

小白GIS

QQ:3410192267 | 技术支持 微信:popstarqqsmall

Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号