@mesh3d/cesium-vectortile-gl 0.4.4 → 0.4.6

package/Source/symbol/SymbolPlacements.js

@@ -1,88 +1,117 @@
-import { GridIndex } from 'maplibre-gl/src/symbol/grid_index'
-import { IRenderLayer } from '../layers/IRenderLayer';
-
-//参考 maplibre-gl/src/symbol/CollisionIndex.ts
-
-// When a symbol crosses the edge that causes it to be included in
-// collision detection, it will cause changes in the symbols around
-// it. This constant specifies how many pixels to pad the edge of
-// the viewport for collision detection so that the bulk of the changes
-// occur offscreen. Making this constant greater increases label
-// stability, but it's expensive.
-const viewportPadding = 100;
-let scratchScreenSpacePosition = null
-let scratchScreenSpaceBoundingBox = null
-
-/**
- * 基于 maplibre-gl GridIndex 实现符号碰撞检测（自动避让）。文字碰撞检测结果存放在 label 对象的扩展属性 vtPlaceable，该值为true表示文字可以显示到屏幕
- */
-export class SymbolPlacements {
-    constructor() {
-        scratchScreenSpacePosition = new Cesium.Cartesian2()
-        scratchScreenSpaceBoundingBox = new Cesium.BoundingRectangle()
-    }
-    /**
-     * @param {Cesium.FrameState} frameState 
-     * @param {IRenderLayer[]} orderedRenderLayers 
-     * @param {number} zoom 
-     */
-    update(frameState, orderedRenderLayers, zoom) {
-        const width = frameState.context.drawingBufferWidth / frameState.pixelRatio
-        const height = frameState.context.drawingBufferHeight / frameState.pixelRatio
-        const scene = frameState.camera._scene
-
-        const grid = new GridIndex(width + 2 * viewportPadding, height + 2 * viewportPadding, 25)
-
-        for (const layer of orderedRenderLayers) {
-            const style = layer.style
-            /**@type {Cesium.Label[]} */
-            const labels = layer.labels
-            if (layer.type !== 'symbol' || layer.visibility === 'none'
-                || zoom < style.minzoom || zoom >= style.maxzoom
-                || !Cesium.defined(labels) || !labels.length
-            ) {
-                continue
-            }
-
-            //layout属性取值时 getDataConstValue 的 zoom 参数取瓦片层级，而不是全局缩放层级
-            const textAllowOverlap = style.layout.getDataConstValue('text-allow-overlap', layer.tile.z)
-            const textOverlap = style.layout.getDataConstValue('text-overlap', layer.tile.z)
-            const textOverlapMode = getOverlapMode(textOverlap, textAllowOverlap)
-
-            for (const label of labels) {
-                const position = label.computeScreenSpacePosition(scene, scratchScreenSpacePosition)
-                if (!position) {//可能未准备就绪，先标记为可以摆放，确保Cesium能生成文字
-                    label.vtPlaceable = true
-                    continue
-                }
-                /**@type {Cesium.BoundingRectangle} */
-                const box = Cesium.Label.getScreenSpaceBoundingBox(label, position, scratchScreenSpaceBoundingBox)
-
-                const tlX = box.x, tlY = box.y,
-                    brX = tlX + box.width, brY = tlY + box.height
-                if (!grid.hitTest(tlX, tlY, brX, brY, textOverlapMode, null)) {//二维包围盒碰撞检测
-                    const textKey = { overlapMode: textOverlapMode, }
-                    grid.insert(textKey, tlX, tlY, brX, brY)
-                    label.vtPlaceable = true
-                }
-                else {
-                    label.vtPlaceable = false
-                }
-            }
-        }
-    }
-}
-
-function getOverlapMode(overlap, allowOverlap) {
-    let result = 'never';
-
-    if (overlap) {
-        // if -overlap is set, use it
-        result = overlap;
-    } else if (allowOverlap) {
-        // fall back to -allow-overlap, with false='never', true='always'
-        result = 'always';
-    }
-
-    return result;
-}
+import { GridIndex } from 'maplibre-gl/src/symbol/grid_index'
+import { IRenderLayer } from '../layers/IRenderLayer'
+
+//参考 maplibre-gl/src/symbol/CollisionIndex.ts
+
+// When a symbol crosses the edge that causes it to be included in
+// collision detection, it will cause changes in the symbols around
+// it. This constant specifies how many pixels to pad the edge of
+// the viewport for collision detection so that the bulk of the changes
+// occur offscreen. Making this constant greater increases label
+// stability, but it's expensive.
+const viewportPadding = 100
+let scratchScreenSpacePosition = null
+let scratchScreenSpaceBoundingBox = null
+
+/**
+ * 基于 maplibre-gl GridIndex 实现符号碰撞检测（自动避让）。文字碰撞检测结果存放在 label 对象的扩展属性 vtPlaceable，该值为true表示文字可以显示到屏幕
+ */
+export class SymbolPlacements {
+  constructor() {
+    scratchScreenSpacePosition = new Cesium.Cartesian2()
+    scratchScreenSpaceBoundingBox = new Cesium.BoundingRectangle()
+  }
+  /**
+   * @param {Cesium.FrameState} frameState
+   * @param {IRenderLayer[]} orderedRenderLayers
+   * @param {number} zoom
+   */
+  update(frameState, orderedRenderLayers, zoom) {
+    const width = frameState.context.drawingBufferWidth / frameState.pixelRatio
+    const height =
+      frameState.context.drawingBufferHeight / frameState.pixelRatio
+    const scene = frameState.camera._scene
+
+    const grid = new GridIndex(
+      width + 2 * viewportPadding,
+      height + 2 * viewportPadding,
+      25
+    )
+
+    for (const layer of orderedRenderLayers) {
+      const style = layer.style
+      /**@type {Cesium.Label[]} */
+      const labels = layer.labels
+      if (
+        layer.type !== 'symbol' ||
+        layer.visibility === 'none' ||
+        zoom < style.minzoom ||
+        zoom >= style.maxzoom ||
+        !Cesium.defined(labels) ||
+        !labels.length
+      ) {
+        continue
+      }
+
+      //layout属性取值时 getDataConstValue 的 zoom 参数取瓦片层级，而不是全局缩放层级
+      const textAllowOverlap = style.layout.getDataConstValue(
+        'text-allow-overlap',
+        layer.tile.z
+      )
+      const textOverlap = style.layout.getDataConstValue(
+        'text-overlap',
+        layer.tile.z
+      )
+      const textOverlapMode = getOverlapMode(textOverlap, textAllowOverlap)
+      const textPadding = style.layout.getDataConstValue(
+        'text-padding',
+        layer.tile.z
+      )
+
+      for (const label of labels) {
+        const position = label.computeScreenSpacePosition(
+          scene,
+          scratchScreenSpacePosition
+        )
+        if (!position) {
+          //可能未准备就绪，先标记为可以摆放，确保Cesium能生成文字
+          label.vtPlaceable = true
+          continue
+        }
+        /**@type {Cesium.BoundingRectangle} */
+        const box = Cesium.Label.getScreenSpaceBoundingBox(
+          label,
+          position,
+          scratchScreenSpaceBoundingBox
+        )
+
+        const tlX = box.x - textPadding,
+          tlY = box.y - textPadding,
+          brX = tlX + box.width + textPadding,
+          brY = tlY + box.height + textPadding
+        if (!grid.hitTest(tlX, tlY, brX, brY, textOverlapMode, null)) {
+          //二维包围盒碰撞检测
+          const textKey = { overlapMode: textOverlapMode }
+          grid.insert(textKey, tlX, tlY, brX, brY)
+          label.vtPlaceable = true
+        } else {
+          label.vtPlaceable = false
+        }
+      }
+    }
+  }
+}
+
+function getOverlapMode(overlap, allowOverlap) {
+  let result = 'never'
+
+  if (overlap) {
+    // if -overlap is set, use it
+    result = overlap
+  } else if (allowOverlap) {
+    // fall back to -allow-overlap, with false='never', true='always'
+    result = 'always'
+  }
+
+  return result
+}

