基於Leaflet的VideoOverlay視訊圖層疊加實戰教學

2023-02-06 06:01:39

前言

在基於二維的場景中，也許會遇到以下的需求。在某交通路口或者重要的監控點，需要將實時或者錄製的視訊資訊疊加在地圖上。更有甚者，隨著裝置通訊方式的增強，無人機等裝置可以採集實時資料，實時回傳到控制終端，幫助進行遠端偵查，控制等。但是在常規的展示資訊中，一般在地圖上標記一些點，在地圖上可以理解為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視訊圖層疊加內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！