使用MapLibre和Puppeteer自動生成路線飛越影片

Wed, 20 Mar 2024 00:00:00 +0000

你是否曾希望在騎行前預覽騎行路線？我們建構了一個自動化系統，為Party Onbici上的每條派對路線生成精美的飛越影片，讓騎行者可以電影般地預覽他們旅程中將會遇到的風景。

挑戰

在組織或參加騎行活動時，了解路線至關重要。靜態地圖雖然有用，但無法傳達實際騎行路線的體驗。我們想給使用者一種方式，讓他們在承諾參加騎行之前能夠虛擬地「飛越」路線。

我們的解決方案：無頭影片渲染

我們建構了一個Node.js服務，使用Puppeteer運行無頭Chrome瀏覽器，在互動式MapLibre GL地圖上渲染路線，並在虛擬攝影機沿路徑飛行時擷取幀。以下是其運作原理：

1. 路線內插

一條騎行路線可能有數千個座標點。要建立15秒30FPS的流暢影片，我們需要精確450幀。我們使用基於距離的內插來均勻取樣路線：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// Calculate cumulative distances using Haversine formula
const distances = [0];
for (let i = 1; i < coordinates.length; i++) {
 const dist = haversineDistance(coordinates[i-1], coordinates[i]);
 totalDistance += dist;
 distances.push(totalDistance);
}

// Sample at exactly totalFrames points
for (let frame = 0; frame < totalFrames; frame++) {
 const targetDist = (frame / (totalFrames - 1)) * totalDistance;
 // Interpolate position at this distance...
}

2. 平滑方位的攝影機動畫

簡單地將攝影機指向行進方向會在彎曲的路線上產生抖動。我們使用12幀的移動平均來平滑攝影機方位，並對360度/0度的環繞進行特殊處理：

Node.js on Party Onbici Blog

使用MapLibre和Puppeteer自動生成路線飛越影片

挑戰

我們的解決方案：無頭影片渲染

1. 路線內插

2. 平滑方位的攝影機動畫