@mesh3d/cesium-vectortile-gl 0.1.0

package/Source/VectorTileset.js

@@ -0,0 +1,309 @@
+import { VectorTileLOD } from "./VectorTileLOD"
+import { StyleLayer } from "./style/StyleLayer"
+import './layers/index'
+import { VectorTileRenderList } from "./VectorTileRenderList"
+import { Sources } from "./sources"
+import { ISource } from "./sources/ISource"
+import { warnOnce } from "maplibre-gl/src/util/util"
+
+export class VectorTileset {
+    /**
+     * @param {object} options 
+     * @param {string|import('@maplibre/maplibre-gl-style-spec').StyleSpecification} options.style
+     * @param {boolean} [options.showTileColor=false]
+     */
+    constructor(options) {
+        this.maximumLevel = 24
+        this.show = true
+        this.showTileColor = !!options.showTileColor
+        this.ready = false
+        this.tilingScheme = new Cesium.WebMercatorTilingScheme()
+
+        this.readyEvent = new Cesium.Event()
+        this.errorEvent = new Cesium.Event()
+
+        this._styleJson = null
+        this._style = options.style
+        this._rootTiles = []
+        this._cacheTiles = []
+        this._tilesToRender = []
+        /**@type {StyleLayer[]} */
+        this._styleLayers = []
+        /**@type {VectorTileRenderList} */
+        this._renderList = new VectorTileRenderList(this._styleLayers)
+        this.numLoading = 0
+        this.numInitializing = 0
+        /**@type {Cesium.Texture} */
+        this.tileIdTexture = null
+
+        requestAnimationFrame(() => {
+            this.init()
+        })
+    }
+
+    async init() {
+        let style = this._style
+        if (!style) {
+            this.errorEvent.raiseEvent(new Error('请传入 style 参数'))
+            return
+        }
+
+        this.path = ''
+        if (typeof style == 'string') {
+            this.path = style.split('/').slice(0, -1).join('/')
+            if (this.path) this.path += '/'
+            style = await Cesium.Resource.fetchJson(style)
+        }
+
+        //初始化数据源
+
+        /** @type {{[sourceId:string]:ISource}}*/
+        this.sources = {}
+        for (const sourceId in style.sources) {
+            /**@type {import('@maplibre/maplibre-gl-style-spec').SourceSpecification} */
+            const sourceParams = style.sources[sourceId]
+            const SourceCls = Sources[sourceParams.type]
+            if (SourceCls) {
+                this.sources[sourceId] = new SourceCls(sourceParams, this.path)
+                try {
+                    await this.sources[sourceId].init()
+                    this.maximumLevel = Math.min(sourceParams.maxzoom || 24, this.maximumLevel)
+                } catch (err) {
+                    this.errorEvent.raiseEvent(err)
+                }
+            }
+        }
+
+        //初始化样式图层
+        for (let i = 0; i < style.layers.length; i++) {
+            this._styleLayers[i] = new StyleLayer(style.layers[i])
+        }
+
+        //创建顶级瓦片LOD
+        const numX = this.tilingScheme.getNumberOfXTilesAtLevel(0)
+        const numY = this.tilingScheme.getNumberOfYTilesAtLevel(0)
+        let i = 0
+        for (let y = 0; y < numY; y++) {
+            for (let x = 0; x < numX; x++) {
+                var tile = new VectorTileLOD({
+                    parent: this, x, y, z: 0,
+                    tilingScheme: this.tilingScheme
+                })
+                tile.createChildren()
+                this._rootTiles[i++] = tile
+            }
+        }
+
+        //初始化渲染队列
+        this._renderList.init()
+
+        this._styleJson = style
+        this.ready = true
+        this.readyEvent.raiseEvent(this)
+    }
+
+    //更新瓦片id纹理，用于裁剪超出瓦片边界的像素
+    executeTileIdCommands(frameState) {
+        const tileIdCommands = this._renderList.tileIdCommands
+
+        if (tileIdCommands.length > 0) {
+            const context = frameState.context
+            /**@type {Cesium.FrameBuffer} */
+            let tileIdFbo = this._tileIdFbo
+            if (!tileIdFbo) {
+                tileIdFbo = new Cesium.FramebufferManager({
+                    depthStencil: true,
+                    supportsDepthTexture: true,
+                })
+                this._tileIdFbo = tileIdFbo
+                this._idClearCommand = new Cesium.ClearCommand({
+                    color: new Cesium.Color(0.0, 0.0, 0.0, 0.0),
+                    depth: 1.0,
+                    stencil: 0.0,
+                })
+            }
+            const pixelDatatype = context.floatingPointTexture
+                ? Cesium.PixelDatatype.FLOAT
+                : Cesium.PixelDatatype.UNSIGNED_BYTE;
+            const width = context.drawingBufferWidth
+            const height = context.drawingBufferHeight
+            tileIdFbo.update(context, width, height, 1, pixelDatatype)
+            tileIdFbo.clear(context, this._idClearCommand)
+
+            const framebuffer = tileIdFbo.framebuffer
+            for (const tileIdCommand of tileIdCommands) {
+                tileIdCommand.framebuffer = framebuffer
+                tileIdCommand.execute(context)
+            }
+
+            this.tileIdTexture = tileIdFbo.getColorTexture(0)
+        }
+    }
+
+    update(frameState) {
+        if (!this.ready || !this.show) return
+
+        if (frameState.context.webgl2) {
+            warnOnce('webgl2模式下贴地线面的支持将导致性能下降')
+        }
+
+        const renderList = this._renderList
+        //清空渲染队列
+        renderList.beginFrame()
+
+        this.numInitializing = 0
+
+        /**@type {Cesium.Globe} */
+        const scene = frameState.camera._scene
+        const globe = scene.globe
+        const globeSuspendLodUpdate = globe._surface._debug.suspendLodUpdate
+        this.scene = scene
+
+        // 获取可见瓦片
+        // 优化：采用更高效的LOD调度算法，获取当前帧实际可渲染到屏幕的瓦片，避免出现瓦片层级切换时候出现闪烁
+
+        /**@type {VectorTileLOD[]} */
+        const tilesToRender = globeSuspendLodUpdate ? this._tilesToRender : getTilesToRender(frameState, this)
+
+        //瓦片排序，决定瓦片加载瓦片数据、初始化的优先级
+        //优化：采用更精细、高效的优先级策略
+        if (!globeSuspendLodUpdate) {
+            tilesToRender.sort((a, b) => a.distanceToCamera - b.distanceToCamera)
+        }
+
+        //更新瓦片状态：请求瓦片数据，创建渲染图层，初始化等
+        for (const tile of tilesToRender) {
+            tile.lastVisitTime = frameState.frameNumber
+            tile.expired = false
+            tile.update(frameState, renderList, this)
+        }
+
+        //渲染图层分组、排序
+        const orderedRenderLayers = renderList.getList()
+        //获取渲染命令（DrawCommand），渲染图层内部可以使用Primitive、PolylineCollection、LabelCollection、BillboardCollection等API，
+        //也可以自定义DrawCommand
+        for (const renderLayer of orderedRenderLayers) {
+            renderLayer.update(frameState, this)
+        }
+        //瓦片颜色、深度
+        frameState.commandList.push(...renderList.tileCommands)
+
+        this.executeTileIdCommands(frameState)
+
+        //释放过期瓦片
+        //优化：使用更高效的内存缓存管理策略
+        const expiredTiles = []
+        for (const cacheTile of this._cacheTiles) {
+            if (cacheTile.lastVisitTime < frameState.frameNumber) {
+                if (!cacheTile.expired) expiredTiles.push(cacheTile)
+            }
+        }
+        expiredTiles.sort((a, b) => a.lastVisitTime - b.lastVisitTime)
+        if (expiredTiles.length > 100) {
+            for (const expiredTile of expiredTiles) {
+                expiredTile.unload()
+                expiredTile.expired = true
+                if (expiredTiles.length <= 50) break
+            }
+        }
+    }
+
+    destroy() {
+        const scene = this.scene
+        const rootTiles = this._rootTiles
+        this.scene = null
+        if (scene && scene.primitives.contains(this)) {
+            scene.primitives.remove(this)
+        }
+
+        if (rootTiles) {
+            for (const tile of rootTiles) {
+                tile.destroy()
+            }
+            rootTiles.length = 0
+            this._rootTiles = null
+        }
+        if (this._cacheTiles) {
+            this._cacheTiles.length = 0
+            this._cacheTiles = null
+        }
+
+        if (this.sources) {
+            for (const key in this.sources) {
+                if (Object.hasOwnProperty.call(this.sources, key)) {
+                    const source = this.sources[key];
+                    source.destroy()
+                }
+            }
+            this.sources = null
+        }
+        this._styleLayers = null
+
+        if (this._renderList) {
+            this._renderList.destroy()
+            this._renderList = null
+        }
+
+        if (this._tilesToRender) {
+            this._tilesToRender.length = 0
+            this._tilesToRender = null
+        }
+
+        if (this._tileIdFbo) {
+            this._tileIdFbo.destroy()
+            this.tileIdTexture = null
+            this._tileIdFbo = null
+            this._idClearCommand = null
+        }
+
+        this._styleJson = null
+    }
+
+    isDestroyed() {
+        return false
+    }
+}
+
+/**
+ * 遍历LOD四叉树，获取所有可见瓦片
+ * @param {Cesium.FrameState} frameState 
+ * @param {VectorTileset} tileset 
+ * @returns 
+ */
+function getTilesToRender(frameState, tileset) {
+    const queue = [
+        ...tileset._rootTiles
+    ]
+    const tilesToRender = tileset._tilesToRender
+    const visitor = {
+        //当see大于阈值，继续查找子级瓦片
+        visitChildren(tile) {
+            if (tile.z >= tileset.maximumLevel) {
+                return tilesToRender.push(tile)
+            }
+
+            if (tile.children.length == 0) {
+                tile.createChildren()
+                for (const child of tile.children) {
+                    tileset._cacheTiles.push(child)
+                }
+            }
+            for (const child of tile.children) {
+                queue.push(child)
+            }
+        },
+        //否则使用当前瓦片填充视口
+        accept(tile) {
+            tilesToRender.push(tile)
+        }
+    }
+
+    tilesToRender.length = 0
+
+    do {
+        const tile = queue.shift()
+        tile.visit(frameState, visitor)
+    } while (queue.length > 0);
+
+    return tilesToRender
+}

