WebWorker 在文本标注中的应用

function polylabel(polygon, precision, debug) {
  precision = precision || 1.0; // 精度

  // 计算多边形的最小包围盒
  var minX, minY, maxX, maxY;
  for (var i = 0; i < polygon[0].length; i++) {
    var p = polygon[0][i];
    if (!i || p[0] < minX) minX = p[0];
    if (!i || p[1] < minY) minY = p[1];
    if (!i || p[0] > maxX) maxX = p[0];
    if (!i || p[1] > maxY) maxY = p[1];
  }

  var width = maxX - minX;
  var height = maxY - minY;
  // 网格尺寸
  var cellSize = Math.min(width, height);
  var h = cellSize / 2;
  
  // 优先级队列
  var cellQueue = new Queue(null, compareMax);

  // 划分初始网格，全部入队
  for (var x = minX; x < maxX; x += cellSize) {
    for (var y = minY; y < maxY; y += cellSize) {
      // Cell 构造函数中会调用 pointToPolygonDist 计算中点到多边形的距离
      // @see https://github.com/mapbox/polylabel/blob/master/polylabel.js#L90-L109
      cellQueue.push(new Cell(x + h, y + h, h, polygon));
    }
  }
  
  // 初始状态以多边形几何中心作为候选网格
  // @see https://math.stackexchange.com/a/700059
  var bestCell = getCentroidCell(polygon);
  
  while (cellQueue.length) {
    // 网格出队
    var cell = cellQueue.pop();

    // 发现距离多边形边界更远的网格，更新最佳网格
    if (cell.d > bestCell.d) {
      bestCell = cell;
      if (debug) console.log('found best %d after %d probes', Math.round(1e4 * cell.d) / 1e4, numProbes);
    }

    // 小于精度阈值，不需要继续划分
    // Cell 构造函数中会计算 max this.max = this.d + this.h * Math.SQRT2;
    if (cell.max - bestCell.d <= precision) continue;

    // 划分成 4 个子网格
    h = cell.h / 2;
    cellQueue.push(new Cell(cell.x - h, cell.y - h, h, polygon));
    cellQueue.push(new Cell(cell.x + h, cell.y - h, h, polygon));
    cellQueue.push(new Cell(cell.x - h, cell.y + h, h, polygon));
    cellQueue.push(new Cell(cell.x + h, cell.y + h, h, polygon));
    numProbes += 4;
  }
  
  // 返回 PIA，以最佳网格中心点
  return [bestCell.x, bestCell.y];
}

// mapbox/utils/classify_rings.js
export function calculateSignedArea(ring: Array<Point>): number {
    let sum = 0;
    for (let i = 0, len = ring.length, j = len - 1, p1, p2; i < len; j = i++) {
        p1 = ring[i];
        p2 = ring[j];
        sum += (p2.x - p1.x) * (p1.y + p2.y);
    }
    return sum;
}

// mapbox/utils/classify_rings.js
const polygons = [];
let polygon,
    ccw;

for (let i = 0; i < len; i++) {
  // 计算有向面积
  const area = calculateSignedArea(rings[i]);
  if (area === 0) continue;

  (rings[i]: any).area = Math.abs(area);

  if (ccw === undefined) ccw = area < 0;
  
  // 下次出现逆时针 interior ring 时再添加
  if (ccw === area < 0) {
    if (polygon) polygons.push(polygon);
    polygon = [rings[i]];

  } else {
    // exterior ring 直接添加
    (polygon: any).push(rings[i]);
  }
}
if (polygon) polygons.push(polygon);

// https://github.com/xiaoiver/custom-mapbox-layer/blob/master/src/worker/loadData.ts#L10
interface IPayload {
  command: string;
  params: any;
  status: 'success'|'failure';
}

const ctx: Worker = self as any;
ctx.addEventListener('message', async ({ data: payload }) => {
  const { command, params } = payload;
  switch (command) {
// 加载数据 & 创建瓦片索引
    case 'loadData': {
      ctx.postMessage({
        command: 'tileIndexLoaded',
        status: 'success'
      });
    }
// 获取需要渲染的瓦片信息
    case 'getTiles': {
    }
  }
});

// https://github.com/xiaoiver/custom-mapbox-layer/blob/master/src/layers/TextLayer.ts#L105-L118
import * as Worker from 'worker-loader!../worker/worker';

// 主线程初始化
initWorker() {
    this.worker = new Worker();
    this.worker.addEventListener('message', this.handleWorkerMessage);
    // 通知 Worker 请求 GeoJSON 数据并创建数据瓦片索引
    this.worker.postMessage({
      command: 'loadData',
      params: {
        url: this.url,
        type: 'geojson',
        isCluster: false
      }
    });
  }

// https://github.com/xiaoiver/custom-mapbox-layer/blob/master/src/worker/feature/text.ts#L15-L26
// 多边形环分类
for (const polygon of classifyRings(rings, 0)) {
  // 计算多边形的难抵极
  const poi = findPoleOfInaccessibility(polygon, 16);
  // 组装该瓦片供文本渲染的结构
  tile.textFeatures.push({
    position: [poi.x, poi.y], // 锚点位置
    text, // 文本内容
  });
}

// web_worker_transfer.js
type SerializedObject = { [string]: Serialized };
export type Serialized =
    | void
    | boolean
//...省略其他类型
    | ArrayBuffer
    | Array<Serialized>
    | SerializedObject;
// 向 Worker 传递对象前，需要进行序列化
export function serialize(input: mixed, transferables?: Array<Transferable>): Serialized {}

/**
     * While processing `loadData`, we coalesce all further
     * `loadData` messages into a single call to _loadData
     * that will happen once we've finished processing the
     * first message. {@link GeoJSONSource#_updateWorkerData}
     * is responsible for sending us the `coalesce` message
     * at the time it receives a response from `loadData`
     *
     *          State: Idle
     *          ↑          |
     *     'coalesce'   'loadData'
     *          |     (triggers load)
     *          |          ↓
     *        State: Coalescing
     *          ↑          |
     *   (triggers load)   |
     *     'coalesce'   'loadData'
     *          |          ↓
     *        State: NeedsLoadData
     */
    coalesce() {
        if (this._state === 'Coalescing') {
            this._state = 'Idle';
        } else if (this._state === 'NeedsLoadData') {
            this._state = 'Coalescing';
            this._loadData();
        }
    }

// https://github.com/mapbox/mapbox-gl-js/blob/master/rollup/bundle_prelude.js
var shared, worker, mapboxgl;
// define gets called three times: one for each chunk. we rely on the order
// they're imported to know which is which
function define(_, chunk) {
if (!shared) {
    shared = chunk;
} else if (!worker) {
    worker = chunk;
} else {
    var workerBundleString = 'var sharedChunk = {}; (' + shared + ')(sharedChunk); (' + worker + ')(sharedChunk);'

    var sharedChunk = {};
    shared(sharedChunk);
    mapboxgl = chunk(sharedChunk);
    mapboxgl.workerUrl = window.URL.createObjectURL(new Blob([workerBundleString], { type: 'text/javascript' }));
}
}