当前位置：首页 > news >正文

MapLibre GL JS第30课：添加视频

news 2026/5/31 1:03:30

📌 学习目标

掌握添加视频的实现方法
理解相关API的使用
能够独立完成类似功能开发

🎯 核心概念

将视频添加为地图上的动态图层。

💻 完整代码

代码示例

constvideoStyle={'version':8,'sources':{'satellite':{'type':'raster','url':'https://api.maptiler.com/tiles/satellite/tiles.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL','tileSize':256},'video':{'type':'video','urls':['https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4','https://static-assets.mapbox.com/mapbox-gl-js/drone.webm'],'coordinates':[[-122.51596391201019,37.56238816766053],[-122.51467645168304,37.56410183312965],[-122.51309394836426,37.563391708549425],[-122.51423120498657,37.56161849366671]]}},'layers':[{'id':'background','type':'background','paint':{'background-color':'rgb(4,7,14)'}},{'id':'satellite','type':'raster','source':'satellite'},{'id':'video','type':'raster','source':'video'}]};constmap=newmaplibregl.Map({container:'map',minZoom:14,zoom:17,center:[-122.514426,37.562984],bearing:-96,style:videoStyle});letplayingVideo=true;map.on('click',()=>{playingVideo=!playingVideo;if(playingVideo)map.getSource('video').play();elsemap.getSource('video').pause();});

代码示例

<!DOCTYPEhtml><htmllang="en"><head><title>Add a video</title><metaproperty="og:description"content="在卫星栅格底图上显示视频。"/><metaproperty="og:created"content="2025-06-25"/><metacharset='utf-8'><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel='stylesheet'href='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css'/><scriptsrc='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js'></script><style>body{margin:0;padding:0;}html, body, #map{height:100%;}</style></head><body><divid="map"></div><script>constvideoStyle={'version':8,'sources':{'satellite':{'type':'raster','url':'https://api.maptiler.com/tiles/satellite/tiles.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL','tileSize':256},'video':{'type':'video','urls':['https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4','https://static-assets.mapbox.com/mapbox-gl-js/drone.webm'],'coordinates':[[-122.51596391201019,37.56238816766053],[-122.51467645168304,37.56410183312965],[-122.51309394836426,37.563391708549425],[-122.51423120498657,37.56161849366671]]}},'layers':[{'id':'background','type':'background','paint':{'background-color':'rgb(4,7,14)'}},{'id':'satellite','type':'raster','source':'satellite'},{'id':'video','type':'raster','source':'video'}]};constmap=newmaplibregl.Map({container:'map',minZoom:14,zoom:17,center:[-122.514426,37.562984],bearing:-96,style:videoStyle});letplayingVideo=true;map.on('click',()=>{playingVideo=!playingVideo;if(playingVideo)map.getSource('video').play();elsemap.getSource('video').pause();});</script></body></html>

🔍 代码解析

1. 配置样式对象

定义完整的样式对象，包含多个数据源和图层：

satellite: 卫星影像栅格源
video: 视频源

2. 配置视频数据源

在style.sources中定义视频源：

type: 'video': 指定为视频源
urls: 视频文件URL数组（支持多种格式）
coordinates: 视频四角对应的地理坐标

3. 配置图层

创建三个图层：

background: 背景层
satellite: 卫星影像层
video: 视频层（叠加在卫星影像上）

4. 初始化地图

使用配置的样式对象创建地图实例，设置初始视角。

5. 添加点击交互

点击地图切换视频播放/暂停状态。

⚙️ 参数说明

参数	类型	必填	说明
container	string	是	地图容器ID
style	object	是	完整的样式对象
center	[number, number]	否	初始中心点，默认[0, 0]
zoom	number	否	初始缩放级别，默认0
bearing	number	否	初始方位角