package/Source/layers/BackgroundRenderLayer.js

@@ -0,0 +1,82 @@
+import { VectorTileset } from '../VectorTileset'
+import { IRenderLayer } from './IRenderLayer'
+import { registerRenderLayer } from './registerRenderLayer'
+import { warnOnce } from 'maplibre-gl/src/util/util'
+
+export class BackgroundRenderLayer extends IRenderLayer {
+    createPrimitve(frameState, tileset) {
+        const style = this.style
+        const tile = this.tile
+        const color = style.convertColor(style.paint.getDataConstValue('background-color', tile.z))
+        const opacity = style.paint.getDataConstValue('background-opacity', tile.z)
+        const pattern = style.paint.getDataConstValue('background-pattern', tile.z)
+        if (pattern) {
+            return warnOnce('background图层：不支持纹理填充')
+        }
+        color.alpha *= opacity
+
+        const primitive = new Cesium.Primitive({
+            geometryInstances: new Cesium.GeometryInstance({
+                geometry: new Cesium.RectangleGeometry({
+                    rectangle: this.tile.rectangle
+                }),
+            }),
+            compressVertices: false,
+            asynchronous: false,
+            appearance: new Cesium.MaterialAppearance({
+                translucent: false,
+                material: Cesium.Material.fromType('Color', {
+                    color: color
+                }),
+                flat: true
+            })
+        })
+
+        this.primitive = primitive
+    }
+
+    /**
+    * @param {Cesium.FrameState} frameState 
+    * @param {VectorTileset} tileset 
+    */
+    update(frameState, tileset) {
+        if (!this.primitive) {
+            this.createPrimitve(frameState, tileset)
+        }
+        if (this.primitive && !this.commandList.length) {
+            const preCommandList = frameState.commandList
+            const layerCommandList = frameState.commandList = this.commandList
+
+            this.primitive.update(frameState)
+
+            //DrawCommand创建完成后，关闭深度写入，开启深度测试
+            if (layerCommandList.length > 0) {
+                const renderState = Cesium.RenderState.fromCache({
+                    blending: Cesium.BlendingState.ALPHA_BLEND,
+                    depthMask: false,
+                    depthTest: {
+                        enabled: true
+                    },
+                    cull: {
+                        enabled: true
+                    }
+                })
+                for (const layerCommand of layerCommandList) {
+                    layerCommand.renderState = renderState
+                    layerCommand.pass = Cesium.Pass.CESIUM_3D_TILE
+                }
+            }
+
+            frameState.commandList = preCommandList
+        }
+
+        super.update(frameState, tileset)
+    }
+
+    destroy() {
+        this.primitive = this.primitive && this.primitive.destroy()
+        super.destroy()
+    }
+}
+
+registerRenderLayer('background', BackgroundRenderLayer)

