Jinuss's blog Jinuss's blog
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript高级程序设计》
    • 《Vue》
    • 《React》
    • 《Git》
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • 学习
  • 实用技巧
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

东流

前端可视化
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript高级程序设计》
    • 《Vue》
    • 《React》
    • 《Git》
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • 学习
  • 实用技巧
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 核心基类

  • Control控件篇

  • Geom几何图形篇

  • Layer图层篇

  • Renderer篇

    • VectorContext类
    • Build类
    • TextBuilder类
    • BuilderGroup类
      • 概述
      • 源码分析
        • BuilderGroup类的源码实现
        • BuilderGroup类的构造函数
        • BuilderGroup类的主要方法
      • 总结
    • PolygonBuilder类
    • LineStringBuilder类
    • ImageBuilder类
    • renderFeature介绍
    • CanvasLayerRenderer类
    • LayerRender类
  • Feature篇

  • style样式篇

  • 《Openlayers源码》笔记
  • Renderer篇
东流
2025-01-11
目录

BuilderGroup类

# 概述

在 Openlayers 中,BuilderGroup类用于处理不同类型的几何图形(如点、线、面等)以及根据几何类型的不同而构建相关的绘制指令。

本文主要介绍BuilderGroup类是如何管理不同类型指令构建类,默认的构建类是Builder类,即CanvasBuilder类,该类也是其它类型指令构建类的基类,关于CanvasBuilder类,可以参考这篇文章

# 源码分析

# BuilderGroup类的源码实现

BuilderGroup类的源码实现如下:

const BATCH_CONSTRUCTORS = {
  Circle: PolygonBuilder,
  Default: Builder,
  Image: ImageBuilder,
  LineString: LineStringBuilder,
  Polygon: PolygonBuilder,
  Text: TextBuilder,
};

class BuilderGroup {
  constructor(tolerance, maxExtent, resolution, pixelRatio) {
    this.tolerance_ = tolerance;
    this.maxExtent_ = maxExtent;
    this.pixelRatio_ = pixelRatio;
    this.resolution_ = resolution;
    this.buildersByZIndex_ = {};
  }
  finish() {
    const builderInstructions = {};
    for (const zKey in this.buildersByZIndex_) {
      builderInstructions[zKey] = builderInstructions[zKey] || {};
      const builders = this.buildersByZIndex_[zKey];
      for (const builderKey in builders) {
        const builderInstruction = builders[builderKey].finish();
        builderInstructions[zKey][builderKey] = builderInstruction;
      }
    }
    return builderInstructions;
  }
  getBuilder(zIndex, builderType) {
    const zIndexKey = zIndex !== undefined ? zIndex.toString() : "0";
    let replays = this.buildersByZIndex_[zIndexKey];
    if (replays === undefined) {
      replays = {};
      this.buildersByZIndex_[zIndexKey] = replays;
    }
    let replay = replays[builderType];
    if (replay === undefined) {
      const Constructor = BATCH_CONSTRUCTORS[builderType];
      replay = new Constructor(
        this.tolerance_,
        this.maxExtent_,
        this.resolution_,
        this.pixelRatio_
      );
      replays[builderType] = replay;
    }
    return replay;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

在源码中,定义了一个变量BATCH_CONSTRUCTORS,该变量中是对应不同的几何类型与对应构造函数的映射,构造函数用于构建绘制指令,即负责将地理信息转化为 Openlayers 渲染引擎可使用的指令。

# BuilderGroup类的构造函数

BuilderGroup类的构造函数接受以下参数:

  • tolerance:容差,通常用于指定绘制精度或容许的误差范围。

  • maxExtent:最大范围,用来限制图形的显示范围。

  • resolution:地图的分辨率。

  • pixelRatio:像素比率,用来处理不同屏幕或设备的显示效果。

此外,构造函数还初始化了一个空对象buildersByZIndex_,它用于存储不同 Z 索引(Z-index)下的构建器实例。

# BuilderGroup类的主要方法

BuilderGroup类主要有如下两个方法:

  • getBuilder(zIndex,builderType)方法

getBuilder方法就是用于获取特定类型的构建器实例,接受两个参数zIndex索引和builderType几何类型;首先方法内部会根据zIndex查找或创建一个Z索引对应的构建器集合,然后从this.buildersByZIndex_中获取构建器,若它不存在,这从BATCH_CONSTRUCTORS中找到对应的构造函数,使用参数,实例化一个新的构建器;若存在,则直接返回存在的构建器实例。

  • finish()方法

finish 方法的作用是遍历每个 Z 索引(zKey),然后调用每个构建器的 finish 方法。构建器的 finish 方法通常会返回该构建器的渲染指令,这些指令会被用来最终渲染图形。

这个方法会返回一个包含了所有构建器渲染指令的对象,按 Z 索引分组。

# 总结

BuilderGroup 类是一个管理多个构建器的容器,负责:

  • 根据 Z 索引和构建器类型返回对应的构建器实例。

  • 收集每个构建器的渲染指令,通过 finish 方法返回最终的渲染指令。

BATCH_CONSTRUCTORS 用于将几何类型与具体的构建器类关联,确保每种几何类型有适当的构建器处理。这种结构允许在地图渲染过程中根据不同的几何类型灵活地管理和生成渲染指令。例如,在渲染一个多边形时,PolygonBuilder 会被用于生成渲染指令,而在渲染线条时,LineStringBuilder 会发挥作用。

编辑 (opens new window)
上次更新: 2025/01/11, 05:41:02
TextBuilder类
PolygonBuilder类

← TextBuilder类 PolygonBuilder类→

最近更新
01
GeoJSON
05-08
02
Circle
04-15
03
CircleMarker
04-15
更多文章>
Theme by Vdoing | Copyright © 2024-2025 东流 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式