@mesh3d/cesium-vectortile-gl 0.4.6 → 0.5.2

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
   }
 
   /**
@@ -30,6 +57,7 @@ export class StyleLayer {
    * @returns
    */
   convertColor(styleColor, result) {
+    if (!styleColor) return
     const alphaScalar = styleColor.a > 0 ? 1 / styleColor.a : 1
     if (!result) {
       result = new Cesium.Color()

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/logo.svg

@@ -1,47 +1,47 @@
-<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
-    <!-- 背景透明 -->
-    <rect width="400" height="400" fill="transparent"/>
-  
-    <!-- 地球：经纬线 + 瓦片网格 -->
-    <g stroke="#2196F3" stroke-width="1.5" fill="none" opacity="0.8">
-      <!-- 外圆（赤道） -->
-      <circle cx="200" cy="200" r="70" />
-      
-      <!-- 经线（3条） -->
-      <path d="M200,130 A70,70 0 0,1 200,270" />
-      <path d="M200,130 A70,70 0 0,0 200,270" />
-      <line x1="130" y1="200" x2="270" y2="200" />
-  
-      <!-- 瓦片网格（示意 MVT 分块） -->
-      <rect x="165" y="165" width="35" height="35" stroke-dasharray="2,2" opacity="0.6"/>
-      <rect x="200" y="165" width="35" height="35" stroke-dasharray="2,2" opacity="0.6"/>
-      <rect x="165" y="200" width="35" height="35" stroke-dasharray="2,2" opacity="0.6"/>
-    </g>
-  
-    <!-- Mapbox 风格水滴（POI） -->
-    <path d="M200,165 
-             C205,160 210,165 210,170 
-             C210,190 200,200 200,200 
-             C200,200 190,190 190,170 
-             C190,165 195,160 200,165 Z"
-          fill="#2196F3" opacity="0.95"/>
-  
-    <!-- 矢量数据流（从水滴延伸出的 MVT 折线） -->
-    <path d="M200,200 
-             L210,210 
-             L230,205 
-             L250,220 
-             L270,210"
-          fill="none"
-          stroke="#2196F3"
-          stroke-width="2.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"/>
-  
-    <!-- 项目名称 -->
-    <text x="200" y="330" text-anchor="middle"
-          font-family="ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace"
-          font-size="24" fill="#2196F3" font-weight="600">
-      CVT-GL
-    </text>
+<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
+    <!-- 背景透明 -->
+    <rect width="400" height="400" fill="transparent"/>
+  
+    <!-- 地球：经纬线 + 瓦片网格 -->
+    <g stroke="#2196F3" stroke-width="1.5" fill="none" opacity="0.8">
+      <!-- 外圆（赤道） -->
+      <circle cx="200" cy="200" r="70" />
+      
+      <!-- 经线（3条） -->
+      <path d="M200,130 A70,70 0 0,1 200,270" />
+      <path d="M200,130 A70,70 0 0,0 200,270" />
+      <line x1="130" y1="200" x2="270" y2="200" />
+  
+      <!-- 瓦片网格（示意 MVT 分块） -->
+      <rect x="165" y="165" width="35" height="35" stroke-dasharray="2,2" opacity="0.6"/>
+      <rect x="200" y="165" width="35" height="35" stroke-dasharray="2,2" opacity="0.6"/>
+      <rect x="165" y="200" width="35" height="35" stroke-dasharray="2,2" opacity="0.6"/>
+    </g>
+  
+    <!-- Mapbox 风格水滴（POI） -->
+    <path d="M200,165 
+             C205,160 210,165 210,170 
+             C210,190 200,200 200,200 
+             C200,200 190,190 190,170 
+             C190,165 195,160 200,165 Z"
+          fill="#2196F3" opacity="0.95"/>
+  
+    <!-- 矢量数据流（从水滴延伸出的 MVT 折线） -->
+    <path d="M200,200 
+             L210,210 
+             L230,205 
+             L250,220 
+             L270,210"
+          fill="none"
+          stroke="#2196F3"
+          stroke-width="2.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"/>
+  
+    <!-- 项目名称 -->
+    <text x="200" y="330" text-anchor="middle"
+          font-family="ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace"
+          font-size="24" fill="#2196F3" font-weight="600">
+      CVT-GL
+    </text>
   </svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mesh3d/cesium-vectortile-gl",
-  "version": "0.4.6",
+  "version": "0.5.2",
   "description": "CesiumJS 矢量瓦片渲染库",
   "main": "dist/cvt-gl.js",
   "module": "index.js",
@@ -19,16 +19,9 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "lint-staged": {
-    "*.js": [
-      "eslint --fix",
-      "prettier --write"
-    ],
-    "*.{json,jsonc,geojson,md,html,css,less,yml,yaml}": [
-      "prettier --write"
-    ],
-    "*.{mjs,cjs}": [
-      "prettier --write"
-    ]
+    "*.js": ["eslint --fix", "prettier --write"],
+    "*.{json,jsonc,geojson,md,html,css,less,yml,yaml}": ["prettier --write"],
+    "*.{mjs,cjs}": ["prettier --write"]
   },
   "repository": {
     "type": "git",
@@ -58,7 +51,5 @@
     "maplibre-gl": "^5.15.0",
     "pbf": "^4.0.1"
   },
-  "maintainers": [
-    "weixiuyong"
-  ]
-}
+  "maintainers": ["weixiuyong"]
+}

package/style-edit.html

@@ -0,0 +1,26 @@
+<html lang="zh-cn">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>样式修改示例 — CesiumJS 开源矢量瓦片渲染库</title>
+    <link rel="shortcut icon" href="./logo.svg" type="image/svg" />
+    <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 {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <script type="module" src="./examples/style-edit.js"></script>
+  </body>
+</html>