Leaflet中實現點選播放視訊和關閉視訊

阿新 • • 發佈：2022-04-08

場景

Leaflet快速入門與載入OSM顯示地圖：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880

在上面載入地圖顯示的基礎上。有時會藉助視訊展示地物的資訊。

比如在某位置新增一個圖片標註，點選該標註時播放視訊。

注：

部落格：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。

實現

1、Leaflet提供了L.VideoOverlay物件，宣告視訊檔案路徑和視訊新增的地圖範圍

        var videolayer;
         
//視訊檔案路徑
        var videoUrl = 'https://www.mapbox.com/bites/00188/patricia_nasa.webm';
        //視訊新增的地圖範圍
        var videoBounds = [[36.07, 120.33], [36.11, 120.37]];

2、新增播放和取消播放的圖示和圖片標註

        //新增播放圖示
        var playIcon = L.icon({
            //圖示地址
            iconUrl: "./images/播放器圖示.png",
            //圖示大小 

            iconSize: [70, 70]
        })
        //新增圖片標註（播放）
        var playMarker = L.marker([36.09, 120.35], {
            //新增圖示
            icon: playIcon
        }).addTo(map);
        //新增取消播放圖示
        var stopIcon = L.icon({
            //圖示地址
            iconUrl: "./images/停止播放.png",
            //圖示大小 

            iconSize: [40, 40]
        })
        //新增圖片標註（取消播放）
        var stopMarker = L.marker([36.09, 120.35], {
            //新增圖示
            icon: stopIcon
        });

3、宣告滑鼠點選事件

        /**滑鼠單擊事件
        *  @param {string} type 事件型別（滑鼠單擊）
        *  @param {function} fn 事件觸發後的響應函式
        */
        playMarker.on("click", function () {
            //新增視訊圖層至地圖中顯示
            videolayer = L.videoOverlay(videoUrl, videoBounds);
            map.addLayer(videolayer);
            //移除播放標註
            map.removeLayer(playMarker);
            //新增取消播放標註
            map.addLayer(stopMarker);
        });

        /**滑鼠單擊事件
        *  @param {string} type 事件型別（滑鼠單擊）
        *  @param {function} fn 事件觸發後的響應函式
        */
        stopMarker.on("click", function () {
            //將地圖中的視訊圖層移除
            map.removeLayer(videolayer);
            //移除取消播放標註
            map.removeLayer(stopMarker);
            //新增播放標註
            map.addLayer(playMarker);
        });

4、完整示例程式碼

<!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" />
    <style>
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <script type="text/javascript">
        var videolayer;
        //視訊檔案路徑
        var videoUrl = 'https://www.mapbox.com/bites/00188/patricia_nasa.webm';
        //視訊新增的地圖範圍
        var videoBounds = [[36.07, 120.33], [36.11, 120.37]];
        var map = L.map('map').setView([36.09, 120.35], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: ''
        }).addTo(map);

        //新增播放圖示
        var playIcon = L.icon({
            //圖示地址
            iconUrl: "./images/播放器圖示.png",
            //圖示大小
            iconSize: [70, 70]
        })
        //新增圖片標註（播放）
        var playMarker = L.marker([36.09, 120.35], {
            //新增圖示
            icon: playIcon
        }).addTo(map);
        //新增取消播放圖示
        var stopIcon = L.icon({
            //圖示地址
            iconUrl: "./images/停止播放.png",
            //圖示大小
            iconSize: [40, 40]
        })
        //新增圖片標註（取消播放）
        var stopMarker = L.marker([36.09, 120.35], {
            //新增圖示
            icon: stopIcon
        });

        /**滑鼠單擊事件
        *  @param {string} type 事件型別（滑鼠單擊）
        *  @param {function} fn 事件觸發後的響應函式
        */
        playMarker.on("click", function () {
            //新增視訊圖層至地圖中顯示
            videolayer = L.videoOverlay(videoUrl, videoBounds);
            map.addLayer(videolayer);
            //移除播放標註
            map.removeLayer(playMarker);
            //新增取消播放標註
            map.addLayer(stopMarker);
        });

        /**滑鼠單擊事件
        *  @param {string} type 事件型別（滑鼠單擊）
        *  @param {function} fn 事件觸發後的響應函式
        */
        stopMarker.on("click", function () {
            //將地圖中的視訊圖層移除
            map.removeLayer(videolayer);
            //移除取消播放標註
            map.removeLayer(stopMarker);
            //新增播放標註
            map.addLayer(playMarker);
        });
    </script>
</body>

</html>