地图前端性能复盘：大量 Marker 与轨迹线的渲染优化实战

地图前端性能复盘：大量 Marker 与轨迹线的渲染优化实战

一、地图渲染的性能天花板：Canvas 2D 到 WebGL 的临界点在哪

地图前端的性能瓶颈有一个清晰的临界点：当 Marker 数量超过 500 个或轨迹线点数超过 5000 时，Canvas 2D 渲染开始出现可感知的帧率下降。这不是理论推测，而是在实际压测中反复验证过的数据。

问题的本质不是"Canvas 2D 画得动"，而是每帧都需要遍历所有可见元素、做坐标变换、调用context.drawImage()或context.stroke()。每个 API 调用都有固定开销（JavaScript → 渲染引擎的跨边界调用），500 次调用意味着 500 次跨边界开销。更致命的是，当用户拖拽或缩放地图时，每一帧都要重新计算所有 Marker 的屏幕坐标并全量重绘——这个计算量是 O(n) 的，n 越大越卡。

二、Marker 批量渲染：从逐个绘制到 GPU 实例化

2.1 Canvas 2D 的逐个绘制瓶颈

Canvas 2D 的drawImage每次调用都会触发一次完整的渲染管线：设置变换矩阵 → 纹理绑定 → 绘制命令提交。在 60fps 的帧率要求下，每帧只有 16.6ms 的预算。如果 1000 个 Marker 每个耗时 0.05ms，总耗时就是 50ms——三帧的时间，画面必然卡顿。

逐个绘制的另一个隐性成本是坐标变换。每个 Marker 的经纬度需要实时转换为屏幕坐标，这个转换本身含三角函数计算（Math.sin/Math.cos用于墨卡托投影），1000 次变换在低端设备上也可能成为瓶颈。

2.2 WebGL 实例化渲染方案

WebGL 的**实例化渲染（Instanced Rendering）**可以一次 DrawCall 绘制上千个 Marker。核心思路是：将 Marker 的纹理图集（所有 Marker 图标合并在一个纹理中）、位置、缩放、旋转等信息以 Buffer 形式提交给 GPU，GPU 并行处理每个实例的顶点变换和纹理采样。

