基于Leaflet的VideoOverlay视频图层叠加实战_leftlet overlay

如果之前看过Leaflet相关博客的朋友一定知道，在Leaflet中定义地图的相关语法，这里再复习一下。这里需要注意的是，这里访问的地图采用的投影方式是标准的WGS84坐标系，因此无需自己定义坐标系。使用Leaflet默认的配置方式即可。同时在系统初始化的同时对map的范围进行限定，详细见如下代码：

var map = L.map('map');

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
     maxZoom: 18,
     attribution: 'Leaflet叠加视频图层',
     id: 'mapbox.satellite'
}).addTo(map);

var mapBounds = [[32, -130], [13, -100]];

map.fitBounds(mapBounds);

3、视频资源叠加

演示的视频资源，我们使用官方提供的mp4，如果您本地有mp4视频信息，也可以采用本地的资源。在展示的时候都是没有问题的。

var topLeft = L.latLng([30, -129]);
var topRight = L.latLng([32, -100]);
var bottomRight = L.latLng([13, -97]);