package/Source/layers/FillRenderLayer.js

@@ -0,0 +1,18 @@
+import { VectorTileset } from '../VectorTileset'
+import { IRenderLayer } from './IRenderLayer'
+import { registerRenderLayer } from './registerRenderLayer'
+import { FillLayerVisualizer } from './visualizers/FillLayerVisualizer'
+
+export class FillRenderLayer extends IRenderLayer {
+    /**
+    * @param {Cesium.FrameState} frameState 
+    * @param {VectorTileset} tileset 
+    */
+    update(frameState, tileset) {
+        //可以在这里实现同步样式，动态更新图层颜色等样式
+
+        super.update(frameState, tileset)
+    }
+}
+
+registerRenderLayer('fill', FillRenderLayer, FillLayerVisualizer)

package/Source/layers/IRenderLayer.js

@@ -0,0 +1,128 @@
+import * as MVT from '@mapbox/vector-tile'
+import { StyleLayer } from '../style/StyleLayer'
+import { VectorTileset } from '../VectorTileset'
+import { VectorTileLOD } from '../VectorTileLOD'
+
+/**
+ * 渲染要素接口，对应数据要素中的一个图形（例如 MultiLineString 中的1个多段线）
+ */
+export class IRenderFeature {
+    constructor() {
+        //如下2个属性用于表达式取值
+        this.id = null
+        this.properties = {}
+
+        //如下2个属性用于同步图层样式
+        this.batchId = 0
+        this.featureId = 0
+
+        //可选，批量构建几何体可能需要临时存储，创建结束后应及时释放
+        this.coordinates = []
+    }
+}
+
+/**
+ * 渲染图层基类，定义渲染图层的通用属性和方法（更新、销毁）
+ */
+export class IRenderLayer {
+    /**
+     * 构造渲染图层实例。注意：该构造函数由VectorTileset调用，请勿在其他模块直接调用
+     * @param {MVT.VectorTileFeature[]} sourceFeatures 
+     * @param {StyleLayer} styleLayer 
+     * @param {VectorTileLOD} tile 
+     */
+    constructor(sourceFeatures, styleLayer, tile) {
+        /**@type {MVT.VectorTileFeature[]} */
+        this.sourceFeatures = sourceFeatures
+        /**@type {StyleLayer} */
+        this.style = styleLayer
+        /**@type {VectorTileLOD} */
+        this.tile = tile
+        /**
+         * @type {IRenderFeature[]}
+         */
+        this.features = []
+
+        //如下5个属性是图层渲染器专用，未定义相应类型图层渲染器的可以忽略
+        /**
+         * 图层渲染器构造几何体实例过程中，记录当前图层第一个实例的索引，这个索引与批次表及几何体顶点数组中的的batchId一致。
+         * 注意：该属性是针对图层渲染器设计，未定义相应类型图层渲染器的可以忽略
+         * @type {number}
+         */
+        this.firstBatchId = -1
+        /**
+         * 图层渲染器构造几何体实例过程中，记录当前图层最后一个实例的索引，这个索引与批次表及几何体顶点数组中的的batchId一致
+         * 注意：该属性是针对图层渲染器设计，未定义相应类型图层渲染器的可以忽略
+         * @type {number}
+         */
+        this.lastBatchId = -1
+        /**
+         * 图层渲染器构造绘图命令后，根据 firstBatchId 、 lastBatchId 、几何体顶点数组中的 batchId 计算当前图层的绘制范围，
+         * 绘制范围用几何体的起始索引和索引数量表示，对应绘图命令中的offset和count，由于 Cesium 合批构造几何体的结果仍然可能是多个几何体，
+         * 所以这里用数组存储起始索引（offset）部分，与合批构造结果一一对应。
+         * 注意：该属性是针对图层渲染器设计，未定义相应类型图层渲染器的可以忽略
+         */
+        this.offsets = []
+        /**
+         * 这里用数组存储索引数量（count）部分，与合批构造结果一一对应。详细说明同 offsets 注释
+         * 注意：该属性是针对图层渲染器设计，未定义相应类型图层渲染器的可以忽略
+         */
+        this.counts = []
+        /**
+         * 这里用数组存储渲染器分配到图层的绘图命令（DrawCommand）副本，与合批构造结果一一对应。详细说明同 offsets 注释。
+         */
+        this.commandList = []
+    }
+
+    get id() {
+        return this.style.id
+    }
+
+    get type() {
+        return this.style.type
+    }
+
+    /**
+     * 更渲染图层，可在该方法内实现绘图命令构建、动态样式更新等图层渲染相关功能。该方法可以被子类重写或复用，内部从 commandList 属性获取绘图命令（DrawCommand）并加入 frameState.commandList，完成图层渲染对象到Cesium渲染管线的连接 
+     * @param {Cesium.FrameState} frameState 
+     * @param {VectorTileset} tileset 
+     */
+    update(frameState, tileset) {
+        const visibility = this.style.layout.getDataConstValue('visibility', this.tile.z)
+        if (visibility === 'none') return
+
+        const commandList = this.commandList
+        if (commandList && commandList.length) {
+            for (const command of commandList) {
+                frameState.commandList.push(command)
+            }
+        }
+    }
+
+    /**
+     * 判断对象是否已销毁。基类的 destroy 会自动将该方法改写成返回值为true的版本，子类的 destroy 应通过 super.destory 调用基类的 destroy
+     * @returns 
+     */
+    isDestroyed() {
+        return false
+    }
+
+    /**
+     * 销毁渲染图层，释放资源。基类负责释放通用属性存储的数据，子类的 destroy 应通过 super.destory 调用基类的 destroy
+     */
+    destroy() {
+        if (this.commandList) {
+            this.commandList.length = 0
+        }
+        if (this.sourceFeatures) {
+            this.sourceFeatures.length = 0
+        }
+        this.style = null
+        this.offsets = null
+        this.counts = null
+        this.tile = null
+        this.isDestroyed = function returnTrue() {
+            return true
+        }
+    }
+}