/** * WebGL 实例化渲染管理器 * 一次 DrawCall 完成所有 Marker 的绘制 */ interface MarkerInstance { x: number; // 屏幕坐标 X y: number; // 屏幕坐标 Y textureIndex: number; // 纹理图集中的图标索引 scale: number; // 根据地图缩放级别的缩放系数 rotation: number; // 旋转角度（弧度） opacity: number; // 透明度 } class WebGLMarkerRenderer { private gl: WebGL2RenderingContext; private program: WebGLProgram; private instanceBuffer: WebGLBuffer; private textureAtlas: WebGLTexture; private readonly MAX_INSTANCES = 10000; private readonly FLOATS_PER_INSTANCE = 8; // x, y, texIndex, scale, rotation, opacity, 2 padding constructor(canvas: HTMLCanvasElement) { const gl = canvas.getContext('webgl2', { alpha: true, antialias: false }); if (!gl) throw new Error('WebGL2 not supported'); this.gl = gl; this.createTextureAtlas(); this.createShaderProgram(); this.createInstanceBuffer(); } /** * 批量更新所有 Marker 实例并渲染 */ render(markers: MarkerInstance[]): void { const gl = this.gl; const count = Math.min(markers.length, this.MAX_INSTANCES); // 1. 更新 instance buffer const data = new Float32Array(count * this.FLOATS_PER_INSTANCE); for (let i = 0; i < count; i++) { const m = markers[i]; const offset = i * this.FLOATS_PER_INSTANCE; data[offset] = m.x; data[offset + 1] = m.y; data[offset + 2] = m.textureIndex; data[offset + 3] = m.scale; data[offset + 4] = m.rotation; data[offset + 5] = m.opacity; } gl.bindBuffer(gl.ARRAY_BUFFER, this.instanceBuffer); gl.bufferSubData(gl.ARRAY_BUFFER, 0, data); // 2. 一次 DrawCall 绘制所有 Marker gl.useProgram(this.program); gl.bindTexture(gl.TEXTURE_2D, this.textureAtlas); // 实例化绘制：6 个顶点/四边形 × N 个实例 gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, count); } /** * 创建纹理图集：将所有 Marker 图标打包到一张纹理中 */ private createTextureAtlas(): void { const gl = this.gl; const atlas = gl.createTexture()!; gl.bindTexture(gl.TEXTURE_2D, atlas); // 使用 Canvas 2D 合成纹理图集（4×4 = 16 种图标） const atlasCanvas = document.createElement('canvas'); atlasCanvas.width = 512; atlasCanvas.height = 512; const ctx = atlasCanvas.getContext('2d')!; // 在 4x4 网格中绘制图标（实际使用时按需加载图标） for (let row = 0; row < 4; row++) { for (let col = 0; col < 4; col++) { ctx.fillStyle = `hsl(${(row * 4 + col) * 22}, 70%, 50%)`; ctx.fillRect(col * 128, row * 128, 128, 128); ctx.fillStyle = '#FFF'; ctx.font = '24px sans-serif'; ctx.textAlign = 'center'; ctx.fillText(`${row * 4 + col}`, col * 128 + 64, row * 128 + 64); } } gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, atlasCanvas); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); this.textureAtlas = atlas; } private createShaderProgram(): void { // 顶点着色器 + 片元着色器（支持纹理图集采样和实例化属性） const vs = ` #version 300 es layout(location = 0) in vec2 a_position; layout(location = 1) in vec2 a_texCoord; layout(location = 2) in vec2 a_offset; // 实例位置 layout(location = 3) in float a_texIndex; // 纹理索引 layout(location = 4) in float a_scale; layout(location = 5) in float a_rotation; layout(location = 6) in float a_opacity; uniform vec2 u_canvasSize; out vec2 v_texCoord; out float v_opacity; void main() { float s = sin(a_rotation); float c = cos(a_rotation); vec2 rotated = vec2( a_position.x * c - a_position.y * s, a_position.x * s + a_position.y * c ) * a_scale; vec2 pos = (a_offset + rotated) / u_canvasSize * 2.0 - 1.0; gl_Position = vec4(pos.x, -pos.y, 0.0, 1.0); v_texCoord = a_texCoord + vec2(mod(a_texIndex, 4.0), floor(a_texIndex / 4.0)) * 0.25; v_opacity = a_opacity; }`; const fs = `#version 300 es precision mediump float; in vec2 v_texCoord; in float v_opacity; uniform sampler2D u_texture; out vec4 fragColor; void main() { fragColor = texture(u_texture, v_texCoord); fragColor.a *= v_opacity; }`; // 编译和链接着色器（省略编译错误处理） this.program = this.compileShader(vs, fs); } private createInstanceBuffer(): void { const gl = this.gl; this.instanceBuffer = gl.createBuffer()!; gl.bindBuffer(gl.ARRAY_BUFFER, this.instanceBuffer); gl.bufferData(gl.ARRAY_BUFFER, this.MAX_INSTANCES * this.FLOATS_PER_INSTANCE * 4, gl.DYNAMIC_DRAW); // 设置实例化属性（每个实例一份数据，而非每个顶点） const stride = this.FLOATS_PER_INSTANCE * 4; this.addInstanceAttrib(2, 2, stride, 0); // a_offset this.addInstanceAttrib(3, 1, stride, 8); // a_texIndex this.addInstanceAttrib(4, 1, stride, 12); // a_scale this.addInstanceAttrib(5, 1, stride, 16); // a_rotation this.addInstanceAttrib(6, 1, stride, 20); // a_opacity } private addInstanceAttrib( location: number, size: number, stride: number, offset: number ): void { const gl = this.gl; gl.enableVertexAttribArray(location); gl.vertexAttribPointer(location, size, gl.FLOAT, false, stride, offset); // 关键：标记为实例化属性（每个实例更新一次，而非每个顶点） gl.vertexAttribDivisor(location, 1); } private compileShader(vs: string, fs: string): WebGLProgram { // 省略：编译 vertex/fragment shader，创建 program return {} as WebGLProgram; } }

2.3 Marker 聚合（Clustering）：降量优先

在 Marker 数量达到万级时，即使 WebGL 实例化渲染能保持流畅，信息密度也已超出用户的感知能力。此时需要在渲染之前做聚合。

聚合算法的核心思想是按视口网格分组：将当前视口划分为 N×M 的网格，每个网格内的 Marker 合并为一个聚合点。聚合点显示数量徽标，点击后逐级展开。

关键设计点：

• 聚合层级与缩放级别绑定。zoom < 10 时网格大小为 200×200 像素，zoom >= 15 时缩小到 60×60 像素。
• 聚合点渲染复用 Marker 的实例化管线。聚合点的图标通过纹理图集中的专用纹理索引区分，数量徽标使用 Canvas 2D 离屏渲染后作为纹理上传。
• 增量聚合。用户平移地图时，视口边缘新出现的 Marker 才需要重新计算归属网格，视口中央的已有聚合结果可以复用。

三、轨迹线渲染：从逐段绘制到 LineString 批处理

3.1 轨迹线渲染的特殊性

轨迹线与 Marker 的最大区别在于几何数据的规模。一个 2 小时的行程轨迹可能包含数千到数万个坐标点（GPS 采样频率 1Hz = 7200 点/2小时）。如果将每个坐标点之间的线段单独调用ctx.stroke()，性能极差。

正确的做法是将同一段轨迹的所有坐标点合并为一个 LineString，通过**三角剖分（Triangulation）**将线段扩展为有宽度的三角形条带（Triangle Strip），然后一次性提交给 WebGL 绘制。

/** * 轨迹线三角剖分渲染器 * 将 LineString 扩展为 Triangle Strip，支持可变宽度和渐变着色 */ interface TrackSegment { coordinates: [number, number][]; speed: number[]; // 各点的速度（用于着色映射） colorMap: string[]; // 速度到颜色的映射 } class TrackLineRenderer { private gl: WebGL2RenderingContext; private program: WebGLProgram; private vertexBuffer: WebGLBuffer; /** * 将轨迹 LineString 剖分为三角形条带 * LineString 的每两个连续点之间生成一个四边形（两个三角形） */ triangulate(track: TrackSegment): Float32Array { const { coordinates } = track; const vertices: number[] = []; const lineWidth = 4; // 轨迹线宽度（像素） for (let i = 0; i < coordinates.length - 1; i++) { const [x1, y1] = coordinates[i]; const [x2, y2] = coordinates[i + 1]; // 计算当前线段的方向和法向量 const dx = x2 - x1; const dy = y2 - y1; const len = Math.sqrt(dx * dx + dy * dy); if (len === 0) continue; const nx = (-dy / len) * lineWidth / 2; const ny = (dx / len) * lineWidth / 2; // 四边形四个顶点：左侧两个 + 右侧两个 // 顶点 A（左前） vertices.push(x1 - nx, y1 - ny, 0, 0); // 顶点 B（右前） vertices.push(x1 + nx, y1 + ny, 1, 0); // 顶点 C（左后） vertices.push(x2 - nx, y2 - ny, 0, 1); // 顶点 D（右后） vertices.push(x2 + nx, y2 + ny, 1, 1); } return new Float32Array(vertices); } /** * 绘制带渐变着色的轨迹线 */ render(track: TrackSegment): void { const gl = this.gl; const vertices = this.triangulate(track); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW); gl.useProgram(this.program); // 绘制三角形条带 gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertices.length / 4); } }

3.2 轨迹线的 LOD（Level of Detail）简化

在缩小的地图视角（zoom < 12）下，轨迹线的细微弯曲对肉眼不可见。此时可以对轨迹坐标做道格拉斯-普克算法（Douglas-Peucker）简化，在保留轨迹大致形状的前提下大幅减少点数。

简化阈值应随缩放级别动态调整：zoom 10 → 简化阈值 10 像素，zoom 15 → 简化阈值 2 像素，zoom 18 → 不做简化。

/** * 道格拉斯-普克轨迹简化算法 * 递归去除对轨迹形状贡献最小的中间点 */ function douglasPeucker( points: [number, number][], epsilon: number ): [number, number][] { if (points.length <= 2) return points; let maxDist = 0; let maxIndex = 0; const [firstX, firstY] = points[0]; const [lastX, lastY] = points[points.length - 1]; // 找到距离首尾连线最远的点 for (let i = 1; i < points.length - 1; i++) { const dist = perpendicularDistance( points[i], [firstX, firstY], [lastX, lastY] ); if (dist > maxDist) { maxDist = dist; maxIndex = i; } } // 如果最远距离大于阈值，在该点分割后递归简化 if (maxDist > epsilon) { const left = douglasPeucker(points.slice(0, maxIndex + 1), epsilon); const right = douglasPeucker(points.slice(maxIndex), epsilon); return [...left.slice(0, -1), ...right]; } return [points[0], points[points.length - 1]]; } function perpendicularDistance( point: [number, number], lineStart: [number, number], lineEnd: [number, number] ): number { const [px, py] = point; const [x1, y1] = lineStart; const [x2, y2] = lineEnd; const dx = x2 - x1; const dy = y2 - y1; const numerator = Math.abs(dy * px - dx * py + x2 * y1 - y2 * x1); const denominator = Math.sqrt(dx * dx + dy * dy); return denominator === 0 ? 0 : numerator / denominator; }

四、Canvas 2D vs. WebGL 的选型边界

4.1 两种方案的成本对比

4.2 选型建议

• 简单地图（< 200 Marker）：Canvas 2D 即可，不要为不需要的性能复杂度买单。
• 中等规模（200~1000 Marker）：Canvas 2D + 视口裁剪 + Marker 聚合 → 阶段性升级。
• 大规模（> 1000 Marker 或长轨迹线）：WebGL 实例化渲染 + LOD 简化。引入 Mapbox GL JS 或 deck.gl 这类现有封装库是最佳策略，除非团队有专门的 WebGL 开发能力。

4.3 常见误区

一个常见误区是"WebGL 一定比 Canvas 2D 快"。实际上，WebGL 的优势体现在批量和并行上。如果只绘制 10 个 Marker，Canvas 2D 的 10 次drawImage调用比 WebGL 的着色器编译和上下文切换更快。WebGL 的固定开销（着色器编译、纹理上传）可能需要 50~100ms，在低元素数量场景下反而不划算。

五、总结

地图前端的渲染优化需要根据 Marker/轨迹线的规模分阶段处理：

1. < 500 Marker：Canvas 2D 直接渲染。保持代码简单，不做过度优化。
2. 500~2000 Marker：引入视口裁剪和 Marker 聚合。视口裁剪通过计算经纬度是否在屏幕可视范围内，过滤掉 70%~90% 的不可见元素。聚合将密集点合并为数量徽标，同时降低渲染量和信息密度。
3. > 2000 Marker 或长轨迹线：迁移到 WebGL 实例化渲染。一次 DrawCall 完成所有绘制，抵消 JavaScript 到 GPU 的跨边界开销。配合道格拉斯-普克算法的 LOD 简化，在缩小视角下自动降低轨迹线复杂度。
4. 所有场景：Marker 的坐标变换和聚合计算放入 Web Worker，避免阻塞主线程的渲染循环。渲染管线的主线程职责应仅限于提交已计算好的数据给 GPU。