2024年最新基于Leaflet的VideoOverlay视频图层叠加实战_leftlet overlay(5)，最新整理《大数据开发架构师面试题解析大全》

最新推荐文章于 2024-05-16 14:25:28 发布

2401_84166258

最新推荐文章于 2024-05-16 14:25:28 发布

阅读量430

点赞数 5

分类专栏：程序员文章标签：大数据面试学习

本文链接：https://blog.csdn.net/2401_84166258/article/details/138847473

版权

程序员专栏收录该内容

182 篇文章 0 订阅

订阅专栏

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

 attribution: 'Leaflet叠加视频图层',
 id: 'mapbox.satellite'

}).addTo(map);

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

map.fitBounds(mapBounds);


### 3、视频资源叠加


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





![](https://img-blog.csdnimg.cn/img_convert/b4bc7da45cfac45763ce0c93fc3b43cf.png)

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

var layer = L.distortableVideoOverlay(“https://www.mapbox.com/bites/00188/patricia_nasa.mp4”, corners, {
muted: true,
opacity: 0.5
}).addTo(map);

function addMarker(point, text) {
L.marker(point).addTo(map).bindPopup(text);
}

addMarker(topLeft, “I’m topLeft 😃”);
addMarker(topRight, “I’m topRight :p”);
addMarker(bottomRight, “I’m bottomRight 😮”);
addMarker(bottomLeft, “I’m bottomLeft ❤️”);


通过distortableVideoOverlay方法，将视频源地址，视频的四个角的位置信息，视频图层的配置信息进行初始化。初始化设置视频图层的方式有两种，第一种是如上的代码方式，在创建时，将四个顶点角的位置传递给图层对应；另一个种方式是如下的方式：

overlay.setCorners(corners);


通过以上设置后，可以看到视频图层叠加地图图层的效果，同时设置了视频图层的透明度。视频图层可以随着地图图层进行放大和缩小。





![](https://img-blog.csdnimg.cn/img_convert/3ea8c422a85e8e89b46887ff02fff0b6.png)



最后输出一个动态的效果图如下图所示，





![](https://img-blog.csdnimg.cn/img_convert/1dd490d86fced39ed718ddaf6bc37053.gif)



完整的网页代码示例如下，地图底图采用的OSM的在线地图，仅供学习使用：

Leaflet叠加视频图层

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
<script src="../lib/numeric.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="../dist/index.js" type="text/javascript" /></script>
<script>
    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]];

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

    map.fitBounds(mapBounds);

    var layer = L.distortableVideoOverlay("https://www.mapbox.com/bites/00188/patricia_nasa.mp4", corners, {
        muted: true,
        opacity: 0.5
    }).addTo(map);
    

    function addMarker(point, text) {
        L.marker(point).addTo(map).bindPopup(text);
    }

    addMarker(topLeft, "I'm topLeft :)");
    addMarker(topRight, "I'm topRight :p");
    addMarker(bottomRight, "I'm bottomRight :o");
    addMarker(bottomLeft, "I'm bottomLeft <3");
</script>

```