基于Leaflet的VideoOverlay視頻圖層疊加實(shí)戰(zhàn)教程
前言
在基于二維的場景中，也許會遇到以下的需求。在某交通路口或者重要的監(jiān)控點(diǎn)，需要將實(shí)時(shí)或者錄制的視頻信息疊加在地圖上。更有甚者，隨著設(shè)備通訊方式的增強(qiáng)，無人機(jī)等設(shè)備可以采集實(shí)時(shí)數(shù)據(jù)，實(shí)時(shí)回傳到控制終端，幫助進(jìn)行遠(yuǎn)程偵查，控制等。但是在常規(guī)的展示信息中，一般在地圖上標(biāo)記一些點(diǎn)，在地圖上可以理解為Marker，訪問用戶在使用鼠標(biāo)等點(diǎn)擊時(shí)，再彈出一個(gè)窗口，將視頻信息進(jìn)行播放展示。這種方式交互過多，而且與地圖的交互程度不強(qiáng)，沒有體現(xiàn)與地理信息系統(tǒng)的強(qiáng)關(guān)聯(lián)關(guān)系，也沒有展示出地圖與視頻融合的獨(dú)特魅力。
本文將以Leaflet為例，深度講解一個(gè)基于Leaflet的視頻疊加展示插件 DistortableVideo，在介紹插件的同時(shí)，也深度講解如何在工程中實(shí)際應(yīng)用DistortableVideo，最后給出一個(gè)簡單的視頻疊加Html5案例，希望對有需要的朋友有所幫助，文章行文倉促，權(quán)當(dāng)拋磚引玉，更加優(yōu)質(zhì)且符合用戶需要的功能需要各位朋友妙筆生花。
一、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.基于這個(gè)組件，在Leaflet的基礎(chǔ)之上，就可以實(shí)現(xiàn)視頻圖層的疊加展示。它的開源協(xié)議是MIT協(xié)議，大家可以放心使用。
2、源代碼
在瀏覽器中打開它的github地址Leaflet.DistortableVideo，在瀏覽器中可以看到如下信息：
使用git工具將代碼clone至本地工作目錄，如下圖所示，在這里將其工作目錄簡單介紹一下：1、dist是編譯之后的依賴js文件；2、examples是官方提供的樣例文件，快速入門的話，可以通過運(yùn)行相關(guān)示例文件達(dá)到快速入門的作用。3、lib是提供本地使用的包，也可以拷貝到工程項(xiàng)目中直接引用。4、src目錄是組件的源代碼包，通常情況下不會修改這個(gè)目錄下代碼。
3、相關(guān)限制
這里指的必備條件，沒有限定只能使用JQuery，開發(fā)者可以基于自己項(xiàng)目的實(shí)際情況，進(jìn)行引用即可。對于瀏覽器的要求則需要支持video元素和支持matrix3d()這個(gè)方法，否則將會影響組件的展示效果。博文編者采用的Chrome瀏覽器，具體版本是Chrome 102 64bit。
二、如何使用 Leaflet.DistortableVideo
1、新建Html5頁面
在目錄中新建一個(gè)pointArray2.html頁面，在頁面中定義相關(guān)的網(wǎng)頁代碼。這里只展示基本的骨架代碼，最后會給出完整的頁面實(shí)例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Leaflet疊加視頻圖層</title>
<link rel="stylesheet" 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的相關(guān)依賴，以及引入了視頻疊加js的引用js。
視頻疊加的js放在dist的目錄下。
2、地圖定義
如果之前看過Leaflet相關(guān)博客的朋友一定知道，在Leaflet中定義地圖的相關(guān)語法，這里再復(fù)習(xí)一下。這里需要注意的是，這里訪問的地圖采用的投影方式是標(biāo)準(zhǔn)的WGS84坐標(biāo)系，因此無需自己定義坐標(biāo)系。使用Leaflet默認(rèn)的配置方式即可。同時(shí)在系統(tǒng)初始化的同時(shí)對map的范圍進(jìn)行限定，詳細(xì)見如下代碼：
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視頻信息，也可以采用本地的資源。在展示的時(shí)候都是沒有問題的。
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方法，將視頻源地址，視頻的四個(gè)角的位置信息，視頻圖層的配置信息進(jìn)行初始化。初始化設(shè)置視頻圖層的方式有兩種，第一種是如上的代碼方式，在創(chuàng)建時(shí)，將四個(gè)頂點(diǎn)角的位置傳遞給圖層對應(yīng)；另一個(gè)種方式是如下的方式：
overlay.setCorners(corners);
通過以上設(shè)置后，可以看到視頻圖層疊加地圖圖層的效果，同時(shí)設(shè)置了視頻圖層的透明度。視頻圖層可以隨著地圖圖層進(jìn)行放大和縮小。
最后輸出一個(gè)動(dòng)態(tài)的效果圖如下圖所示，
完整的網(wǎng)頁代碼示例如下，地圖底圖采用的OSM的在線地圖，僅供學(xué)習(xí)使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Leaflet疊加視頻圖層</title>
<link rel="stylesheet" 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、加載過程
簡單分析以下視頻圖層的加載過程，通過在瀏覽器前端進(jìn)行debug調(diào)試相關(guān)代碼的方式進(jìn)行。
在這里調(diào)用distortableVideoOverlay方法進(jìn)行相關(guān)調(diào)用，然后進(jìn)入到實(shí)例創(chuàng)建方法中：
在實(shí)例化方法中進(jìn)行實(shí)例對象的創(chuàng)建，如下代碼所示：
在這里可以看到，在傳入了四個(gè)角的定義后，將其轉(zhuǎn)換為bounds對象，
三、總結(jié)
以上就是本文的主要內(nèi)容，本文首先介紹了DistortableVideo組件的相關(guān)知識，它的github倉庫信息，相關(guān)源代碼的目錄說明，使用依賴信息。然后結(jié)合Leaflet為，深度講解一個(gè)基于Leaflet的視頻疊加展示插件DistortableVideo，在介紹插件的同時(shí)，也深度講解如何在工程中實(shí)際應(yīng)DistortableVideo，最后給出一個(gè)簡單的視頻疊加Html5案例，同時(shí)使用debug方式對視頻圖層的加載進(jìn)行了步驟分析，希望可以幫助您更深度的理解這個(gè)組件。
到此這篇關(guān)于基于Leaflet的VideoOverlay視頻圖層疊加實(shí)戰(zhàn)的文章就介紹到這了,更多相關(guān)Leaflet視頻圖層疊加內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了整理超全的visual?studio快捷鍵使用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-02-02
網(wǎng)站性能提高實(shí)戰(zhàn)經(jīng)驗(yàn)點(diǎn)滴記錄
網(wǎng)站性能提高實(shí)戰(zhàn)經(jīng)驗(yàn)點(diǎn)滴記錄，需要的朋友可以參考下。2011-02-02
12種實(shí)現(xiàn)301網(wǎng)頁重定向方法的代碼實(shí)例（含Web編程語言和Web服務(wù)器）
這篇文章主要介紹了11種實(shí)現(xiàn)301網(wǎng)頁重定向方法的代碼實(shí)例,文中包含9種編程語言和3種WEB服務(wù)器配置方法,共計(jì)12種,需要的朋友可以參考下2014-07-07
這篇文章主要介紹了VS2019如何查看類圖的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
Git基礎(chǔ)學(xué)習(xí)之分支操作的示例詳解
這篇文章主要為大家詳細(xì)介紹了Git基礎(chǔ)學(xué)習(xí)中分支的基本操作，文中的示例代碼講解詳細(xì)，對我們了解Git有一定的幫助，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-10-10
怎樣寫好commit?message提高業(yè)務(wù)效率
這篇文章主要為大家介紹了如何寫好commit?message幫助業(yè)務(wù)團(tuán)隊(duì)提高效率方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
數(shù)據(jù)類型和Json格式，需要的朋友可以參考下。2009-10-10
本文詳細(xì)講解了git?stash(儲藏)的用法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
詳解git使用小結(jié)（本地分支與遠(yuǎn)程分支、git命令）
這篇文章主要介紹了git使用小結(jié)（本地分支與遠(yuǎn)程分支、git命令）,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
spark大數(shù)據(jù)任務(wù)提交參數(shù)的優(yōu)化記錄分析
這篇文章主要介紹了spark大數(shù)據(jù)任務(wù)提交參數(shù)的優(yōu)化記錄分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05