package/Source/workers/VectorTileWorker.js

@@ -0,0 +1,41 @@
+/**
+ * Vector tile Web Worker: 解析、过滤、坐标转换、几何数据构建。
+ * 遵循 Cesium TaskProcessor 协议：收到 { id, parameters }，回复 { id, result }, transferList。
+ */
+import { processTileTask } from './processTileTask.js'
+
+self.onmessage = function (e) {
+  const { id, parameters } = e.data
+  const transferList = []
+
+  try {
+    const result = processTileTask(parameters)
+    collectTransferables(result, transferList)
+    self.postMessage({ id, result }, transferList)
+  } catch (err) {
+    self.postMessage({ id, result: { error: String(err.message || err) } }, [])
+  }
+}
+
+/**
+ * 从 result 中收集可 transfer 的 ArrayBuffer，用于 postMessage 的 transferList
+ * @param {object} result - { fill: [{ batches: [...] }], line: [{ batches: [...] }], symbol: [...] }
+ * @param {ArrayBuffer[]} transferList
+ */
+function collectTransferables(result, transferList) {
+  if (!result) return
+  for (const key of ['fill', 'line']) {
+    const arr = result[key]
+    if (!Array.isArray(arr)) continue
+    for (const layer of arr) {
+      const batches = layer.batches
+      if (!Array.isArray(batches)) continue
+      for (const batch of batches) {
+        if (batch.positions?.buffer) transferList.push(batch.positions.buffer)
+        if (batch.normals?.buffer) transferList.push(batch.normals.buffer)
+        if (batch.st?.buffer) transferList.push(batch.st.buffer)
+        if (batch.indices?.buffer) transferList.push(batch.indices.buffer)
+      }
+    }
+  }
+}

