Canvas 渲染管线
本文档涵盖 OpenLayers 基于 Canvas 的渲染管线，该管线使用 HTML5 Canvas API 提供高性能的矢量和栅格渲染。该管线将地理要素和几何体转换为优化的渲染指令，并在帧渲染期间执行。
有关 WebGL 渲染的信息，请参阅 WebGL 渲染系统。有关一般图层架构概念，请参阅 图层架构。
系统概述
Canvas 渲染管线采用两阶段方法：要素处理期间的指令生成阶段和帧渲染期间的执行阶段。这种分离允许通过预先计算绘制操作并缓存它们以供重用来优化渲染性能。
Canvas 渲染架构
基于指令的渲染系统
Canvas 管线使用命令模式，其中渲染操作在要素处理期间编码为可序列化的指令，然后在帧渲染期间执行。
指令流程
关键数据结构
| 组件 | 用途 | 关键属性 |
|---|---|---|
| SerializableInstructions | 渲染命令的容器 | instructions, coordinates, textStates, fillStates, strokeStates |
| CanvasInstruction | 单个渲染命令 | 指令类型和参数 |
| ExecutorGroup | 按 z-index 对执行器进行分组 | executorsByZIndex_, maxExtent_, resolution_ |
| Executor | 执行特定几何类型的指令 | instructions, coordinates, pixelCoordinates_ |
几何渲染的构建器模式
Canvas 管线使用专门的构建器类将不同的几何类型转换为优化的渲染指令。
构建器类层次结构
构建器生命周期
构建器模式遵循以下序列：
- 初始化：
CanvasBuilderGroup为每个几何类型创建构建器 - 要素处理：
renderFeature()调用适当的构建器方法 - 指令生成：构建器累积渲染指令
- 完成：
finish()返回SerializableInstructions
执行管线
在帧渲染期间，ExecutorGroup 协调缓存指令的执行以生成最终的 canvas 输出。
执行架构
关键执行方法
| 方法 | 位置 | 用途 |
|---|---|---|
| execute() | ExecutorGroup | 协调构建器之间的执行 |
| execute_() | Executor | 执行特定几何类型的指令 |
| transform2D() | Geometry utilities | 将坐标转换到像素空间 |
| replayImageOrLabel_() | Executor | 渲染图像和文本标签 |
特定图层渲染器
不同的图层类型使用专门的 Canvas 渲染器，这些渲染器实现了基于指令的管线，并具有特定于图层的优化。
矢量图层渲染
CanvasVectorLayerRenderer 处理基于要素的图层：
矢量瓦片图层渲染
CanvasVectorTileLayerRenderer 使用矢量要素扩展了瓦片渲染：
性能优化
Canvas 管线包括多种性能优化：
- 指令缓存：渲染指令在帧之间缓存和重用
- 坐标变换：批量坐标变换以提高效率
- Z-index 分组：指令按 z-index 分组以实现最佳绘制顺序
- 命中检测：单独的命中检测 Canvas 用于像素级要素检测
- 去重：文本和符号定位的碰撞检测