@mesh3d/cesium-vectortile-gl 0.1.0

package/Source/layers/registerRenderLayer.js

@@ -0,0 +1,24 @@
+import { ILayerVisualizer } from "./visualizers/ILayerVisualizer"
+import { IRenderLayer } from "./IRenderLayer"
+
+/**
+ * @type {Record<string,typeof IRenderLayer>}
+ */
+const RenderLayers = {}
+/**
+ * @type {Record<string,typeof ILayerVisualizer>}
+ */
+const LayerVisualizers = {}
+
+/**
+ * 注册图层类型，设置渲染图层类和图层渲染器类（非必须）
+ * @param {"symbol" | "fill" | "line" | "circle" | "heatmap" | "fill-extrusion" | "raster" | "hillshade" | "color-relief" | "background"} type 图层类型
+ * @param {typeof IRenderLayer} renderLayerCls 渲染图层类，必须继承 IRenderLayer
+ * @param {typeof ILayerVisualizer} [layerVisualizerCls] 图层渲染器类，必须继承 ILayerVisualizer
+ */
+function registerRenderLayer(type, renderLayerCls, layerVisualizerCls) {
+    RenderLayers[type] = renderLayerCls
+    LayerVisualizers[type] = layerVisualizerCls
+}
+
+export { RenderLayers, LayerVisualizers, registerRenderLayer }

package/Source/layers/visualizers/FillLayerVisualizer.js

