源码分析之Openlayers中CanvasPolygonBuilder类

访问Openlayers网站(https://jinuss.github.io/Openlayers_map_pages/，网站是基于Vue3 + Openlayers，里面有大量的实践和案例。觉得还不错，可以 给个小星星Star，鼓励一波 https://github.com/Jinuss/OpenlayersMap哦~

概述

在 Openlayers 中，CanvasPolygonBuilder类是用于构造几何图形Circle、多边形Polygon和多个多边形MultiPolygon绘制指令集的构造器，CanvasPolygonBuilder类继承于CanvasBuilder类，关于CanvasBuilder类可以参考这篇文章源码分析之Openlayers中CanvasBuilder类

源码分析

CanvasPolygonBuilder类的源码实现

CanvasPolygonBuilder类的源码实现如下：

class CanvasPolygonBuilder extends CanvasBuilder {
   
   
  constructor(tolerance, maxExtent, resolution, pixelRatio) {
   
   
    super(tolerance, maxExtent, resolution, pixelRatio);
  }
  setFillStrokeStyles_() {
   
   
    const state = this.state;
    const fillStyle = state.fillStyle;
    if (fillStyle !== undefined) {
   
   
      this.updateFillStyle(state, this.createFill);
    }
    if (state.strokeStyle !== undefined) {
   
   
      this.updateStrokeStyle(state, this.applyStroke);
    }
  }

  drawFlatCoordinatess_(flatCoordinates, offset, ends, stride) {
   
   
    const state = this.state;
    const fill = state.fillStyle !== undefined;
    const stroke = state.strokeStyle !== undefined;
    const numEnds = ends.length;
    this.instructions.push(beginPathInstruction);
    this.hitDetectionInstructions.push(beginPathInstruction);
    for (let i = 0; i < numEnds; ++i) {
   
   
      const end = ends[i];
      const myBegin = this.coordinates.length;
      const myEnd = this.appendFlatLineCoordinates(
        flatCoordinates,
        offset,
        end,
        stride,
        true,
        !stroke
      );
      const moveToLineToInstruction = [
        CanvasInstruction.MOVE_TO_LINE_TO,
        myBegin,
        myEnd,
      ];<