学习目标掌握添加视频的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念将视频添加为地图上的动态图层。 完 整 代 码代码示例constvideoStyle{version:8,sources:{satellite:{type:raster,url:https://api.maptiler.com/tiles/satellite/tiles.json?keyget_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}]};constmapnewmaplibregl.Map({container:map,minZoom:14,zoom:17,center:[-122.514426,37.562984],bearing:-96,style:videoStyle});letplayingVideotrue;map.on(click,(){playingVideo!playingVideo;if(playingVideo)map.getSource(video).play();elsemap.getSource(video).pause();});代码示例!DOCTYPEhtmlhtmllangenheadtitleAdd a video/titlemetapropertyog:descriptioncontent在卫星栅格底图上显示视频。/metapropertyog:createdcontent2025-06-25/metacharsetutf-8metanameviewportcontentwidthdevice-width, initial-scale1linkrelstylesheethrefhttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.css/scriptsrchttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.js/scriptstylebody{margin:0;padding:0;}html, body, #map{height:100%;}/style/headbodydividmap/divscriptconstvideoStyle{version:8,sources:{satellite:{type:raster,url:https://api.maptiler.com/tiles/satellite/tiles.json?keyget_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}]};constmapnewmaplibregl.Map({container:map,minZoom:14,zoom:17,center:[-122.514426,37.562984],bearing:-96,style:videoStyle});letplayingVideotrue;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. 添加点击交互点击地图切换视频播放/暂停状态。⚙️ 参数说明参数类型必填说明containerstring是地图容器IDstyleobject是完整的样式对象center[number, number]否初始中心点默认[0, 0]zoomnumber否初始缩放级别默认0bearingnumber否初始方位角视频源配置属性类型说明typestring必须为 ‘video’urlsarray视频文件URL数组coordinatesarray四角地理坐标数组 [左下, 右下, 右上, 左上] 效果说明运行代码后地图显示美国旧金山区域中心点 -122.51°W, 37.56°N卫星影像作为底图无人机航拍视频叠加在指定地理区域点击地图可播放/暂停视频用户可正常交互拖拽、缩放、旋转 常 见 问 题Q1: 视频坐标如何设置A:coordinates数组按顺序定义视频四角的地理坐标左下、右下、右上、左上。Q2: 如何支持多种浏览器A:提供多种格式的视频文件MP4、WebM等浏览器会自动选择支持的格式。Q3: 如何控制视频播放A:通过map.getSource(video).play()和pause()方法控制。 练习任务基础练习修改视频URL更换为其他视频进阶挑战添加视频进度条控制拓展思考如何实现多个视频图层切换 最佳实践格式兼容: 提供多种视频格式确保跨浏览器支持坐标准确: 确保视频坐标与实际地理位置匹配交互友好: 提供清晰的播放控制方式性能优化: 视频尺寸适中避免过大影响加载速度 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏
