當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2025/3/15 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 Leaflet文档阅读笔记- Showing video files解析小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

官方解析

博主例子

官方解析

這里，官方首先告訴我們，當<video>這個標簽還沒出現的時候，在web上展示視頻是很艱巨的。現在有了這個標簽，只需要如下代碼就能在web頁面上展示視頻：

想在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解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Redis工作笔记-spring-dat
下一篇： Leaflet笔记-把leaflet-t