@mesh3d/cesium-vectortile-gl 0.4.4 → 0.4.6

package/Source/workers/styleEvaluator.js

@@ -0,0 +1,168 @@
+/**
+ * Worker 内样式求值：paint 表达式求值、颜色转 [r,g,b,a] 字节。
+ * 不依赖 Cesium，仅使用 @maplibre/maplibre-gl-style-spec。
+ */
+import { expression, latest } from '@maplibre/maplibre-gl-style-spec'
+
+const paintFillRef = latest.paint_fill
+const paintLineRef = latest.paint_line
+const layoutSymbolRef = latest.layout_symbol
+const paintSymbolRef = latest.paint_symbol
+
+/**
+ * 构建图层 paint 的表达式 Map（仅包含需要的 key）
+ * @param {object} paint - 原始 paint 对象
+ * @param {object} groupRef - latest.paint_fill 或 paint_line
+ * @returns {Map<string, object>}
+ */
+function buildPaintProps(paint, groupRef) {
+  const props = new Map()
+  if (!paint || !groupRef) return props
+  for (const key of Object.keys(groupRef)) {
+    const reference = groupRef[key]
+    const value = paint[key]
+    const property = expression.normalizePropertyExpression(
+      value === undefined ? reference.default : value,
+      reference
+    )
+    props.set(key, property)
+  }
+  return props
+}
+
+/**
+ * 求值 paint 属性
+ * @param {Map<string, object>} props
+ * @param {string} name
+ * @param {number} zoom
+ * @param {object} feature
+ * @returns {*}
+ */
+function getDataValue(props, name, zoom, feature) {
+  const expr = props.get(name)
+  return expr ? expr.evaluate({ zoom }, feature) : undefined
+}
+
+/**
+ * Fill 图层 paint 求值（fill-color, fill-opacity）
+ * @param {object} styleLayer - 可序列化的 styleLayer（含 paint）
+ * @param {number} zoom
+ * @param {object} feature
+ * @returns {{ fillColor: { r, g, b, a }, fillOpacity: number }}
+ */
+export function evaluateFillPaint(styleLayer, zoom, feature) {
+  const props = buildPaintProps(styleLayer.paint, paintFillRef)
+  const fillColor = getDataValue(props, 'fill-color', zoom, feature)
+  const fillOpacity = getDataValue(props, 'fill-opacity', zoom, feature) ?? 1
+  return {
+    fillColor: fillColor || { r: 0, g: 0, b: 0, a: 1 },
+    fillOpacity
+  }
+}
+
+/**
+ * Line 图层 paint 求值（line-width, line-color, line-opacity）
+ * @param {object} styleLayer
+ * @param {number} zoom
+ * @param {object} feature
+ * @returns {{ lineWidth: number, lineColor: object, lineOpacity: number }}
+ */
+export function evaluateLinePaint(styleLayer, zoom, feature) {
+  const props = buildPaintProps(styleLayer.paint, paintLineRef)
+  const lineWidth = getDataValue(props, 'line-width', zoom, feature) ?? 1
+  const lineColor = getDataValue(props, 'line-color', zoom, feature) || {
+    r: 0,
+    g: 0,
+    b: 0,
+    a: 1
+  }
+  const lineOpacity = getDataValue(props, 'line-opacity', zoom, feature) ?? 1
+  return { lineWidth, lineColor, lineOpacity }
+}
+
+/**
+ * maplibre Color (r,g,b,a 0-1) → Uint8Array [r,g,b,a]，与主线程 StyleLayer.convertColor 一致（premultiply 逆处理）
+ * @param {object} c - { r, g, b, a }
+ * @param {number} [opacity=1] - 额外透明度（如 fillOpacity/lineOpacity）
+ * @returns {Uint8Array}
+ */
+export function colorToBytes(c, opacity = 1) {
+  const a = c.a != null ? c.a : 1
+  const alphaScalar = a > 0 ? 1 / a : 1
+  const out = new Uint8Array(4)
+  out[0] = Math.round((c.r != null ? c.r : 0) * alphaScalar * 255)
+  out[1] = Math.round((c.g != null ? c.g : 0) * alphaScalar * 255)
+  out[2] = Math.round((c.b != null ? c.b : 0) * alphaScalar * 255)
+  out[3] = Math.floor(a * opacity * 255)
+  return out
+}
+
+/**
+ * 构建 layout/paint 的表达式 Map（symbol 用）
+ */
+function buildProps(styleProperties, groupRef) {
+  const props = new Map()
+  if (!styleProperties || !groupRef) return props
+  for (const key of Object.keys(groupRef)) {
+    const reference = groupRef[key]
+    const value = styleProperties[key]
+    const property = expression.normalizePropertyExpression(
+      value === undefined ? reference.default : value,
+      reference
+    )
+    props.set(key, property)
+  }
+  return props
+}
+
+/**
+ * Symbol 图层 layout 求值（text-field, text-font, text-size, text-anchor, text-offset 等）
+ */
+export function evaluateSymbolLayout(styleLayer, zoom, feature) {
+  const layout = styleLayer.layout || {}
+  const props = buildProps(layout, layoutSymbolRef)
+  const get = name => getDataValue(props, name, zoom, feature)
+  const textField = get('text-field')
+  let text = textField
+  if (typeof text === 'string') {
+    text = resolveTokens(feature.properties || {}, text)
+  } else if (text && text.sections) {
+    for (const section of text.sections) {
+      section.text = resolveTokens(feature.properties || {}, section.text)
+    }
+    text = text.toString()
+  }
+  const textTransform = get('text-transform')
+  if (textTransform === 'uppercase') text = String(text).toUpperCase()
+  else if (textTransform === 'lowercase') text = String(text).toLowerCase()
+  return {
+    text: text || '',
+    font: get('text-font') || 'Open Sans Regular, Arial Unicode MS Regular',
+    textSize: get('text-size') ?? 16,
+    textAnchor: get('text-anchor') || 'center',
+    textOffset: get('text-offset') || [0, 0]
+  }
+}
+
+/**
+ * Symbol 图层 paint 求值（text-color, text-halo-color, text-halo-width）
+ */
+export function evaluateSymbolPaint(styleLayer, zoom, feature) {
+  const paint = styleLayer.paint || {}
+  const props = buildProps(paint, paintSymbolRef)
+  const get = name => getDataValue(props, name, zoom, feature)
+  const textColor = get('text-color') || { r: 0, g: 0, b: 0, a: 1 }
+  const haloColor = get('text-halo-color') || { r: 0, g: 0, b: 0, a: 1 }
+  const haloWidth = get('text-halo-width') ?? 0
+  return {
+    textColor,
+    outlineColor: haloColor,
+    outlineWidth: haloWidth
+  }
+}
+
+function resolveTokens(properties, text) {
+  return String(text).replace(/\{([^{}]+)\}/g, (match, key) =>
+    properties && key in properties ? String(properties[key]) : ''
+  )
+}