package/Source/workers/ellipsoid.js

@@ -0,0 +1,47 @@
+/**
+ * WGS84 椭球经纬度 → 世界坐标（不依赖 Cesium），供 Worker 内几何构建使用。
+ */
+const A = 6378137
+const E2 = 6.694379990141316e-2 // 2*f - f*f, f = 1/298.257223563
+
+/**
+ * 经纬度(度) + 高度 → 笛卡尔坐标 [x, y, z]
+ * @param {number} lonDeg - 经度（度）
+ * @param {number} latDeg - 纬度（度）
+ * @param {number} height - 高度（米）
+ * @param {Float64Array} [out] - 可选，长度至少 3
+ * @returns {Float64Array}
+ */
+export function fromDegrees(lonDeg, latDeg, height, out) {
+  const lon = (lonDeg * Math.PI) / 180
+  const lat = (latDeg * Math.PI) / 180
+  const sinLat = Math.sin(lat)
+  const cosLat = Math.cos(lat)
+  const n = A / Math.sqrt(1 - E2 * sinLat * sinLat)
+  const x = (n + height) * cosLat * Math.cos(lon)
+  const y = (n + height) * cosLat * Math.sin(lon)
+  const z = (n * (1 - E2) + height) * sinLat
+  const result = out || new Float64Array(3)
+  result[0] = x
+  result[1] = y
+  result[2] = z
+  return result
+}
+
+/**
+ * 向量归一化，写回原数组
+ * @param {Float64Array} v - 长度至少 3
+ * @returns {Float64Array}
+ */
+export function normalize(v) {
+  const x = v[0]
+  const y = v[1]
+  const z = v[2]
+  const len = Math.sqrt(x * x + y * y + z * z)
+  if (len > 0) {
+    v[0] = x / len
+    v[1] = y / len
+    v[2] = z / len
+  }
+  return v
+}

package/Source/workers/processTileTask.js

