图层架构

本文档涵盖 OpenLayers 中的图层架构,包括不同的图层类型(Vector、Tile、Image、WebGL)以及它们如何与渲染系统集成。图层充当数据源和渲染管线之间的桥梁,组织地理空间内容以进行显示。

关于协调图层的中央 Map 组件的信息,请参阅 地图组件。关于为图层提供数据的数据源的详细信息,请参阅 数据源系统。关于图层集成的渲染管线的详细信息,请参阅 渲染系统。

Layer Type Hierarchy

OpenLayers supports several layer types, each optimized for different types of geospatial data and rendering requirements. The layer types form a hierarchy that determines their rendering behavior and data handling capabilities.

100%

Layer Type Characteristics:

Layer Type	Data Format	Rendering Method	Use Cases
VectorLayer	Features with geometries	Canvas 2D drawing	Interactive features, editing
TileLayer	Pre-rendered image tiles	Canvas image drawing	Base maps, raster overlays
ImageLayer	Single images	Canvas image drawing	WMS, static imagery
VectorTileLayer	Tiled vector data	Canvas 2D or pre-rendered	Scalable vector maps
VectorImageLayer	Vector rendered to image	Canvas image drawing	Performance optimization
WebGLLayer	Any, GPU processed	WebGL shaders	Large datasets, effects

渲染器架构

每种图层类型都配有一个相应的渲染器,用于处理实际的绘图操作。渲染器架构遵循分层模式,具有共享的基础功能和专门的实现。

100%

核心渲染器职责:

• LayerRenderer: 定义 prepareFrame()、renderFrame() 和命中检测方法的抽象接口
• CanvasLayerRenderer: Canvas 上下文管理、变换计算、容器准备
• 专门渲染器: 特定于图层类型的渲染逻辑和优化

图层-渲染器集成管线

图层渲染过程遵循一致的管线,与 Map 的帧渲染周期集成。每个渲染器根据其图层类型的要求实现此管线。

100%

管线阶段:

1. 准备 (src/ol/renderer/Layer.js90-92): 确定图层是否准备好渲染
2. 帧设置 (src/ol/renderer/canvas/Layer.js252-287): 配置画布变换和裁剪
3. 内容渲染: 特定于图层的绘图操作
4. 清理 (src/ol/renderer/canvas/Layer.js326-331): 分发事件并完成渲染

瓦片图层实现

CanvasTileLayerRenderer 实现了复杂的瓦片管理,包括缓存、替代缩放级别处理和瓦片金字塔的高效渲染。

100%

关键瓦片渲染功能:

• 瓦片缓存 (src/ol/renderer/canvas/TileLayer.js196-212): 用于高效瓦片重用的 LRU 缓存
• 多缩放渲染 (src/ol/renderer/canvas/TileLayer.js700-726): 当目标缩放不可用时使用父/子瓦片
• 裁剪 (src/ol/renderer/canvas/TileLayer.js808-838): 防止缩放级别之间的重叠伪影
• 过渡效果 (src/ol/renderer/canvas/TileLayer.js925-952): 加载瓦片的平滑 alpha 过渡

矢量图层实现

CanvasVectorLayerRenderer 处理基于要素的渲染,支持样式化、命中检测和全球投影的世界环绕。

100%

矢量渲染管线:

1. 要素加载 (src/ol/renderer/canvas/VectorLayer.js676-690): 对视图范围内的要素进行空间查询
2. 样式应用 (src/ol/renderer/canvas/VectorLayer.js700-718): 应用要素或图层样式
3. 指令构建 (src/ol/renderer/canvas/VectorLayer.js666-671): 将要素转换为绘图指令
4. 渲染执行 (src/ol/renderer/canvas/VectorLayer.js221-236): 使用世界环绕执行指令

矢量瓦片图层实现

CanvasVectorTileLayerRenderer 结合了基于瓦片的加载和矢量渲染,支持每个渲染瓦片的多个源瓦片和高效缓存。

100%

矢量瓦片渲染功能:

• 多源聚合 (src/ol/renderer/canvas/VectorTileLayer.js227-316): 将多个源瓦片合并为渲染瓦片
• 渲染模式支持 (src/ol/renderer/canvas/VectorTileLayer.js47-60): 矢量、图像或混合渲染
• 高效缓存 (src/ol/renderer/canvas/VectorTileLayer.js188-195): 缓存源数据和渲染结果
• 命中检测 (src/ol/renderer/canvas/VectorTileLayer.js332-425): 基于坐标的要素识别

图层与地图渲染集成

图层通过 LayerRenderer 接口与 Map 的渲染系统集成,参与帧渲染周期和坐标变换。

100%

集成点:

• 帧状态 (src/ol/renderer/canvas/Layer.js252-270): 共享的渲染上下文和变换
• 图层状态 (src/ol/renderer/canvas/TileLayer.js578-589): 每个图层的配置和不透明度
• 坐标变换 (src/ol/renderer/canvas/Layer.js388-413): 在像素和地图坐标之间转换
• 事件分发 (src/ol/renderer/canvas/Layer.js295-306): 用于自定义处理的前/后渲染事件