package/Source/layers/LineRenderLayer.js

@@ -0,0 +1,94 @@
+import * as MVT from '@mapbox/vector-tile'
+import { StyleLayer } from '../style/StyleLayer'
+import { VectorTileset } from '../VectorTileset'
+import { IRenderLayer } from './IRenderLayer'
+import { registerRenderLayer } from './registerRenderLayer'
+import { VectorTileLOD } from '../VectorTileLOD'
+import { LineLayerVisualizer } from './visualizers/LineLayerVisualizer'
+
+export class LineRenderLayer extends IRenderLayer {
+    /**
+     * @param {MVT.VectorTileFeature[]} sourceFeatures 
+     * @param {StyleLayer} styleLayer 
+     * @param {VectorTileLOD} tile 
+     */
+    constructor(sourceFeatures, styleLayer, tile) {
+        super(sourceFeatures, styleLayer, tile)
+        this.primitive = null
+        this.dasharray = []
+        this.dashLength = 0
+    }
+
+    createPrimitve(frameState, tileset) {
+        const primitive = new Cesium.PolylineCollection()
+        const sourceFeatures = this.sourceFeatures
+        const style = this.style
+        const tile = this.tile
+
+        function addPolyline(coordinates, lineWidth, lineColor) {
+            if (coordinates.length < 2) return
+
+            const positions = coordinates.map(coord => Cesium.Cartesian3.fromDegrees(coord[0], coord[1]))
+            primitive.add({
+                positions,
+                width: lineWidth,
+                material: Cesium.Material.fromType('Color', {
+                    color: style.convertColor(lineColor)
+                })
+            })
+        }
+
+        for (const sourceFeature of sourceFeatures) {
+            const feature = sourceFeature.toGeoJSON(tile.x, tile.y, tile.z)
+            if (!feature.geometry) continue
+
+            //读取图层样式属性
+            const lineWidth = style.paint.getDataValue('line-width', tile.z, sourceFeature)
+            const lineColor = style.paint.getDataValue('line-color', tile.z, sourceFeature)
+
+            const geometryType = feature.geometry.type
+            const coordinates = feature.geometry.coordinates
+            if (geometryType == 'LineString') {
+                addPolyline(coordinates, lineWidth, lineColor)
+            }
+            else if (geometryType == 'MultiLineString' || geometryType == 'Polygon') {
+                for (const ring of coordinates) {
+                    addPolyline(ring, lineWidth, lineColor)
+                }
+            }
+            else if (geometryType == 'MultiPolygon') {
+                for (const polygon of coordinates) {
+                    for (const ring of polygon) {
+                        addPolyline(ring, lineWidth, lineColor)
+                    }
+                }
+            }
+            else {
+                console.log('暂不支持几何类型：' + geometryType);
+            }
+        }
+
+        this.primitive = primitive
+    }
+
+    /**
+    * @param {Cesium.FrameState} frameState 
+    * @param {VectorTileset} tileset 
+    */
+    update(frameState, tileset) {
+        // if (!this.primitive) {
+        //     this.createPrimitve(frameState, tileset)
+        // }
+        // if (this.primitive && this.primitive.length) {
+        //     this.primitive.update(frameState)
+        // }
+        super.update(frameState, tileset)
+    }
+
+    destroy() {
+        this.primitive = this.primitive && this.primitive.destroy()
+        super.destroy()
+    }
+}
+
+registerRenderLayer('line', LineRenderLayer, LineLayerVisualizer)