@@ -0,0 +1,420 @@
+import { VectorTileFeature, classifyRings } from "@mapbox/vector-tile"
+import { IRenderLayer } from "../IRenderLayer"
+import { ILayerVisualizer } from "./ILayerVisualizer"
+import { loadGeometry } from "maplibre-gl/src/data/load_geometry"
+import { EXTENT } from 'maplibre-gl/src/data/extent';
+import { subdividePolygon } from "maplibre-gl/src/render/subdivision"
+import { granularitySettings } from "../../sources/granularitySettings";
+import { warnOnce } from "maplibre-gl/src/util/util";
+import { VectorTileset } from "../../VectorTileset";
+
+export class FillFeature {
+    constructor() {
+        this.featureId = 0
+        this.fillColor = Cesium.Color.BLACK.clone()
+        this.fillOpacity = 1
+        this.coordinates = []
+    }
+}
+
+export class FillLayerVisualizer extends ILayerVisualizer {
+    constructor(layers, tile) {
+        super(layers, tile)
+
+        this.geometryInstances = []
+        this.primitive = null
+        this.commandsReady = false
+    }
+
+    /**
+     * @param {VectorTileFeature[]} features 
+     * @param {IRenderLayer} layer 
+     * @param {Cesium.frameState} frameState 
+     * @param {VectorTileset} tileset 
+     */
+    addLayer(features, layer, frameState, tileset) {
+        const style = layer.style
+        const { tile, geometryInstances } = this
+        const granularity = granularitySettings.globe.line.getGranularityForZoomLevel(tile.z) / 2
+        const scope = this
+        let featureId = 0
+        const promoteId = tileset.sources[layer.style.source].styleSource.promoteId
+
+        for (const sourceFeature of features) {
+            const featureType = VectorTileFeature.types[sourceFeature.type]
+            const properties = sourceFeature.properties
+            if (featureType !== 'Polygon') continue
+
+            const fillPattern = style.paint.getDataValue('fill-pattern', tile.z, sourceFeature)
+            if (fillPattern) {
+                warnOnce('fill图层：不支持纹理填充（fill-pattern）')
+                continue
+            }
+
+            const sourceFeatureId = sourceFeature.id || properties[promoteId]
+            //读取图层样式属性
+            const fillColor = style.convertColor(style.paint.getDataValue('fill-color', tile.z, sourceFeature))
+            const fillOpacity = style.paint.getDataValue('fill-opacity', tile.z, sourceFeature)
+
+            //关键：对投影坐标细分，而不是使用cesium内置的细分
+            const vtCoords = loadGeometry(sourceFeature)
+            const polygons = classifyRings(vtCoords)
+            for (const coordinates of polygons) {
+                if (coordinates.some(ring => ring.length < 3)) continue
+
+                const batchId = geometryInstances.length
+                if (featureId == 0) {
+                    layer.firstBatchId = batchId
+                }
+                layer.lastBatchId = batchId
+
+                const fillFeature = {
+                    coordinates,
+                    featureId,
+                    fillColor,
+                    fillOpacity,
+                    properties,
+                    //保存原始数据的要素id，后续可以用来支持 featureState 表达式，这个表达式可以实现选定要素高亮显示
+                    id: sourceFeatureId,
+                    //保存batchId，将矢量要素与几何顶点关联，后续可以实时更新图层样式
+                    batchId
+                }
+
+                scope.addFeature(fillFeature, granularity)
+
+                featureId++
+            }
+        }
+
+        layer.offsets = []
+        layer.counts = []
+
+        this.layers.push(layer)
+    }
+
+    /**
+     * 创建一个多边形的几何体实例
+     * @param {FillFeature} feature
+     * @param {number} granularity
+     */
+    addFeature(feature, granularity) {
+        const geometryInstances = this.geometryInstances
+        const { coordinates, fillColor, fillOpacity } = feature
+        const colorBytes = fillColor.toBytes()
+        colorBytes[3] = Math.floor(colorBytes[3] * fillOpacity)
+
+        // 使用 maplibre-gl 的 subdividePolygon 基于投影坐标进行细分，
+        // 而不是在转成世界坐标后再使用 Cesium.PolygonGeometry 构建，这样才能避免出现自相交、破面等现象。
+        // 商业版性能优化：将此过程移到 Web Worker ，多线程加速，同时避免主线程阻塞
+
+        const subdivisionRes = subdividePolygon(coordinates, this.tile, granularity, false)
+        const verticesFlattened = subdivisionRes.verticesFlattened
+        const coordDeg = [0, 0], cartesian = new Cesium.Cartesian3()
+        const vertCount = verticesFlattened.length / 2
+        const positions = new Float64Array(vertCount * 3)
+        const normals = new Float32Array(vertCount * 3)
+        const sts = new Float32Array(vertCount * 2)
+
+        for (let i = 0, j = 0; i < verticesFlattened.length; i += 2, j++) {
+            const x = verticesFlattened[i], y = verticesFlattened[i + 1]
+            const coord = this.tile.transformPoint(x, y, coordDeg)
+            const position = Cesium.Cartesian3.fromDegrees(coord[0], coord[1], 0, null, cartesian)
+            positions[j * 3] = position.x
+            positions[j * 3 + 1] = position.y
+            positions[j * 3 + 2] = position.z
+
+            const normal = Cesium.Cartesian3.normalize(position, position)
+            normals[j * 3] = normal.x
+            normals[j * 3 + 1] = normal.y
+            normals[j * 3 + 2] = normal.z
+
+            sts[j * 2] = x / EXTENT
+            sts[j * 2 + 1] = y / EXTENT
+        }
+
+        const indices = new (vertCount > 65535 ? Uint32Array : vertCount > 255 ? Uint16Array : Uint8Array)(subdivisionRes.indicesTriangles)
+
+        const geometry = new Cesium.Geometry({
+            attributes: {
+                position: {
+                    componentDatatype: Cesium.ComponentDatatype.DOUBLE,
+                    componentsPerAttribute: 3,
+                    normalize: false,
+                    values: positions
+                },
+                normal: {
+                    componentDatatype: Cesium.ComponentDatatype.FLOAT,
+                    componentsPerAttribute: 3,
+                    normalize: false,
+                    values: normals
+                },
+                st: {
+                    componentDatatype: Cesium.ComponentDatatype.FLOAT,
+                    componentsPerAttribute: 2,
+                    normalize: false,
+                    values: sts
+                }
+            },
+            primitiveType: Cesium.PrimitiveType.TRIANGLES,
+            indices: indices,
+            boundingSphere: Cesium.BoundingSphere.fromVertices(positions)
+        })
+
+        const cartographic = Cesium.Cartographic.fromCartesian(geometry.boundingSphere.center)
+        cartographic.height = 0//包围盒中心可能高于或者低于地面，需要避免双击锁定视角时进入地下
+        const center = Cesium.Cartographic.toCartesian(cartographic, null, cartesian)
+
+        const instance = new Cesium.GeometryInstance({
+            geometry,
+            attributes: {
+                color: new Cesium.GeometryInstanceAttribute({
+                    componentDatatype: Cesium.ComponentDatatype.UNSIGNED_BYTE,
+                    componentsPerAttribute: 4,
+                    normalize: true,
+                    value: colorBytes
+                }),
+            },
+            //通过entity的形式暴露给Cesium pickEntity，这样点击时系统自带的inforbox可以弹出
+            id: new Cesium.Entity({
+                position: center,
+                id: feature.id,
+                properties: feature.properties
+            })
+        })
+        geometryInstances.push(instance)
+    }
+
+    createPrimitive() {
+        const primitive = new Cesium.Primitive({
+            geometryInstances: this.geometryInstances,
+            asynchronous: !(this.geometryInstances[0].geometry instanceof Cesium.Geometry),
+            appearance: new Cesium.PerInstanceColorAppearance({
+                flat: true,
+                translucent: false,
+                renderState: {
+                    //这里设置是没有用的，只要 translucent 为 false，
+                    //Cesium 内部都会覆盖成 true，所以我们需要在 DrawCommand 创建完成后再设置
+                    depthMask: false,
+                },
+                fragmentShaderSource:/*glsl*/` 
+in vec4 v_color;
+
+uniform vec4 tileId;
+uniform sampler2D tileIdTexture;
+
+void main()
+{
+    vec2 id_st = gl_FragCoord.xy / czm_viewport.zw; 
+    vec4 bgId = texture(tileIdTexture, id_st);
+    if (!all(equal(bgId, tileId)))
+    {
+       discard;
+    }
+    out_FragColor = v_color;
+}
+                `
+            }),
+        })
+
+        //通过定义 Primitive 私有变量 _geometries、_batchTable 的 setter 和 getter，
+        //监听合批几何体和批次表的创建：
+        //1、几何体创建完成后，根据 batchId 和 featureId，计算每个图层几何体的起始索引（offset）和索引数量（count）
+        //2、批次表创建完成后，保存备用
+        let scope = this
+        Object.defineProperties(primitive, {
+            _geometries: {
+                get() {
+                    return this._geometries_
+                },
+                set(geometries) {
+                    this._geometries_ = geometries
+                    if (geometries) {
+                        scope.onGeometriesLoaded(geometries)
+                    }
+                    else {
+                        scope = null
+                    }
+                }
+            },
+            _batchTable: {
+                get() {
+                    return this._batchTable_
+                },
+                set(batchTable) {
+                    this._batchTable_ = batchTable
+                    if (batchTable) {
+                        scope.onBatchTableCreated(batchTable)
+                    }
+                }
+            }
+        })
+
+        this.primitive = primitive
+    }
+
+    /**
+     * 根据 batchId 和 featureId，计算每个图层几何体的起始索引（offset）和索引数量（count）
+     * @param {Cesium.Geometry[]} geometries 
+     */
+    onGeometriesLoaded(geometries) {
+        //Cesium 几何体合批结果可能是多个几何体，对应多个 DrawCommand
+        for (let pass = 0; pass < geometries.length; pass++) {
+            const batches = {}
+            const geometry = geometries[pass];
+            const batchIds = geometry.attributes.batchId.values
+            const indices = geometry.indices
+
+            //提取每个批次的起始和结束索引
+            let currBatchId = -1
+            let currBatch = null
+            for (let i = 0; i < indices.length; i++) {
+                const vertIndex = indices[i]
+                const batchId = batchIds[vertIndex]
+                if (currBatchId !== batchId) {
+                    currBatchId = batchId
+                    currBatch = batches[currBatchId] = {
+                        begin: i,
+                        end: i
+                    }
+                }
+                currBatch.end = i
+            }
+
+            //根据图层批次范围，提取图层几何体索引范围，即起始索引（offset）和索引数量（count）
+            for (const layer of this.layers) {
+                const { firstBatchId, lastBatchId } = layer
+                if (firstBatchId === -1 || lastBatchId === -1) {
+                    continue
+                }
+
+                let begin = -1, end = -1
+                for (let batchId = firstBatchId; batchId <= lastBatchId; batchId++) {
+                    const batch = batches[batchId]
+                    if (batch) {
+                        if (begin === -1) begin = batch.begin
+                        end = batch.end
+                    }
+                }
+
+                if (begin === -1 || end === -1) {
+                    continue
+                }
+
+                //起始和结束索引，索引数量需要加1
+                layer.offsets[pass] = begin
+                layer.counts[pass] = end - begin + 1
+            }
+        }
+    }
+
+    /**
+     * 保存 Cesium Primitive 创建的批次表。图层样式变化时，通过更新批次表传递到GPU，同步更新渲染效果
+     * @param {Cesium.BatchTable} batchTable 
+     */
+    onBatchTableCreated(batchTable) {
+        this._batchTable = batchTable
+    }
+
+    /**
+     * 使用合批后的 drawCommand 创建副本，为渲染图层分配 drawCommand 
+     * @param {Cesium.DrawCommand[]} batchedCommandList 
+     * @param {VectorTileset} tileset
+     */
+    createLayerCommands(batchedCommandList, tileset) {
+        const renderState = Cesium.RenderState.fromCache({
+            id: 'fill',
+            blending: Cesium.BlendingState.ALPHA_BLEND,
+            depthMask: false,
+            depthTest: {
+                enabled: true
+            },
+            cull: {
+                enabled: true
+            }
+        })
+        const tileId = this.tile.tileId
+        this.renderState = renderState
+
+        for (let i = 0; i < this.layers.length; i++) {
+            const layer = this.layers[i]
+            const layerCommandList = layer.commandList = []
+
+            for (let pass = 0; pass < batchedCommandList.length; pass++) {
+                const offset = layer.offsets[pass], count = layer.counts[pass]
+                if (typeof offset !== 'number' || typeof count !== 'number') {
+                    continue
+                }
+                const command = batchedCommandList[pass]
+                command.uniformMap.tileIdTexture = function () {
+                    return tileset.tileIdTexture
+                }
+                command.uniformMap.tileId = function () {
+                    return tileId.color
+                }
+                command.pass = Cesium.Pass.CESIUM_3D_TILE
+                //通过副本的 offset 和 count 指定图层的绘制范围
+                const layerCommand = Cesium.DrawCommand.shallowClone(command)
+                layerCommand.pass = Cesium.Pass.CESIUM_3D_TILE
+                layerCommand.renderState = renderState
+                layerCommand.layerType = 'fill'
+                layerCommand.offset = offset
+                layerCommand.count = count
+                layerCommandList.push(layerCommand)
+            }
+        }
+
+        //标记 drawCommand 创建完成
+        this.state = 'done'
+    }
+
+    update(frameState, tileset) {
+        if (!this.geometryInstances) {
+            return
+        }
+
+        super.update(frameState, tileset)
+
+        if (!this.primitive && this.geometryInstances.length) {
+            this.createPrimitive()
+        }
+
+        if (this.primitive && this.state !== 'done' && this.state !== 'error') {
+            //先保存系统的 commandList
+            const preCommandList = frameState.commandList
+            //临时覆盖 frameState.commandList，用于获取合批之后的drawCommand
+            const batchedCommandList = frameState.commandList = []
+
+            //执行 primitive 的 update ，直到生成了合批后的drawCommand
+            try {
+                this.primitive.update(frameState)
+            } catch (err) {//如果报错，下一帧就不要再执行 update 了，以免重复打印错误信息
+                this.geometryInstances = []
+                this.state = 'error'
+                if (err.stack) console.trace(err.stack)
+                else console.error(err);
+                return
+            }
+
+            //使用合批后的 drawCommand 创建副本，为渲染图层分配 drawCommand 
+            if (batchedCommandList.length > 0) {
+                this.createLayerCommands(batchedCommandList, tileset)
+            }
+
+            //恢复系统的 commandList
+            frameState.commandList = preCommandList
+            this.geometryInstances = []
+        }
+    }
+
+    destroy() {
+        this.primitive = this.primitive && this.primitive.destroy()
+        this._batchTable = null
+        this.geometryInstances = null
+
+        super.destroy()
+    }
+
+    isDestroyed() {
+        return false
+    }
+}

