leaflet加载视频图层

适用场景:

1.动态云图

2.台风、风场、地图变迁等

原理:

h5 video标签

L.videoOverlay图层

功能说明:

1.加载视频图层

2.控制视频播放、暂停、停止

 

添加底图

    创建一个Leaflet地图并L.TileLayer以通常的方式添加背景：

var map = L.map('map').setView([37.8, -96], 4);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + mapboxAccessToken, {
    id: 'mapbox.satellite',
    attribution: ...
}).addTo(map);

添加视频显示范围

    将定义视频将覆盖的地理范围。这是L.LatLngBounds一个矩形的实例：

var bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);

    缩放到视频范围

L.rectangle(bounds).addTo(map);

map.fitBounds(bounds);

添加视频图层

• 用L.videoOverlay而不是L.imageOverlay
• 而不是图像网址，请指定一个视频网址或一组视频网址

var videoUrls = [
        'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
        'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
    ];

    var bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);

    var videoOverlay = L.videoOverlay( videoUrls, bounds, {
        opacity: 0.8
    }).addTo(map);

视频叠加的行为与任何其他Leaflet图层一样 – 您可以添加和删除它们，让用户使用图层控件等从多个视频中进行选择

添加视频控制条

按照h5 video标签一样获取到html element，调取对应控制方法：play()和pause()等，例如

videoOverlay.getElement().pause();

我们可以构建一个小子类，L.Control在加载后播放/暂停此视频叠加：

videoOverlay.on('load', function () {
        var MyPauseControl = L.Control.extend({
            onAdd: function() {
                var button = L.DomUtil.create('button');
                button.innerHTML = '⏸';
                L.DomEvent.on(button, 'click', function () {
                    videoOverlay.getElement().pause();
                });
                return button;
            }
        });
        var MyPlayControl = L.Control.extend({
            onAdd: function() {
                var button = L.DomUtil.create('button');
                button.innerHTML = '⏵';
                L.DomEvent.on(button, 'click', function () {
                    videoOverlay.getElement().play();
                });
                return button;
            }
        });

        var pauseControl = (new MyPauseControl()).addTo(map);
        var playControl = (new MyPlayControl()).addTo(map);
    });

演示地址：
https://leafletjs.com/examples/video-overlay/example.html