@@ -0,0 +1,329 @@
+/**
+ * Worker 内瓦片任务：解析 PBF/MLT、按样式过滤要素、构建几何数据。
+ * 不依赖 Cesium/WebGL，仅使用 @mapbox/vector-tile、maplibre 纯 JS。
+ */
+import {
+  VectorTile,
+  VectorTileFeature,
+  classifyRings
+} from '@mapbox/vector-tile'
+import Pbf from 'pbf'
+import { MLTVectorTile } from 'maplibre-gl/src/source/vector_tile_mlt'
+import { featureFilter } from '@maplibre/maplibre-gl-style-spec'
+import { EXTENT } from 'maplibre-gl/src/data/extent'
+import { loadGeometry } from 'maplibre-gl/src/data/load_geometry'
+import { subdividePolygon } from 'maplibre-gl/src/render/subdivision'
+import { subdivideVertexLine } from 'maplibre-gl/src/render/subdivision'
+import { granularitySettings } from '../sources/granularitySettings.js'
+import { fromDegrees, normalize } from './ellipsoid.js'
+import {
+  evaluateFillPaint,
+  evaluateLinePaint,
+  evaluateSymbolLayout,
+  evaluateSymbolPaint,
+  colorToBytes
+} from './styleEvaluator.js'
+
+/**
+ * 解析瓦片 buffer 为 VectorTile 或 MLTVectorTile
+ * @param {ArrayBuffer} buffer
+ * @param {string} encoding - 'mvt' | 'mlt'
+ * @returns {import('@mapbox/vector-tile').VectorTile|import('maplibre-gl/src/source/vector_tile_mlt').MLTVectorTile}
+ */
+function parseTile(buffer, encoding) {
+  if (encoding === 'mlt') {
+    return new MLTVectorTile(buffer)
+  }
+  return new VectorTile(new Pbf(buffer))
+}
+
+/**
+ * 处理单瓦片任务：解析 + 过滤；后续步骤在此扩展几何构建。
+ * @param {object} parameters
+ * @param {Record<string,{buffer:ArrayBuffer,encoding:string}>} parameters.sources
+ * @param {number} parameters.x
+ * @param {number} parameters.y
+ * @param {number} parameters.z
+ * @param {number} [parameters.extent]
+ * @param {Array<{id:string,type:string,source:string,sourceLayer?:string,filter?:object,paint?:object,layout?:object}>} parameters.styleLayers
+ * @returns {{ fill: Array, line: Array, symbol: Array, parsedSources?: object }}
+ */
+export function processTileTask(parameters) {
+  const {
+    sources = {},
+    x,
+    y,
+    z,
+    extent = EXTENT,
+    styleLayers = []
+  } = parameters
+
+  const parsedSources = {}
+  for (const sourceId in sources) {
+    const { buffer, encoding } = sources[sourceId]
+    if (buffer) {
+      parsedSources[sourceId] = parseTile(buffer, encoding || 'mvt')
+    }
+  }
+
+  const result = { fill: [], line: [], symbol: [] }
+
+  for (const layerSpec of styleLayers) {
+    if (layerSpec.type === 'background') continue
+    const vt = parsedSources[layerSpec.source]
+    if (!vt) continue
+    const layerName = layerSpec.sourceLayer ?? layerSpec['source-layer']
+    const vectorLayer = vt.layers[layerName]
+    if (!vectorLayer) continue
+
+    const filter = layerSpec.filter ? featureFilter(layerSpec.filter) : null
+    const features = []
+    const featureCount = vectorLayer.length
+    for (let i = 0; i < featureCount; i++) {
+      const feature = vectorLayer.feature(i)
+      if (filter && !filter.filter({ zoom: z }, feature)) continue
+      features.push({ index: i, feature, layerSpec })
+    }
+
+    const type = layerSpec.type
+    if (type === 'fill' || type === 'line' || type === 'symbol') {
+      result[type].push({
+        layerId: layerSpec.id,
+        source: layerSpec.source,
+        sourceLayer: layerName,
+        styleLayer: layerSpec,
+        extent,
+        x,
+        y,
+        z,
+        features
+      })
+    }
+  }
+
+  // 几何构建在 Worker 内完成，只把可序列化数据 + transferable buffers 传回主线程；
+  // 此处先做解析+过滤，几何构建在 buildGeometryInWorker 中扩展
+  return buildGeometryResult(result, extent, x, y, z)
+}
+
+/**
+ * 瓦片坐标 → 经纬度（度），与 VectorTileLOD.transformPoint 一致
+ */
+function transformPoint(x, y, size, x0, y0, out) {
+  out[0] = ((x + x0) * 360) / size - 180
+  out[1] =
+    (360 / Math.PI) *
+      Math.atan(Math.exp((1 - ((y + y0) * 2) / size) * Math.PI)) -
+    90
+  return out
+}
+
+/**
+ * 根据解析+过滤结果构建几何数据（positions/normals/indices 等），仅返回可 transfer 的数据
+ */
+function buildGeometryResult(layerResult, extent, x, y, z) {
+  const out = { fill: [], line: [], symbol: [] }
+  const size = extent * Math.pow(2, z)
+  const x0 = extent * x
+  const y0 = extent * y
+  const canonical = { x, y, z }
+
+  for (const item of layerResult.fill || []) {
+    const batches = buildFillBatches(item, extent, size, x0, y0, canonical)
+    out.fill.push({
+      layerId: item.layerId,
+      source: item.source,
+      sourceLayer: item.sourceLayer,
+      styleLayer: item.styleLayer,
+      batches,
+      firstBatchId: 0,
+      lastBatchId: batches.length - 1
+    })
+  }
+
+  for (const item of layerResult.line || []) {
+    const batches = buildLineBatches(item, extent, size, x0, y0)
+    out.line.push({
+      layerId: item.layerId,
+      source: item.source,
+      sourceLayer: item.sourceLayer,
+      styleLayer: item.styleLayer,
+      batches,
+      firstBatchId: 0,
+      lastBatchId: batches.length - 1
+    })
+  }
+
+  for (const item of layerResult.symbol || []) {
+    const placements = buildSymbolPlacements(item, extent, size, x0, y0)
+    out.symbol.push({
+      layerId: item.layerId,
+      source: item.source,
+      sourceLayer: item.sourceLayer,
+      styleLayer: item.styleLayer,
+      placements,
+      firstBatchId: 0,
+      lastBatchId: 0
+    })
+  }
+
+  return out
+}
+
+/**
+ * Symbol 图层：输出每个符号的 placement（coord, text, style 等），主线程用其创建 Cesium.Label
+ */
+function buildSymbolPlacements(item, extent, size, x0, y0) {
+  const { features, styleLayer, z } = item
+  const coordDeg = [0, 0]
+  const placements = []
+
+  for (const { feature } of features) {
+    const type = VectorTileFeature.types[feature.type]
+    if (type !== 'Point' && type !== 'Unknown') continue
+    const vtCoords = loadGeometry(feature)
+    if (!vtCoords.length || !vtCoords[0].length) continue
+    const layout = evaluateSymbolLayout(styleLayer, z, feature)
+    if (!layout.text) continue
+    const paint = evaluateSymbolPaint(styleLayer, z, feature)
+    const textColorBytes = colorToBytes(paint.textColor)
+    const outlineColorBytes = colorToBytes(paint.outlineColor)
+    const firstRing = vtCoords[0]
+    for (let pi = 0; pi < firstRing.length; pi++) {
+      const p = firstRing[pi]
+      transformPoint(p.x, p.y, size, x0, y0, coordDeg)
+      placements.push({
+        coord: [coordDeg[0], coordDeg[1]],
+        text: layout.text,
+        font: layout.font,
+        textSize: layout.textSize,
+        textColorBytes: Array.from(textColorBytes),
+        outlineWidth: paint.outlineWidth,
+        outlineColorBytes: Array.from(outlineColorBytes),
+        textOffset: layout.textOffset,
+        textAnchor: layout.textAnchor,
+        id: feature.id ?? feature.properties?.id ?? null,
+        properties: feature.properties || {}
+      })
+    }
+  }
+  return placements
+}
+
+/**
+ * Fill 图层几何：每个 polygon 一个 batch（positions, normals, st, indices, colorBytes）
+ */
+function buildFillBatches(item, extent, size, x0, y0, canonical) {
+  const { features, styleLayer, z } = item
+  const granularity =
+    granularitySettings.globe.line.getGranularityForZoomLevel(z) / 2
+  const coordDeg = [0, 0]
+  const posScratch = new Float64Array(3)
+  const batches = []
+  let batchId = 0
+
+  for (const { feature } of features) {
+    if (VectorTileFeature.types[feature.type] !== 'Polygon') continue
+    const paint = evaluateFillPaint(styleLayer, z, feature)
+    const fillColor = paint.fillColor
+    const fillOpacity = paint.fillOpacity
+    const colorBytes = colorToBytes(fillColor, fillOpacity)
+
+    const vtCoords = loadGeometry(feature)
+    const polygons = classifyRings(vtCoords)
+    for (const coordinates of polygons) {
+      if (coordinates.some(ring => ring.length < 3)) continue
+      const subdivisionRes = subdividePolygon(
+        coordinates,
+        canonical,
+        granularity,
+        false
+      )
+      const verticesFlattened = subdivisionRes.verticesFlattened
+      const vertCount = verticesFlattened.length / 2
+      const positions = new Float64Array(vertCount * 3)
+      const normals = new Float32Array(vertCount * 3)
+      const st = new Float32Array(vertCount * 2)
+
+      for (let i = 0, j = 0; i < verticesFlattened.length; i += 2, j++) {
+        const vx = verticesFlattened[i]
+        const vy = verticesFlattened[i + 1]
+        transformPoint(vx, vy, size, x0, y0, coordDeg)
+        fromDegrees(coordDeg[0], coordDeg[1], 0, posScratch)
+        positions[j * 3] = posScratch[0]
+        positions[j * 3 + 1] = posScratch[1]
+        positions[j * 3 + 2] = posScratch[2]
+        normalize(posScratch)
+        normals[j * 3] = posScratch[0]
+        normals[j * 3 + 1] = posScratch[1]
+        normals[j * 3 + 2] = posScratch[2]
+        st[j * 2] = vx / extent
+        st[j * 2 + 1] = vy / extent
+      }
+
+      const indices = new (
+        vertCount > 65535
+          ? Uint32Array
+          : vertCount > 255
+            ? Uint16Array
+            : Uint8Array
+      )(subdivisionRes.indicesTriangles)
+
+      batches.push({
+        batchId: batchId++,
+        positions,
+        normals,
+        st,
+        indices,
+        colorBytes,
+        id: feature.id ?? feature.properties?.id ?? null,
+        properties: feature.properties || {}
+      })
+    }
+  }
+  return batches
+}
+
+/**
+ * Line 图层几何：每条线一个 batch（positions, colorBytes, lineWidth）
+ */
+function buildLineBatches(item, extent, size, x0, y0) {
+  const { features, styleLayer, z } = item
+  const granularity =
+    granularitySettings.globe.line.getGranularityForZoomLevel(z)
+  const coordDeg = [0, 0]
+  const posScratch = new Float64Array(3)
+  const batches = []
+  let batchId = 0
+
+  for (const { feature } of features) {
+    const featureType = VectorTileFeature.types[feature.type]
+    if (featureType === 'Point' || featureType === 'Unknown') continue
+    const paint = evaluateLinePaint(styleLayer, z, feature)
+    const colorBytes = colorToBytes(paint.lineColor, paint.lineOpacity)
+
+    const vtCoords = loadGeometry(feature)
+    for (let ri = 0; ri < vtCoords.length; ri++) {
+      const ring = subdivideVertexLine(vtCoords[ri], granularity, false)
+      if (ring.length < 2) continue
+      const positions = new Float64Array(ring.length * 3)
+      for (let i = 0; i < ring.length; i++) {
+        const p = ring[i]
+        transformPoint(p.x, p.y, size, x0, y0, coordDeg)
+        fromDegrees(coordDeg[0], coordDeg[1], 0, posScratch)
+        positions[i * 3] = posScratch[0]
+        positions[i * 3 + 1] = posScratch[1]
+        positions[i * 3 + 2] = posScratch[2]
+      }
+      batches.push({
+        batchId: batchId++,
+        positions,
+        colorBytes,
+        lineWidth: paint.lineWidth,
+        id: feature.id ?? feature.properties?.id ?? null,
+        properties: feature.properties || {}
+      })
+    }
+  }
+  return batches
+}