基于Leaflet的VideoOverlay视频图层叠加实战教程

2024-12-08 15:16:48

前言

在基于二维的场景中，也许会遇到以下的需求。在某交通路口或者重要的监控点，需要将实时或者录制的视频信息叠加在地图上。更有甚者，随着设备通讯方式的增强，无人机等设备可以采集实时数据，实时回传到控制终端，帮助进行远程侦查，控制等。但是在常规的展示信息中，一般在地图上标记一些点，在地图上可以理解为Marker，访问用户在使用鼠标等点击时，再弹出一个窗口，将视频信息进行播放展示。这种方式交互过多，而且与地图的交互程度不强，没有体现与地理信息系统的强关联关系，也没有展示出地图与视频融合的独特魅力。
本文将以Leaflet为例，深度讲解一个基于Leaflet的视频叠加展示插件 DistortableVideo，在介绍插件的同时，也深度讲解如何在工程中实际应用DistortableVideo，最后给出一个简单的视频叠加Html5案例，希望对有需要的朋友有所帮助，文章行文仓促，权当抛砖引玉，更加优质且符合用户需要的功能需要各位朋友妙笔生花。

一、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" rel="external nofollow"  rel="external nofollow"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>
    <link rel="stylesheet" type="text/css" href="main.css" rel="external nofollow"  rel="external nofollow" >
</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" rel="external nofollow"  rel="external nofollow"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>
    <link rel="stylesheet" type="text/css" href="main.css" rel="external nofollow"  rel="external nofollow" >
</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>
    <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>

</body>
</html>

4、加载过程

简单分析以下视频图层的加载过程，通过在浏览器前端进行debug调试相关代码的方式进行。

在这里调用distortableVideoOverlay方法进行相关调用，然后进入到实例创建方法中：

在实例化方法中进行实例对象的创建，如下代码所示：

在这里可以看到，在传入了四个角的定义后，将其转换为bounds对象，

三、总结

以上就是本文的主要内容，本文首先介绍了DistortableVideo组件的相关知识，它的github仓库信息，相关源代码的目录说明，使用依赖信息。然后结合Leaflet为，深度讲解一个基于Leaflet的视频叠加展示插件DistortableVideo，在介绍插件的同时，也深度讲解如何在工程中实际应DistortableVideo，最后给出一个简单的视频叠加Html5案例，同时使用debug方式对视频图层的加载进行了步骤分析，希望可以帮助您更深度的理解这个组件。

到此这篇关于基于Leaflet的VideoOverlay视频图层叠加实战的文章就介绍到这了,更多相关Leaflet视频图层叠加内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Leaflet 基础入门教程示例

目录什么是Webgis? 什么是Leaflet? 在Vue中安装Leaflet,与其他依赖在App.vue中使用初始化地图 chinaProvider地图瓦片 addControls使用工具集 attribution创建自定义版权 Marker创建点创建线 Polygon创建三角形 Popup弹窗&Tooltip提示 Geojson区域描边总结什么是Webgis? webGis又称之为网络地理信息系统,GIS的全名是Geographic Information System,它是在计
leaflet加载geojson叠加显示功能代码

这篇文章主要介绍了leaflet加载geojson叠加显示功能代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 geojson需要先制作shp,然后导入下面网站生成geojson. https://mapshaper.org/ geojson,最好放后台,前台通过异步请求去加载json,然后显示. getGeojsonByName({name:geojson_name}).then(data=>{ if (this.bondarylayer)
leaflet的开发入门教程

Leaflet简述 Leaflet 是一个为建设交互性好适用于移动设备地图,而开发的现代的.开源的 JavaScript 库.代码仅有 33 KB,但它具有开发在线地图的大部分功能.Leaflet设计坚持简便.高性能和可用性好的哲学思想,在所有主要桌面和移动平台能高效运作,在现代浏览器上会利用HTML5和CSS3的优势,同时也支持旧的浏览器访问.支持插件扩展,有一个友好.易于使用的API文档和一个简单的.可读的源代码.Leaflet强大的开源库插件涉及到地图应用的各个方面包括地图服务,数据提供,
基于leaflet.js实现修改地图主题样式的流程分析

今天遇到了一点点的小情况,我自己根据leaflet.js做了一个离线地图,公司要用来做态势,但是地图的底图用的是高德的原图,样式是下面这样的: 但是态势的主题是如下的这种淡蓝色: 这就造成了本次的需求,需要可以修改样式的主题,由于本人是个后端小佬,前端菜鸡,所以实现起来发生了一些困难,这里简单介绍下实现的路程. 首先看下效果: 然后介绍下艰辛的过程: 首先,需要用到一个基于leaflet.js的插件: https://github.com/hnrchrdl/leaflet-tilelayer-c
Mybatis实战教程之入门到精通（经典）

什么是mybatis MyBatis是支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索.MyBatis使用简单的XML或注解用于配置和原始映射,将接口和Java的POJOs(Plan Old Java Objects,普通的Java对象)映射成数据库中的记录. orm工具的基本思想无论是用过的hibernate,mybatis,你都可以法相他们有一个共同点: 1. 从配置文件(通常是XML配置文件中)得到 ses
PHP基于ffmpeg实现转换视频，截图及生成缩略图的方法

