在地图上播放视频

在地图上播放地理参考视频;
<!DOCTYPE html>
<html lang="en">
<head>
    <title>在地图上播放视频</title>
    <meta property="og:description" content="在地图上播放地理参考视频" />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.js'></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
        
        .map-overlay {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(255, 255, 255, 0.9);
            margin-right: 10px;
            font-family: Arial, sans-serif;
            overflow: auto;
            border-radius: 3px;
            padding: 10px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            line-height: 18px;
            max-width: 300px;
        }
        
        .map-overlay h3 {
            margin: 0 0 10px;
            font-size: 16px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 5px;
        }
        
        .map-overlay p {
            font-size: 13px;
            line-height: 1.5;
            margin: 0 0 10px;
        }
        
        .video-controls {
            margin-top: 10px;
        }
        
        .video-controls button {
            padding: 5px 10px;
            margin-right: 5px;
            background: #4264fb;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        
        .video-controls button:hover {
            background: #3151c9;
        }
        
        .video-controls button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
<div id="map"></div>

<div class="map-overlay">
    <h3>地图视频叠加层</h3>
    <p>
        此示例演示如何将地理参考视频添加到地图上。视频覆盖在正确的地理位置上，并随地图一起平移和缩放。
    </p>
    
    <div class="video-controls">
        <button id="play-btn">播放</button>
        <button id="pause-btn">暂停</button>
    </div>
</div>

<script>
    const map = new maplibregl.Map({
        container: 'map',
        style: 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
        zoom: 10,
        center: [-122.013235, 37.495709],
    });

    map.addControl(new maplibregl.NavigationControl());

    // 视频文件 URL - 这里使用了Mapbox提供的示例视频
    // 在实际应用中，替换为您自己的视频地址
    const videoUrls = [
        'https://static-assets.mapbox.com/mapbox-gl-js/drone/video/drone.mp4',
        'https://static-assets.mapbox.com/mapbox-gl-js/drone/video/drone.webm'
    ];

    // 视频覆盖范围的地理坐标
    // 为了使示例工作，这些坐标必须与视频内容对应
    const videoSourceCoordinates = [
        [-122.027560, 37.531089],
        [-122.001581, 37.531686],
        [-122.002661, 37.508158],
        [-122.028509, 37.507579]
    ];

    // 在加载地图时添加视频源和图层
    map.on('load', () => {
        // 创建HTML视频元素
        const videoElement = document.createElement('video');
        videoElement.muted = true; // 视频必须静音才能自动播放
        
        // 设置视频源
        for (const url of videoUrls) {
            const sourceElement = document.createElement('source');
            sourceElement.src = url;
            videoElement.appendChild(sourceElement);
        }

        // 添加视频作为地图源
        map.addSource('drone-video', {
            'type': 'video',
            'urls': videoUrls,
            'coordinates': videoSourceCoordinates
        });

        // 添加渲染视频的图层
        map.addLayer({
            'id': 'video-layer',
            'type': 'raster',
            'source': 'drone-video',
            'paint': {
                'raster-opacity': 0.85
            }
        });

        // 飞到视频覆盖的区域
        map.flyTo({
            center: [-122.013235, 37.5177],
            zoom: 14,
            essential: true
        });

        // 获取视频元素以控制播放
        const video = map.getSource('drone-video').getVideo();
        
        // 设置控制按钮功能
        const playBtn = document.getElementById('play-btn');
        const pauseBtn = document.getElementById('pause-btn');
        
        playBtn.addEventListener('click', () => {
            video.play();
        });
        
        pauseBtn.addEventListener('click', () => {
            video.pause();
        });

        // 视频初始化事件
        video.addEventListener('canplaythrough', () => {
            playBtn.disabled = false;
            pauseBtn.disabled = false;
        });
    });
</script>
</body>
</html>