foreword
In a two-dimensional based scene, the following requirements may be encountered. At a traffic intersection or an important monitoring point, real-time or recorded video information needs to be superimposed on the map. What's more, with the enhancement of equipment communication methods, drones and other equipment can collect real-time data and send it back to the control terminal in real time to help with remote investigation and control. However, in the conventional display information, some points are generally marked on the map, which can be understood as Markers on the map. When the visiting user clicks with the mouse, a window pops up to display the video information. There are too many interactions in this way, and the degree of interaction with the map is not strong. It does not reflect the strong relationship with the geographic information system, nor does it show the unique charm of the fusion of maps and videos.
This article will take Leaflet as an example to explain in depth a Leaflet-based video overlay display plug-in DistortableVideo . While introducing the plug-in, it also explains in depth how to actually apply DistortableVideo in projects. Finally, it gives a simple video overlay Html5 case. Friends who need help, the article is written in a hurry, it is right to throw a brick to attract jade, and more high-quality functions that meet the needs of users need your friends to make flowers.
1. Leaflet. Distortable Video
1 Introduction
Enable to distort videos on Leaflet maps. Leaflet.DistortableVideo allows for perspective distortions of images, client-side, using CSS3 transformations in the DOM. Based on this component, on the basis of Leaflet, the overlay display of video layers can be realized. Its open source protocol is the MIT protocol, so you can use it with confidence.
2. Source code
Open its github address Leaflet.DistortableVideo in the browser, and you can see the following information in the browser:
Use the git tool to clone the code to the local working directory, as shown in the figure below, here is a brief introduction to its working directory: 1. dist is the compiled dependent js file; 2. examples is the official sample file, quick start If so, you can achieve a quick start by running the relevant sample files. 3. lib is a package for local use, and can also be copied to the project for direct reference. 4. The src directory is the source code package of the component, and the code in this directory will not be modified under normal circumstances.
3. Relevant restrictions
The prerequisites referred to here are not limited to JQuery, and developers can refer to it based on the actual situation of their own projects. For browser requirements, it needs to support the video element and the matrix3d() method, otherwise it will affect the display effect of the component. The Chrome browser used by the blog post editor, the specific version is Chrome 102 64bit.
2. How to use Leaflet.DistortableVideo
1. Create a new Html5 page
Create a new pointArray2.html page in the directory, and define the relevant webpage code in the page. Only the basic skeleton code is shown here, and a complete page example will be given at the end.
<!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>In the above code, the js and css resources of Leaflet, the related dependencies of Jquery, and the reference js of video overlay js are introduced.
The video overlay js is placed in the dist directory.
2. Map definition
If you have read Leaflet-related blogs before, you must know that the relevant syntax for defining maps in Leaflet is reviewed here. It should be noted here that the projection method of the map accessed here is the standard WGS84 coordinate system, so there is no need to define the coordinate system yourself. Just use the default configuration method of Leaflet. At the same time, the scope of the map is limited while the system is initialized. For details, see the following code:
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. Video resource overlay
For the demo video resources, we use the official mp4. If you have local mp4 video information, you can also use local resources. There is no problem when showing.
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");The video source address, the location information of the four corners of the video, and the configuration information of the video layer are initialized through the distortableVideoOverlay method. There are two ways to initialize and set the video layer. The first is the above code method. When creating, the positions of the four vertex corners are passed to the corresponding layer; the other way is as follows:
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方式对视频图层的加载进行了步骤分析，希望可以帮助您更深度的理解这个组件。