package/Source/layers/SymbolRenderLayer.js

@@ -0,0 +1,31 @@
+import * as MVT from '@mapbox/vector-tile'
+import { StyleLayer } from '../style/StyleLayer'
+import { VectorTileLOD } from '../VectorTileLOD'
+import { IRenderLayer } from './IRenderLayer'
+import { SymbolLayerVisualizer } from './visualizers/SymbolLayerVisualizer'
+import { registerRenderLayer } from './registerRenderLayer'
+
+export class SymbolRenderLayer extends IRenderLayer {
+    /**
+     * @param {MVT.VectorTileFeature[]} sourceFeatures 
+     * @param {StyleLayer} style 
+     * @param {VectorTileLOD} tile 
+     */
+    constructor(sourceFeatures, styleLayer, tile) {
+        super(sourceFeatures, styleLayer, tile)
+        this.labels = []
+    }
+
+    /**
+    * @param {Cesium.FrameState} frameState 
+    * @param {VectorTileset} tileset 
+    */
+    update(frameState, tileset) {
+        //TODO：动态更新符号样式
+
+        super.update(frameState, tileset)
+    }
+
+}
+
+registerRenderLayer('symbol', SymbolRenderLayer, SymbolLayerVisualizer)

package/Source/layers/index.js

@@ -0,0 +1,16 @@
+import { RenderLayers, LayerVisualizers, registerRenderLayer } from "./registerRenderLayer";
+import { ILayerVisualizer } from "./visualizers/ILayerVisualizer";
+import { IRenderLayer } from "./IRenderLayer";
+import { BackgroundRenderLayer } from "./BackgroundRenderLayer";
+import { FillRenderLayer } from "./FillRenderLayer";
+import { LineRenderLayer } from "./LineRenderLayer";
+import {SymbolRenderLayer } from "./SymbolRenderLayer";
+
+export {
+    RenderLayers, LayerVisualizers, registerRenderLayer,
+    IRenderLayer, ILayerVisualizer,
+    BackgroundRenderLayer,
+    FillRenderLayer,
+    LineRenderLayer,
+    SymbolRenderLayer
+}