@mesh3d/cesium-vectortile-gl 0.4.6 → 0.5.1

package/README.md

@@ -13,6 +13,7 @@
 - ✅ **GPU 精准剔除**：利用 FBO + RTT 技术生成瓦片 ID 纹理，在 GPU 中高效剔除不可见矢量片段
 - ✅ **高度可扩展**：提供清晰接口，轻松接入新数据源（如 TopoJSON）或自定义图层类型（如热力图、流线）
 - ✅ **文字符号自动避让**：使用 `maplibre-gl` `GridIndex`类，结合 Cesium.Label 屏幕空间位置和包围盒计算API，实现符号碰撞检测（自动避让）
+- ✅ **样式动态修改**：提供`setLayoutProperty`、`setPaintProperty`、`setFilter`等`样式修改API`，可动态控制图层`显隐`、`颜色`、`透明度`
 
 #### 🧠 技术栈亮点
 
@@ -83,6 +84,34 @@ const tileset = new VectorTileset({
 viewer.scene.primitives.add(tileset)
 ```
 
+### 样式修改示例
+
+```js
+tileset.readyEvent.addEventListener(() => {
+  // 1、修改绘制属性（颜色、透明度），不会触发强制刷新，实时变化
+  tileset.setPaintProperty('background', 'background-color', 'skyblue')
+  tileset.setPaintProperty('geolines', 'line-color', 'green')
+  tileset.setPaintProperty('us_states:fill', 'fill-color', 'red')
+  tileset.setPaintProperty('countries-label', 'text-color', 'blue')
+
+  // 2、修改布局属性，除 visibility 外，都会触发强制刷新
+  // 2.1、布局属性修改：图层显隐，不会触发强制刷新
+  tileset.setLayoutProperty('coastline', 'visibility', 'none')
+  // 2.2、布局属性修改（非visibility）：字体大小修改，会触发强制刷新
+  tileset.setLayoutProperty('countries-label', 'text-size', {
+    stops: [
+      [2, 12],
+      [4, 16],
+      [6, 20]
+    ]
+  })
+
+  // 3、修改过滤器。
+  //和setLayoutProperty一样（visibility例外）会触发强制刷新
+  tileset.setFilter('geolines', null)
+})
+```
+
 ### 可选：Web Worker 多线程瓦片处理
 
 将瓦片解析、坐标转换、几何构建放到子线程，减轻主线程卡顿。不传 `workerUrl` 时仍走主线程。

package/Source/VectorTileset.js

@@ -33,6 +33,7 @@ export class VectorTileset {
     this._tilesToRender = []
     /**@type {StyleLayer[]} */
     this._styleLayers = []
+    this._styleLayerIndexMap = new Map()
     /**@type {VectorTileRenderList} */
     this._renderList = new VectorTileRenderList(this._styleLayers)
     this.numLoading = 0
@@ -95,6 +96,7 @@ export class VectorTileset {
     //初始化样式图层
     for (let i = 0; i < style.layers.length; i++) {
       this._styleLayers[i] = new StyleLayer(style.layers[i])
+      this._styleLayerIndexMap.set(style.layers[i].id, i)
     }
 
     //创建顶级瓦片LOD
@@ -257,6 +259,65 @@ export class VectorTileset {
     }
   }
 
+  //样式编辑API
+
+  setLayoutProperty(layerId, name, value) {
+    const styleLayerIndexMap = this._styleLayerIndexMap
+    if (!styleLayerIndexMap.has(layerId)) {
+      warnOnce(`不存在图层：${layerId}`)
+      return false
+    }
+    const layerIndex = styleLayerIndexMap.get(layerId)
+    const styleLayer = this._styleLayers[layerIndex]
+    const changed = styleLayer.setLayoutProperty(name, value)
+    //强制更新
+    if (changed && name !== 'visibility') {
+      this._forceUpdate()
+    }
+    return changed
+  }
+
+  setPaintProperty(layerId, name, value) {
+    const styleLayerIndexMap = this._styleLayerIndexMap
+    if (!styleLayerIndexMap.has(layerId)) {
+      warnOnce(`不存在图层：${layerId}`)
+      return false
+    }
+    const layerIndex = styleLayerIndexMap.get(layerId)
+    const styleLayer = this._styleLayers[layerIndex]
+    return styleLayer.setPaintProperty(name, value)
+  }
+
+  setFilter(layerId, filter) {
+    const styleLayerIndexMap = this._styleLayerIndexMap
+    if (!styleLayerIndexMap.has(layerId)) {
+      warnOnce(`不存在图层：${layerId}`)
+      return false
+    }
+    const layerIndex = styleLayerIndexMap.get(layerId)
+    const styleLayer = this._styleLayers[layerIndex]
+    const changed = styleLayer.setFilter(filter)
+    if (changed) {
+      this._forceUpdate()
+    }
+    return changed
+  }
+
+  //强制更新
+  _forceUpdate() {
+    for (const cacheTile of this._cacheTiles) {
+      cacheTile.unload()
+    }
+    for (const cacheTile of this._tilesToRender) {
+      cacheTile.unload()
+    }
+    for (const cacheTile of this._tilesToUpdate) {
+      cacheTile.unload()
+    }
+    this._tilesToRender.length = 0
+    this._tilesToUpdate.length = 0
+  }
+
   destroy() {
     const scene = this.scene
     const rootTiles = this._rootTiles

package/Source/layers/BackgroundRenderLayer.js

@@ -80,6 +80,21 @@ export class BackgroundRenderLayer extends IRenderLayer {
 
       frameState.commandList = preCommandList
     }
+    if (this.primitive && this.paintNeedsUpdate) {
+      const style = this.style,
+        tile = this.tile
+      const color = style.convertColor(
+        style.paint.getDataConstValue('background-color', tile.z)
+      )
+      const opacity = style.paint.getDataConstValue(
+        'background-opacity',
+        tile.z
+      )
+      color.alpha *= opacity
+      this.primitive.appearance.material.uniforms.color = color
+
+      this.paintNeedsUpdate = false
+    }
   }
 
   destroy() {

package/Source/layers/FillRenderLayer.js

@@ -10,7 +10,36 @@ export class FillRenderLayer extends IRenderLayer {
    */
   update(frameState, tileset) {
     //可以在这里实现同步样式，动态更新图层颜色等样式
+    if (this.paintNeedsUpdate) {
+      const style = this.style,
+        tile = this.tile,
+        batchTable = this._batchTable
 
+      for (const feature of this.features) {
+        const fillColor = style.convertColor(
+          style.paint.getDataValue('fill-color', tile.z, feature)
+        )
+        const fillOpacity = style.paint.getDataValue(
+          'fill-opacity',
+          tile.z,
+          feature
+        )
+        feature.fillColor = fillColor
+        feature.fillOpacity = fillOpacity
+
+        const batchId = feature.batchId
+        const colorBytes = fillColor.toBytes()
+        colorBytes[3] = Math.floor(colorBytes[3] * fillOpacity)
+        batchTable.setBatchedAttribute(batchId, 0, {
+          x: colorBytes[0],
+          y: colorBytes[1],
+          z: colorBytes[2],
+          w: colorBytes[3]
+        })
+      }
+
+      this.paintNeedsUpdate = false
+    }
     super.update(frameState, tileset)
   }
 }

package/Source/layers/IRenderLayer.js

@@ -82,6 +82,10 @@ export class IRenderLayer {
      * @type {'none'|'done'|'error'}
      */
     this.state = 'none'
+    /**
+     * 绘制（paint）属性版本号，用于监听绘制属性变化
+     */
+    this.paintVersion = styleLayer.paintVersion
   }
 
   get id() {
@@ -92,6 +96,15 @@ export class IRenderLayer {
     return this.style.type
   }
 
+  get paintNeedsUpdate() {
+    return this.paintVersion !== this.style.paintVersion
+  }
+  set paintNeedsUpdate(val) {
+    if (!val) {
+      this.paintVersion = this.style.paintVersion
+    }
+  }
+
   /**
    * 更渲染图层，可在该方法内实现绘图命令构建、动态样式更新等图层渲染准备相关功能。该方法可以被子类重写或复用
    * @param {Cesium.FrameState} frameState

package/Source/layers/LineRenderLayer.js

@@ -5,6 +5,7 @@ import { IRenderLayer } from './IRenderLayer'
 import { registerRenderLayer } from './registerRenderLayer'
 import { VectorTileLOD } from '../VectorTileLOD'
 import { LineLayerVisualizer } from './visualizers/LineLayerVisualizer'
+import { warnOnce } from 'maplibre-gl/src/util/util'
 
 export class LineRenderLayer extends IRenderLayer {
   /**
@@ -91,7 +92,49 @@ export class LineRenderLayer extends IRenderLayer {
     // }
     // if (this.primitive && this.primitive.length) {
     //     this.primitive.update(frameState)
+    //     this._batchTable = primitive._batchTable
     // }
+    if (this.paintNeedsUpdate) {
+      const style = this.style,
+        tile = this.tile,
+        batchTable = this._batchTable
+
+      for (const feature of this.features) {
+        const lineWidth = style.paint.getDataValue(
+          'line-width',
+          tile.z,
+          feature
+        )
+        const lineColor = style.convertColor(
+          style.paint.getDataValue('line-color', tile.z, feature)
+        )
+        const lineOpacity = style.paint.getDataValue(
+          'line-opacity',
+          tile.z,
+          feature
+        )
+
+        if (lineWidth !== feature.lineWidth) {
+          warnOnce('不支持动态修改 line 图层样式属性：line-width')
+        }
+
+        feature.lineColor = lineColor
+        feature.lineOpacity = lineOpacity
+        feature.lineWidth = lineWidth
+
+        const batchId = feature.batchId
+        const colorBytes = lineColor.toBytes()
+        colorBytes[3] = Math.floor(colorBytes[3] * lineOpacity)
+        batchTable.setBatchedAttribute(batchId, 0, {
+          x: colorBytes[0],
+          y: colorBytes[1],
+          z: colorBytes[2],
+          w: colorBytes[3]
+        })
+      }
+
+      this.paintNeedsUpdate = false
+    }
     super.update(frameState, tileset)
   }
 

package/Source/layers/SymbolRenderLayer.js

@@ -22,6 +22,41 @@ export class SymbolRenderLayer extends IRenderLayer {
    */
   update(frameState, tileset) {
     //TODO：动态更新符号样式
+    if (this.paintNeedsUpdate) {
+      const style = this.style,
+        tile = this.tile
+
+      for (let i = 0; i < this.features.length; i++) {
+        const feature = this.features[i]
+        const label = this.labels[i]
+
+        const textColor = style.convertColor(
+          style.paint.getDataValue('text-color', tile.z, feature)
+        )
+        const outlineColor = style.convertColor(
+          style.paint.getDataValue('text-halo-color', tile.z, feature)
+        )
+        const outlineWidth = style.paint.getDataValue(
+          'text-halo-width',
+          tile.z,
+          feature
+        )
+
+        feature.textColor = textColor
+        feature.outlineColor = outlineColor
+        feature.outlineWidth = outlineWidth
+
+        label.fillColor = textColor
+        label.style = outlineWidth && Cesium.LabelStyle.FILL_AND_OUTLINE
+        label.outlineWidth = outlineWidth * feature.textSize
+        label.outlineColor = outlineColor
+
+        label._baseFillColor = label.fillColor.clone()
+        label._baseOutlineColor = label.outlineColor.clone()
+      }
+
+      this.paintNeedsUpdate = false
+    }
 
     super.update(frameState, tileset)
   }

package/Source/layers/visualizers/FillLayerVisualizer.js

@@ -92,6 +92,7 @@ export class FillLayerVisualizer extends ILayerVisualizer {
         }
 
         scope.addFeature(fillFeature, granularity)
+        layer.features.push(fillFeature)
 
         featureId++
       }
@@ -427,6 +428,9 @@ void main()
    */
   onBatchTableCreated(batchTable) {
     this._batchTable = batchTable
+    for (const layer of this.layers) {
+      layer._batchTable = batchTable
+    }
   }
 
   /**
@@ -511,6 +515,9 @@ void main()
         if (err.stack) console.trace(err.stack)
         else console.error(err)
         return
+      } finally {
+        //恢复系统的 commandList
+        frameState.commandList = preCommandList
       }
 
       //使用合批后的 drawCommand 创建副本，为渲染图层分配 drawCommand
@@ -522,10 +529,12 @@ void main()
         this.setState('error')
       }
 
-      //恢复系统的 commandList
-      frameState.commandList = preCommandList
       this.geometryInstances = []
     }
+
+    if (this._batchTable && this._batchTable._batchValuesDirty) {
+      this._batchTable.update(frameState)
+    }
   }
 
   destroy() {

package/Source/layers/visualizers/LineLayerVisualizer.js

@@ -92,6 +92,7 @@ export class LineLayerVisualizer extends ILayerVisualizer {
       }
 
       scope.addFeature(lineFeature)
+      layer.features.push(lineFeature)
 
       featureId++
     }
@@ -560,6 +561,9 @@ czm_material czm_getMaterial(czm_materialInput materialInput)
    */
   onBatchTableCreated(batchTable) {
     this._batchTable = batchTable
+    for (const layer of this.layers) {
+      layer._batchTable = batchTable
+    }
   }
 
   /**
@@ -667,6 +671,9 @@ czm_material czm_getMaterial(czm_materialInput materialInput)
         if (err.stack) console.trace(err.stack)
         else console.error(err)
         return
+      } finally {
+        //恢复系统的 commandList
+        frameState.commandList = preCommandList
       }
 
       //使用合批后的 drawCommand 创建副本，为渲染图层分配 drawCommand
@@ -678,14 +685,16 @@ czm_material czm_getMaterial(czm_materialInput materialInput)
         this.setState('error')
       }
 
-      //恢复系统的 commandList
-      frameState.commandList = preCommandList
       this.geometryInstances = []
     }
 
     if (this.primitive && frameState.camera.pitch > -1.309) {
       warnOnce('line图层：不支持透视，建议保持相机俯仰角（pitch）小于 -75 度')
     }
+
+    if (this._batchTable && this._batchTable._batchValuesDirty) {
+      this._batchTable.update(frameState)
+    }
   }
 
   destroy() {

package/Source/layers/visualizers/SymbolLayerVisualizer.js

@@ -82,7 +82,8 @@ export class SymbolLayerVisualizer extends ILayerVisualizer {
       outlineWidth,
       outlineColor,
       textOffset,
-      textOrigin
+      textOrigin,
+      properties
     ) {
       if (
         !Cesium.Rectangle.contains(
@@ -116,6 +117,17 @@ export class SymbolLayerVisualizer extends ILayerVisualizer {
       label.batchId = labels.length
       labels.push(label)
       layer.labels.push(label)
+      layer.features.push({
+        text,
+        font,
+        textSize,
+        textColor,
+        outlineWidth,
+        outlineColor,
+        textOffset,
+        textOrigin,
+        properties
+      })
     }
 
     for (const sourceFeature of features) {
@@ -229,7 +241,8 @@ export class SymbolLayerVisualizer extends ILayerVisualizer {
           outlineWidth,
           outlineColor,
           textOffset,
-          textOrigin
+          textOrigin,
+          properties
         )
       } else if (geometryType == 'MultiPoint') {
         coordinates.forEach(coord => {
@@ -242,7 +255,8 @@ export class SymbolLayerVisualizer extends ILayerVisualizer {
             outlineWidth,
             outlineColor,
             textOffset,
-            textOrigin
+            textOrigin,
+            properties
           )
         })
       } else {

package/Source/style/StyleLayer.js

@@ -21,6 +21,33 @@ export class StyleLayer {
     if (layer.filter) {
       this.filter = featureFilter(layer.filter)
     }
+    this.paintVersion = 0
+  }
+
+  setLayoutProperty(name, value) {
+    return this.layout.setProperty(name, value)
+  }
+
+  setPaintProperty(name, value) {
+    const changed = this.paint.setProperty(name, value)
+    if (changed) {
+      this.paintVersion++
+    }
+    return changed
+  }
+
+  setFilter(filter) {
+    if (!filter) {
+      const changed = Cesium.defined(this.filter)
+      this.filter = null
+      delete this.data.filter
+      return changed
+    } else if (JSON.stringify(this.data.filter) !== JSON.stringify(filter)) {
+      this.data.filter = filter
+      this.filter = featureFilter(filter)
+      return true
+    }
+    return false
   }
 
   /**

package/Source/style/StyleLayerProperties.js

@@ -1,10 +1,12 @@
 import { expression, latest } from '@maplibre/maplibre-gl-style-spec'
+import { warnOnce } from 'maplibre-gl/src/util/util'
 
 export class StyleLayerProperties {
   constructor(groupName, styleProperties = {}) {
     this.data = styleProperties
     /**@type {Map<string,import('@maplibre/maplibre-gl-style-spec').StylePropertyExpression>} */
     this.props = new Map()
+    this.groupName = groupName
 
     const groupReference = latest[groupName]
     for (const key in groupReference) {
@@ -20,6 +22,26 @@ export class StyleLayerProperties {
     }
   }
 
+  setProperty(name, value) {
+    const groupReference = latest[this.groupName]
+    if (Object.hasOwnProperty.call(groupReference, name)) {
+      const reference = groupReference[name]
+      const oldValue = this.data[name]
+      if (oldValue === value) {
+        return false
+      }
+      const property = expression.normalizePropertyExpression(
+        !Cesium.defined(value) ? reference.default : value,
+        reference
+      )
+      this.props.set(name, property)
+      return true
+    } else {
+      warnOnce(`maplibre样式规范不支持属性：${this.groupName}.${name}`)
+      return false
+    }
+  }
+
   /**
    * Replace tokens in a string template with values in an object
    *

package/dist/THIRD-PARTY-LICENSES.txt

@@ -704,34 +704,6 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 ---
 
-Name: earcut
-Version: 3.0.2
-License: ISC
-Private: false
-Description: The fastest and smallest JavaScript polygon triangulation library for your WebGL apps
-Repository: git://github.com/mapbox/earcut.git
-Author: Vladimir Agafonkin
-License Copyright:
-===
-
-ISC License
-
-Copyright (c) 2024, Mapbox
-
-Permission to use, copy, modify, and/or distribute this software for any purpose
-with or without fee is hereby granted, provided that the above copyright notice
-and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
-FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
-OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
-TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
-THIS SOFTWARE.
-
----
-
 Name: @mapbox/unitbezier
 Version: 0.0.1
 License: BSD-2-Clause
@@ -769,4 +741,32 @@ OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 Ported from Webkit
-http://svn.webkit.org/repository/webkit/trunk/Source/WebCore/platform/graphics/UnitBezier.h
+http://svn.webkit.org/repository/webkit/trunk/Source/WebCore/platform/graphics/UnitBezier.h
+
+---
+
+Name: earcut
+Version: 3.0.2
+License: ISC
+Private: false
+Description: The fastest and smallest JavaScript polygon triangulation library for your WebGL apps
+Repository: git://github.com/mapbox/earcut.git
+Author: Vladimir Agafonkin
+License Copyright:
+===
+
+ISC License
+
+Copyright (c) 2024, Mapbox
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.