如何在二维或三维地图中叠加一个视频（以mapboxgl为例）

最新推荐文章于 2025-06-18 13:37:30 发布

原创最新推荐文章于 2025-06-18 13:37:30 发布 · 4.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#mapboxgl #地图 #视频叠加 #太乐地图

GIS开发同时被 2 个专栏收录

11 篇文章

订阅专栏

mapboxgl

5 篇文章

订阅专栏

本文介绍如何将遥感卫星生成的交通流量视频分析结果在Mapbox GL地图上进行可视化展示，通过叠加视频并定位到地图具体坐标，实现交通状况的直观呈现。

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

手上有一个交通分析结果视频，正射视角，来自遥感卫星视频，通过加工形成交通流量视频分析成果，现在需要把分析结果放在地图中进行可视化展示

mapboxgl的地图如下

 map = new mapboxgl.Map({
            container: 'map',
            style: {
                "version": 8,
              
                "sources": {
                    "raster-tiles": {
                        "attribution": attribution,
                        "type": "raster",
                        "tiles": ["http://mt1.google.cn/vt/lyrs=y&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}"],
                        "tileSize": 256,
                    },
                },
                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tiles",
                    "minzoom": 0,
                    "maxzoom": 22
                }]
            },
            center: [51.336816, 35.699214],
            zoom: 13.64
        });
        map.addControl(new mapboxgl.NavigationControl(), 'top-left');

叠加视频的关键步骤，找到视频四个角在地图上的坐标，然后使用mapboxgl的视频叠加代码来实现

 map.addSource("roadvideo", {
                "type": "video",
                "urls": ["../data/video/德黑兰.mp4"],
                "coordinates": [
                    [51.317517, 35.704595],
                    [51.344626, 35.702886],
                    [51.343008, 35.691877],
                    [51.314601, 35.693847]
                ]
            });
            map.addLayer({
                "id": "video_Layer",
                "type": "raster",
                "source": "roadvideo"
            });