使用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. 平滑方位的摄像机动画