序文
2 次元ベースのシーンでは、次の要件が発生する可能性があります。交差点や重要な監視ポイントでは、リアルタイムまたは記録されたビデオ情報を地図に重ねる必要があります。さらに、機器の通信方式の充実により、ドローンなどの機器がリアルタイムでデータを収集し、リアルタイムで管制端末に送り返すことで、遠隔地での調査や管制に役立てることができます。しかし、従来の表示情報では、通常、地図上にいくつかのポイントがマークされており、これは地図上のマーカーとして理解でき、訪問ユーザーがマウスでクリックすると、ウィンドウがポップアップしてビデオ情報が表示されます。このようにインタラクションが多すぎて、地図とのインタラクションの度合いが弱く、地理情報システムとの強い関連性が反映されておらず、地図と映像の融合という独特の魅力が発揮されていません。
この記事では、Leaflet を例として、Leaflet ベースのビデオ オーバーレイ ディスプレイ プラグイン DistortableVideo について詳しく説明します. プラグインを紹介しながら、DistortableVideo をプロジェクトに実際に適用する方法についても詳しく説明します.ビデオ オーバーレイ Html5 ケース. 助けが必要な友達, 記事は急いで書かれています, レンガを投げて翡翠を引き付けるのは正しいです.
1. リーフレット、歪んだビデオ
1 はじめに
Leaflet マップ上のビデオを歪めることができます. Leaflet.DistortableVideo は、DOM で CSS3 変換を使用して、クライアント側で画像の遠近歪みを可能にします. このコンポーネントに基づいて、Leaflet に基づいて、ビデオ レイヤーのオーバーレイ表示を実現できます. オープンソースのプロトコルはMITプロトコルなので安心して使えます。
2. ソースコード
その github アドレスLeaflet.DistortableVideoをブラウザーで開くと、ブラウザーに次の情報が表示されます。
下の図に示すように、git ツールを使用してコードをローカルの作業ディレクトリに複製します。作業ディレクトリの簡単な紹介は次のとおりです: 1. dist はコンパイルされた依存 js ファイルです; 2. examples は公式のサンプル ファイルです。クイック スタート その場合は、関連するサンプル ファイルを実行することでクイック スタートを実現できます。3. lib はローカルで使用するためのパッケージであり、プロジェクトにコピーして直接参照することもできます。4. src ディレクトリはコンポーネントのソース コード パッケージであり、このディレクトリ内のコードは通常の状況では変更されません。
3. 関連する制限
ここで言及する前提条件は JQuery に限定されず、開発者は自身のプロジェクトの実際の状況に基づいて参照できます。ブラウザの要件として、video 要素と matrix3d() メソッドをサポートする必要があります。そうしないと、コンポーネントの表示効果に影響します。ブログ投稿エディターが使用する Chrome ブラウザー。具体的なバージョンは Chrome 102 64bit です。
2. Leaflet.DistortableVideoの使い方
1. 新しい Html5 ページを作成する
ディレクトリに新しい pointArray2.html ページを作成し、そのページに関連する Web ページ コードを定義します。ここでは基本的なスケルトン コードのみを示し、最後に完全なページの例を示します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Leaflet叠加视频图层</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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/[email protected]/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 のデフォルトの構成方法を使用するだけです。同時に、システムの初期化中にマップの範囲が制限されます。詳細については、次のコードを参照してください。
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 メソッドを通じて初期化されます。ビデオレイヤーを初期化して設定するには2つの方法があります.1つ目は上記のコードメソッド.作成時に4つの頂点コーナーの位置が対応するレイヤーに渡されます.もう1つの方法は次のとおりです.
overlay.setCorners(corners);通过以上设置后，可以看到视频图层叠加地图图层的效果，同时设置了视频图层的透明度。视频图层可以随着地图图层进行放大和缩小。
最后输出一个动态的效果图如下图所示，
完整的网页代码示例如下，地图底图采用的OSM的在线地图，仅供学习使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Leaflet叠加视频图层</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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/[email protected]/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方式对视频图层的加载进行了步骤分析，希望可以帮助您更深度的理解这个组件。