欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于Leaflet的VideoOverlay視頻圖層疊加實戰(zhàn)教程

 更新時間：2023年02月04日 10:52:18   作者：夜郎king  
這篇文章主要介紹了基于Leaflet的VideoOverlay視頻圖層疊加實戰(zhàn),本文首先介紹了DistortableVideo組件的相關知識，它的github倉庫信息，相關源代碼的目錄說明，使用依賴信息，需要的朋友可以參考下

前言

在基于二維的場景中，也許會遇到以下的需求。在某交通路口或者重要的監(jiān)控點，需要將實時或者錄制的視頻信息疊加在地圖上。更有甚者，隨著設備通訊方式的增強，無人機等設備可以采集實時數(shù)據(jù)，實時回傳到控制終端，幫助進行遠程偵查，控制等。但是在常規(guī)的展示信息中，一般在地圖上標記一些點，在地圖上可以理解為Marker，訪問用戶在使用鼠標等點擊時，再彈出一個窗口，將視頻信息進行播放展示。這種方式交互過多，而且與地圖的交互程度不強，沒有體現(xiàn)與地理信息系統(tǒng)的強關聯(lián)關系，也沒有展示出地圖與視頻融合的獨特魅力。
本文將以Leaflet為例，深度講解一個基于Leaflet的視頻疊加展示插件 DistortableVideo，在介紹插件的同時，也深度講解如何在工程中實際應用DistortableVideo，最后給出一個簡單的視頻疊加Html5案例，希望對有需要的朋友有所幫助，文章行文倉促，權當拋磚引玉，更加優(yōu)質且符合用戶需要的功能需要各位朋友妙筆生花。

一、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的基礎之上，就可以實現(xiàn)視頻圖層的疊加展示。它的開源協(xié)議是MIT協(xié)議，大家可以放心使用。

2、源代碼

在瀏覽器中打開它的github地址Leaflet.DistortableVideo，在瀏覽器中可以看到如下信息：

使用git工具將代碼clone至本地工作目錄，如下圖所示，在這里將其工作目錄簡單介紹一下：1、dist是編譯之后的依賴js文件；2、examples是官方提供的樣例文件，快速入門的話，可以通過運行相關示例文件達到快速入門的作用。3、lib是提供本地使用的包，也可以拷貝到工程項目中直接引用。4、src目錄是組件的源代碼包，通常情況下不會修改這個目錄下代碼。

3、相關限制

這里指的必備條件，沒有限定只能使用JQuery，開發(fā)者可以基于自己項目的實際情況，進行引用即可。對于瀏覽器的要求則需要支持video元素和支持matrix3d()這個方法，否則將會影響組件的展示效果。博文編者采用的Chrome瀏覽器，具體版本是Chrome 102 64bit。

二、如何使用 Leaflet.DistortableVideo

1、新建Html5頁面

在目錄中新建一個pointArray2.html頁面，在頁面中定義相關的網(wǎng)頁代碼。這里只展示基本的骨架代碼，最后會給出完整的頁面實例。

<!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的相關依賴，以及引入了視頻疊加js的引用js。

視頻疊加的js放在dist的目錄下。

2、地圖定義

如果之前看過Leaflet相關博客的朋友一定知道，在Leaflet中定義地圖的相關語法，這里再復習一下。這里需要注意的是，這里訪問的地圖采用的投影方式是標準的WGS84坐標系，因此無需自己定義坐標系。使用Leaflet默認的配置方式即可。同時在系統(tǒng)初始化的同時對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方法，將視頻源地址，視頻的四個角的位置信息，視頻圖層的配置信息進行初始化。初始化設置視頻圖層的方式有兩種，第一種是如上的代碼方式，在創(chuàng)建時，將四個頂點角的位置傳遞給圖層對應；另一個種方式是如下的方式：

overlay.setCorners(corners);

通過以上設置后，可以看到視頻圖層疊加地圖圖層的效果，同時設置了視頻圖層的透明度。視頻圖層可以隨著地圖圖層進行放大和縮小。

最后輸出一個動態(tài)的效果圖如下圖所示，

完整的網(wǎng)頁代碼示例如下，地圖底圖采用的OSM的在線地圖，僅供學習使用：

<!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、加載過程

簡單分析以下視頻圖層的加載過程，通過在瀏覽器前端進行debug調試相關代碼的方式進行。

在這里調用distortableVideoOverlay方法進行相關調用，然后進入到實例創(chuàng)建方法中：

在實例化方法中進行實例對象的創(chuàng)建，如下代碼所示：

在這里可以看到，在傳入了四個角的定義后，將其轉換為bounds對象，

三、總結

以上就是本文的主要內(nèi)容，本文首先介紹了DistortableVideo組件的相關知識，它的github倉庫信息，相關源代碼的目錄說明，使用依賴信息。然后結合Leaflet為，深度講解一個基于Leaflet的視頻疊加展示插件DistortableVideo，在介紹插件的同時，也深度講解如何在工程中實際應DistortableVideo，最后給出一個簡單的視頻疊加Html5案例，同時使用debug方式對視頻圖層的加載進行了步驟分析，希望可以幫助您更深度的理解這個組件。

到此這篇關于基于Leaflet的VideoOverlay視頻圖層疊加實戰(zhàn)的文章就介紹到這了,更多相關Leaflet視頻圖層疊加內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論