手上有一個交通分析結果視頻,正射視角,來自遙感衛星視頻,通過加工形成交通流量視頻分析成果,現在需要把分析結果放在地圖中進行可視化展示
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"
});