大数据最新基于Leaflet的VideoOverlay视频图层叠加实战_leftlet overlay(4)，2024年最新最新大数据开发高级面试题汇总

2401_84182906

于 2024-05-15 19:52:27 发布

阅读量299

点赞数 3

文章标签：大数据面试学习

本文链接：https://blog.csdn.net/2401_84182906/article/details/138921236

版权

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

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

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

一、Leaflet.DistortableVideo

1、简介

Enable to distort videos on Leaflet maps. Leaflet.DistortableVideo allows for perspective distortions of images, client-side, using CSS3 transformations in the DOM.基于这个组件，在Leaflet的基础之上，就可以实现视频图层的叠加展示。它的开源协议是MIT协议，大家可以放心使用。

2、源代码

在浏览器中打开它的github地址Leaflet.DistortableVideo，在浏览器中可以看到如下信息：

使用git工具将代码clone至本地工作目录，如下图所示，在这里将其工作目录简单介绍一下：1、dist是编译之后的依赖js文件；2、examples是官方提供的样例文件，快速入门的话，可以通过运行相关示例文件达到快速入门的作用。3、lib是提供本地使用的包，也可以拷贝到工程项目中直接引用。4、src目录是组件的源代码包，通常情况下不会修改这个目录下代码。

3、相关限制

这里指的必备条件，没有限定只能使用JQuery，开发者可以基于自己项目的实际情况，进行引用即可。对于浏览器的要求则需要支持video元素和支持matrix3d()这个方法，否则将会影响组件的展示效果。博文编者采用的Chrome浏览器，具体版本是Chrome 102 64bit。

二、如何使用 Leaflet.DistortableVideo

1、新建Html5页面

在目录中新建一个pointArray2.html页面，在页面中定义相关的网页代码。这里只展示基本的骨架代码，最后会给出完整的页面实例。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Leaflet叠加视频图层</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
    <div id="map"></div>

    <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>
</body>

</html>

上述代码中，引入了Leaflet的js和css资源，Jquery的相关依赖，以及引入了视频叠加js的引用js。

视频叠加的js放在dist的目录下。

2、地图定义

如果之前看过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]);
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 :o");
addMarker(bottomLeft, "I'm bottomLeft <3");

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

overlay.setCorners(corners);

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

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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Leaflet叠加视频图层</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="


![img](https://img-blog.csdnimg.cn/img_convert/c966a4a645d994fafb3985f21c6b8ca3.png)
![img](https://img-blog.csdnimg.cn/img_convert/2be07fbedf751bcf13ccb7e33f6cf686.png)
![img](https://img-blog.csdnimg.cn/img_convert/99e9b160fc82e9a4145c559b30e25987.png)

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

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

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

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

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

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

2401_84182906

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
大数据最新基于Leaflet的VideoOverlay视频图层叠加实战_leftlet overlay(4)，2024年最新最新大数据开发高级面试题汇总

Enable to distort videos on Leaflet maps. Leaflet.DistortableVideo allows for perspective distortions of images, client-side, using CSS3 transformations in the DOM.基于这个组件，在Leaflet的基础之上，就可以实现视频图层的叠加展示。它的开源协议是MIT协议，大家可以放心使用。
复制链接

扫一扫