1. 程式人生 > >如何在二維或三維地圖中疊加一個視訊(以mapboxgl為例)

如何在二維或三維地圖中疊加一個視訊(以mapboxgl為例)

 

 

手上有一個交通分析結果視訊,正射視角,來自遙感衛星視訊,通過加工形成交通流量視訊分析成果,現在需要把分析結果放在地圖中進行視覺化展示

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"
            });