本文实例讲述了PHP基于ffmpeg实现转换视频,截图及生成缩略图的方法.分享给大家供大家参考,具体如下: 这里把ffmpeg 和生成缩略图整合了一下: include("ImageResize.class.php") //转视频 $cmd="ffmpeg.exe -i starwar.avi -ab 56 -ar 22050 -b 500 -r 15 -s 320x240 1.flv"; exec($cmd); //视频截图 $cmd="ffmpeg
Mysql实现企业级日志管理、备份与恢复的实战教程

背景随着业务的发展,公司业务和规模不断扩大,网站积累了大量的用户信息和数据,对于一家互联网公司来说,用户和业务数据是根基.一旦公司的数据错乱或者丢失,对于互联网公司而言就等于说是灭顶之灾,为防止系统出现操作失误或系统故障导致数据丢失,公司要求加强用户数据的可靠性,要求全面加强数据层面备份,并能在故障发生时第一时间恢复. 数据备份形式文件备份: 通过Linux的备份命令把文件统一打个包存起来,可存在本地和远程服务器,等到要恢复时,再用这些文件恢复到指定位置. 数据库数据备份: 在一些对数据可靠
详解Python Celery和RabbitMQ实战教程

前言 Celery是一个异步任务队列.它可以用于需要异步运行的任何内容.RabbitMQ是Celery广泛使用的消息代理.在本这篇文章中,我将使用RabbitMQ来介绍Celery的基本概念,然后为一个小型演示项目设置Celery .最后,设置一个Celery Web控制台来监视我的任务基本概念来!看图说话: Broker Broker(RabbitMQ)负责创建任务队列,根据一些路由规则将任务分派到任务队列,然后将任务从任务队列交付给worker Consumer (Celery Wo
FFmpeg视频处理入门教程(新手必看)

目录一.概念 1.1 容器 1.2 编码格式 1.3 编码器二.FFmpeg 的使用格式三.常用命令行参数四.常见用法 4.1 查看文件信息 4.2 转换编码格式 4.3 转换容器格式 4.4 调整码率 4.5 改变分辨率(transsizing) 4.6 提取音频 4.7 添加音轨 4.8 截图 4.9 裁剪 4.10 为音频添加封面五.参考链接 FFmpeg是视频处理最常用的开源软件. 它功能强大,用途广泛,大量用于视频网站和商业软件(比如 Youtube 和 iTunes),也是
SpringBoot实战教程之新手入门篇

目录 1.SpringBoot简介 2.SpringBoot安装 2.1.基于Maven的安装 2.2.基于Gradle的安装 3.创建HelloWorld应用 4.代码结构 5.Configuration类 5.1.导入其它配置 6.自动化配置 6.1.逐渐替换自动化配置 6.2.禁止特定的自动化配置 7.使用@SpringBootApplication注解总结 1. SpringBoot 简介 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化 Spri
K8s实战教程之容器和 Pods资源分配问题

目录目标一.启动服务二.创建命名空间 2.1.查看名字空间 2.2.创建名字空间 2.3.删除名字空间三.指定 CPU 请求和 CPU 限制 3.1.CPU 单位 3.2.设置超过节点能力的 CPU 请求 3.2.1.创建 Pod 3.2.2.Pod 的状态 3.2.3.Pod 详情 3.2.4.删除 Pod 四.不限制CPU 总结目标本篇文章我们将学习,如何为容器设置 CPU request(请求) 和 CPU limit(限制). 容器使用的 CPU 不能超过所配置的限制. 如果
Redis+Caffeine实现分布式二级缓存组件实战教程

目录前言所谓二级缓存分布式二级缓存的优势如何使用组件? 核心实现方法关于分布式本地缓存失效前言在生产中已有实践,本组件仅做个人学习交流分享使用.github:https://github.com/axinSoochow/redis-caffeine-cache-starter个人水平有限,欢迎大家在评论区轻喷. 所谓二级缓存缓存就是将数据从读取较慢的介质上读取出来放到读取较快的介质上,如磁盘-->内存. 平时我们会将数据存储到磁盘上,如:数据库.如果每次都从数据库里去读取,会因为
最新MySql8.27主从复制及SpringBoot项目中的读写分离实战教程

目录最新MySql8.27主从复制以及SpringBoot项目中的读写分离实战 1.MySql主从复制 2.配置-主库Master 3.配置-从库Slave 3.主从复制测试 4.读写分离案例 4.1.Sharding-JDBC框架介绍最新MySql8.27主从复制以及SpringBoot项目中的读写分离实战 1.MySql主从复制 MySQL主从复制是一个异步的复制过程,底层是基于MySQL1数据库自带的二进制日志功能.就是一台或多台MySQL数据库(slave,即从库)从另一台ySQL数
mybatis多对多关联实战教程(推荐)

MyBatis3.0 添加了association和collection标签专门用于对多个相关实体类数据进行级联查询,但仍不支持多个相关实体类数据的级联保存和级联删除操作一.创建student.teacher和stu_teach_rel三张张表 DROP TABLE IF EXISTS `student`; CREATE TABLE `student` ( `id` int(11) NOT NULL, `name` varchar(255) DEFAULT NULL, `age` int(11