package/benchmark.html

@@ -0,0 +1,148 @@
+<html lang="zh-cn">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Worker 与主线程性能对比</title>
+    <link
+      rel="stylesheet"
+      href="./node_modules/cesium/Build/Cesium/Widgets/widgets.css"
+    />
+    <script src="./node_modules/cesium/Build/CesiumUnminified/Cesium.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: sans-serif;
+      }
+      #toolbar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        padding: 8px 12px;
+        background: #1a1a2e;
+        color: #eee;
+        z-index: 100;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      #toolbar button {
+        padding: 8px 16px;
+        background: #16213e;
+        border: 1px solid #0f3460;
+        color: #eee;
+        cursor: pointer;
+        border-radius: 4px;
+      }
+      #toolbar button:hover {
+        background: #0f3460;
+      }
+      #bench-row {
+        position: fixed;
+        top: 48px;
+        left: 0;
+        right: 0;
+        bottom: 200px;
+        display: flex;
+        gap: 4px;
+      }
+      .viewer-half {
+        flex: 1;
+        position: relative;
+        min-width: 0;
+      }
+      .viewer-half .label {
+        position: absolute;
+        top: 8px;
+        left: 8px;
+        padding: 4px 8px;
+        background: rgba(0, 0, 0, 0.7);
+        color: #fff;
+        font-size: 12px;
+        z-index: 10;
+        border-radius: 4px;
+      }
+      #viewer-main,
+      #viewer-worker {
+        width: 100%;
+        height: 100%;
+      }
+      #report {
+        position: fixed;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 200px;
+        padding: 12px;
+        overflow: auto;
+        background: #0d1117;
+        color: #c9d1d9;
+        font-size: 13px;
+        white-space: pre-wrap;
+      }
+      #report pre {
+        margin: 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="toolbar">
+      <button type="button" id="run">运行测试</button>
+      <label
+        style="display: flex; align-items: center; gap: 6px; cursor: pointer"
+      >
+        <input type="checkbox" id="swapMode" />
+        <span>调换左右模式</span>
+      </label>
+      <span id="status"
+        >左侧=主线程，右侧=Worker。15 秒内各 100 个 Box（边长
+        50000）加载与路径漫游。</span
+      >
+    </div>
+    <div id="bench-row">
+      <div class="viewer-half">
+        <span class="label" id="label-left">主线程</span>
+        <div id="viewer-main"></div>
+      </div>
+      <div class="viewer-half">
+        <span class="label" id="label-right">Worker</span>
+        <div id="viewer-worker"></div>
+      </div>
+    </div>
+    <div id="report" role="log">
+      运行后此处显示左侧主线程与右侧 Worker 的帧时间（分开）及对比结果。
+    </div>
+    <script type="module">
+      import { runBenchmark } from './examples/benchmark.js'
+      const runBtn = document.getElementById('run')
+      const swapCheckbox = document.getElementById('swapMode')
+      const labelLeft = document.getElementById('label-left')
+      const labelRight = document.getElementById('label-right')
+      const status = document.getElementById('status')
+      const reportEl = document.getElementById('report')
+
+      function updateLabels() {
+        const swap = swapCheckbox.checked
+        labelLeft.textContent = swap ? 'Worker' : '主线程'
+        labelRight.textContent = swap ? '主线程' : 'Worker'
+      }
+      swapCheckbox.addEventListener('change', updateLabels)
+      updateLabels()
+
+      runBtn.addEventListener('click', async () => {
+        runBtn.disabled = true
+        const swap = swapCheckbox.checked
+        status.textContent = swap
+          ? '运行中：先左侧 Worker 15 秒，再右侧主线程 15 秒，结果分开并对比…'
+          : '运行中：先左侧主线程 15 秒，再右侧 Worker 15 秒，结果分开并对比…'
+        reportEl.textContent = ''
+        await runBenchmark(swap)
+        status.textContent = '测试完成。'
+        runBtn.disabled = false
+      })
+    </script>
+  </body>
+</html>