官方解析

这里，官方首先告诉我们，当<video>这个标签还没出现的时候，在web上展示视频是很艰巨的。现在有了这个标签，只需要如下代码就能在web页面上展示视频：

<video width="500" controls><source src="https://www.mapbox.com/bites/00188/patricia_nasa.webm" type="video/webm"><source src="https://www.mapbox.com/bites/00188/patricia_nasa.mp4" type="video/mp4">
</video>

想在Leaflet上放视频，先得加载一个地图

var map = L.map('map').setView([37.8, -96], 4);L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + mapboxAccessToken, {id: 'mapbox.satellite',attribution: ...
}).addTo(map);

随后画一个放视频的矩形，放到地图上

var bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
L.rectangle(bounds).addTo(map);
map.fitBounds(bounds);

使用videoOverlay函数把视频放到刚刚画的矩形上！

var videoUrls = ['https://www.mapbox.com/bites/00188/patricia_nasa.webm','https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
];var bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
var videoOverlay = L.videoOverlay( videoUrls, bounds, {opacity: 0.8
}).addTo(map);

加一个播放和停止按钮

videoOverlay并没有提供play()和pause()的API。

需要调用getElement()，然后才能调用play()以及pause()

videoOverlay.on('load', function () {var MyPauseControl = L.Control.extend({onAdd: function() {var button = L.DomUtil.create('button');button.innerHTML = '⏸';L.DomEvent.on(button, 'click', function () {videoOverlay.getElement().pause();});return button;}});var MyPlayControl = L.Control.extend({onAdd: function() {var button = L.DomUtil.create('button');button.innerHTML = '⏵';L.DomEvent.on(button, 'click', function () {videoOverlay.getElement().play();});return button;}});var pauseControl = (new MyPauseControl()).addTo(map);var playControl = (new MyPlayControl()).addTo(map);
});

这样就增加了播放和暂停按钮了。

博主例子

下面在自定义地图上播放视频！

程序运行截图如下：

源码如下：

<!DOCTYPE html>
<html>
<head><title>video</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="leaflet.css" /><script src="leaflet.js"></script>        <script src="leaflet-tilelayer-wmts-src.js"></script><style>html, body {height: 100%;margin: 0;}#map {width: 100%;height: 100%;}</style></head>
<body>
<div id='map'></div>
<script type="text/javascript">var ign = new L.TileLayer.WMTS( "http://XXX.XXX.XXX.XXX:8080/geoserver/gwc/service/wmts" ,{layer: 'GG_9:gg_9',tilematrixset: "EPSG:900913",Format : 'image/png',TileMatrix: 'EPSG:900913:8'});var map = L.map('map', {minZoom: 4,maxZoom: 7}).setView([32, 118], 7);L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);map.addLayer(ign);map.invalidateSize(true);//添加的数据/*var popup = L.popup();function onMapClick(e){popup.setLatLng(e.latlng).setContent(e.latlng.toString()).openOn(map);}map.on('click', onMapClick);*/bounds = L.latLngBounds([[35.083, 111.467], [31.419, 120.344]]);L.rectangle(bounds).addTo(map);map.fitBounds(bounds);var videoUrls = ['https://vfx.mtime.cn/Video/2019/01/15/mp4/190115161611510728_480.mp4'];var overlay = L.videoOverlay(videoUrls, bounds, {opacity: 0.8,interactive: false,autoplay: true});map.addLayer(overlay);overlay.on('load', function () {var MyPauseControl = L.Control.extend({onAdd: function() {var button = L.DomUtil.create('button');button.innerHTML = '暂停';L.DomEvent.on(button, 'click', function () {overlay.getElement().pause();});return button;}});var MyPlayControl = L.Control.extend({onAdd: function() {var button = L.DomUtil.create('button');button.innerHTML = '播放';L.DomEvent.on(button, 'click', function () {overlay.getElement().play();});return button;}});var pauseControl = (new MyPauseControl()).addTo(map);var playControl = (new MyPlayControl()).addTo(map);});//添加的数据</script></body>
</html>

Leaflet文档阅读笔记- Showing video files解析相关推荐

Leaflet文档阅读笔记-Quick Start Guide笔记
目录网络加载JS和CSS 初始化地图在地图上做标记在地图上点击事件获得坐标个人对这篇文档的体会网络加载JS和CSS 先要加载css,然后在加载js <link rel="st ...
Leaflet文档阅读笔记-Extending Leaflet: Handlers and Controls笔记
目录官方解析博主栗子官方解析 Leaflet 1.0中出现了处理者这个新概念,处理浏览器里的dom事件单击,双击,地图滑动及map状态的改变. 当处理者启动时调用addHooks()函数,未启动 ...
Leaflet文档阅读笔记-Zoom levels笔记
目录官方解析博主例子官方解析把地图放缩锁定到0级 var map = L.map('map', {minZoom: 0,maxZoom: 0 });var cartodbAttribution ...
Leaflet文档阅读笔记-Using GeoJSON with Leaflet笔记
目录官方解析博主例子官方解析个人觉得这官方教程给得是相当的好,因为功能非常的强大,在此记录下,方便以后使用,以后肯定会经常用到! 此节将会学到从GeoJson对象中创建且调用map vecto ...
Leaflet文档阅读笔记-Markers With Custom Icons笔记
目录官方解析博主例子官方解析这个内容主要是把自定义图片,放到地图上,并且还可以增加阴影图片,以及点击图片后的弹出事件. 官方是准备了下面这4张图片: 使用下面这种方式可以单独设置,自定义图标 ...
Leaflet文档阅读笔记-Leaflet on Mobile笔记
目录 CSS和HTML改如何设置定位功能 CSS和HTML改如何设置如下的设置: body {padding: 0;margin: 0; } html, body, #map {height: 1 ...
Qt文档阅读笔记-Widgets Tutorial官方解析及实例
目录官方解析博主栗子官方解析 QWiget通常作为其他窗口的容器,可以使用QWidget到达最小代价定义自定义控件(经验:通常可以采用子类QLabel做成自定义控件) 可以通过构建他的父类对象来 ...
BootStrapStudio文档阅读笔记-Getting Started Guide解析
The Application Window BootStrapStudio这款软件的界面分为三个部分,最左边的面板是各种组件(Component),中间是Overview面板. 可以从Compone ...
Qt文档阅读笔记-void QObject::deleteLater()解析
[slot] void QObject::deleteLater() 这个对象的进行计划删除. 当对这个对象的操作结束回到事件循环时,这个对象将会被删除. 如果这个函数不在事件循环中调用,一旦事件循环 ...

Leaflet文档阅读笔记- Showing video files解析

官方解析

博主例子

Leaflet文档阅读笔记- Showing video files解析相关推荐

最新文章

热门文章