leaflet 实现视频图层加载视频与地图联动（每天进步一点点）

念寒

于 2019-04-19 11:37:39 发布

阅读量1.3k

点赞数

分类专栏： leaflet 文章标签： leaflet＆视频

本文链接：https://blog.youkuaiyun.com/weixin_43746952/article/details/89396721

版权

leaflet 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在地图上叠加视频的方法，通过定义地理边界和视频源，实现了视频与地图的精准匹配，提升地理信息展示的直观性和吸引力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

没什么难度，找对方法就好了，和加载图片方式相同

  var bounds = L.latLngBounds([[32, -130], [13, -100]]);  //构建一个区域用于放视频

    this.mymap.fitBounds(bounds);													//定位到该区域

    var videoUrls = [																		   //放置视频的路径
      'https://www.mapbox.com/bites/00188/patricia_nasa.webm',		
      'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
    ];
    var videoOverlay = L.videoOverlay( videoUrls, bounds, {			//将视频放到之前的定位框中并加到地图里
        opacity: 0.8
    }).addTo(this.mymap);

在这里插入图片描述