package/Source/layers/visualizers/ILayerVisualizer.js

@@ -0,0 +1,73 @@
+import { VectorTileFeature } from "@mapbox/vector-tile";
+import { IRenderLayer } from "../IRenderLayer";
+import { VectorTileset } from "../../VectorTileset";
+import { VectorTileLOD } from "../../VectorTileLOD";
+
+/**
+ * 图层渲染器基类，负责瓦片内指定类型图层的合批几何体、批次表、绘图命令（DrawCommand）的构建，以及图层DrawCommand浅拷贝副本（shallow clone）的分配
+ * @see FillLayerVisualizer
+ * @see LineLayerVisualizer
+ * @see SymbolLayerVisualizer
+ */
+export class ILayerVisualizer {
+    /**
+     * 构造图层渲染器实例。图层渲染器负责瓦片内指定类型图层的合批几何体、批次表、绘图命令（DrawCommand）的构建，以及图层DrawCommand浅拷贝副本（shallow clone）的分配。
+     * 注意：构造函数仅供VectorTileLOD调用，请勿在其他模块直接调用
+     * @param {VectorTileLOD} tile 
+     * @param {IRenderLayer[]} [layers] 
+     * @inner
+     * @see FillLayerVisualizer
+     * @see LineLayerVisualizer
+     * @see SymbolLayerVisualizer
+     */
+    constructor(tile, layers = []) {
+        /**
+        * @type {VectorTileLOD}
+        */
+        this.tile = tile
+        /**
+         * @type {IRenderLayer[]}
+         */
+        this.layers = layers
+        /**
+         * 图层渲染器状态
+         * @type {'none'|'done'|'error'}
+         */
+        this.state = 'none'
+    }
+
+    /**
+     * 添加图层：将图层及其过滤后的要素添加到图层渲染器，子类实现该方法，完成图层存储、要素转换等合批构建需要的准备工作
+     * @param {VectorTileFeature[]} features 
+     * @param {IRenderLayer} renderLayer 
+     * @param {Cesium.frameState} frameState 
+     * @param {VectorTileset} tileset 
+     */
+    addLayer(features, renderLayer, frameState, tileset) {
+
+    }
+
+    /**
+     * 更新渲染器：子类实现该方法，完成合批几何体、批次表、绘图命令（DrawCommand）的构建，以及图层DrawCommand浅拷贝副本（shallow clone）的分配等工作
+     * @param {*} frameState 
+     * @param {*} tileset 
+     */
+    update(frameState, tileset) {
+
+    }
+
+    /**
+     * 销毁图层渲染器对象，释放资源
+     */
+    destroy() {
+        this.tile = null
+        this.layers.length = 0
+        this.isDestroyed = function returnTrue() {
+            return true
+        }
+    }
+
+    isDestroyed() {
+        return false
+    }
+}