@mesh3d/cesium-vectortile-gl 0.1.0

package/Source/layers/visualizers/SymbolLayerVisualizer.js

@@ -0,0 +1,179 @@
+import { VectorTileFeature } from "@mapbox/vector-tile"
+import { ILayerVisualizer } from "./ILayerVisualizer"
+import { SymbolRenderLayer } from "../SymbolRenderLayer"
+import { warnOnce } from "maplibre-gl/src/util/util"
+
+export class SymbolFeature {
+    constructor() {
+        this.featureId = 0
+        this.textColor = Cesium.Color.BLACK.clone()
+        this.textSize = 12
+        this.coordinates = []
+    }
+}
+
+/**@type {Cesium.Cartesian3} */
+let scratchDirectionToEye = null
+/**@type {Cesium.Cartesian3} */
+let scratchSurfaceNormal = null
+
+export class SymbolLayerVisualizer extends ILayerVisualizer {
+    constructor(layers, tile) {
+        if (scratchDirectionToEye === null) {
+            scratchDirectionToEye = new Cesium.Cartesian3()
+            scratchSurfaceNormal = new Cesium.Cartesian3()
+        }
+
+        super(layers, tile)
+
+        /**@type {Cesium.Label[]} */
+        this.labels = []
+        this.primitive = null
+        this.dotCutOff = 0.0035
+    }
+
+    /**
+     * 对符号进行地平线剔除
+     * @param {Cesium.Cartesian3} positionWC 
+     * @param {Cesium.Cartesian3} cameraPositionWC 
+     */
+    isOccluded(cameraPositionWC, positionWC) {
+        /*
+        如下图，o为符号锚点，up为椭球面过锚点o的法线，tangent为过锚点o的切线，eye为相机位置。
+        可见，当锚点在地平线以下时，eye方向与up方向夹角小于90°。
+        up
+        ^
+        |
+        o —— —— > tangent
+         \
+          \
+           eye
+        */
+        const eyeDir = Cesium.Cartesian3.subtract(cameraPositionWC, positionWC, scratchDirectionToEye)
+        Cesium.Cartesian3.normalize(eyeDir, eyeDir)
+        const up = Cesium.Cartesian3.normalize(positionWC, scratchSurfaceNormal)
+        return Cesium.Cartesian3.dot(eyeDir, up) < this.dotCutOff
+    }
+
+    /**
+     * @param {VectorTileFeature[]} features 
+     * @param {SymbolRenderLayer} layer 
+     * @param {Cesium.frameState} frameState 
+     * @param {VectorTileset} tileset 
+     */
+    addLayer(features, layer, frameState, tileset) {
+        const style = layer.style
+        const { tile, labels } = this
+        const rectangle = tile.rectangle
+
+        function addText(coord, text, font, textSize, textColor, outlineWidth, outlineColor) {
+            if (!Cesium.Rectangle.contains(rectangle, Cesium.Cartographic.fromDegrees(coord[0], coord[1]))) {
+                return
+            }
+            const label = new Cesium.Label({
+                position: Cesium.Cartesian3.fromDegrees(coord[0], coord[1]),
+                text,
+                font: textSize + 'px ' + font,
+                fillColor: textColor,
+                style: outlineWidth && Cesium.LabelStyle.FILL_AND_OUTLINE,
+                outlineWidth: outlineWidth * textSize,
+                outlineColor,
+                //禁用深度测试
+                disableDepthTestDistance: Infinity
+            })
+            labels.push(label)
+            layer.labels.push(label)
+        }
+
+        for (const sourceFeature of features) {
+            const feature = sourceFeature.toGeoJSON(tile.x, tile.y, tile.z)
+            if (!feature.geometry) continue
+            const properties = sourceFeature.properties
+
+            //读取图层样式属性
+            const iconImage = style.layout.getDataValue('icon-image', tile.z, sourceFeature)
+            const textField = style.layout.getDataValue('text-field', tile.z, sourceFeature)
+            let text = textField && style.layout.resolveTokens(properties, textField)
+            if (iconImage) {
+                warnOnce('symbol图层：不支持图标')
+                continue
+            }
+            if (!text) {
+                continue
+            }
+            const maxWidth = style.layout.getDataValue('text-max-width', tile.z, sourceFeature) * 3
+            const textRotationAlignment = style.layout.getDataValue('text-rotation-alignment', tile.z, sourceFeature)
+            const textPitchAlignment = style.layout.getDataValue('text-pitch-alignment', tile.z, sourceFeature)
+            if (text.length > maxWidth) {
+                warnOnce('symbol图层： 不支持 text-max-width，无自动换行效果')
+            }
+            if (textRotationAlignment === 'map') {
+                warnOnce('symbol图层：text-rotation-alignment 仅支持 viewport')
+            }
+            if (textPitchAlignment === 'map') {
+                warnOnce('symbol图层：text-pitch-alignment 仅支持 viewport')
+            }
+
+            const font = style.layout.getDataValue('text-font', tile.z, sourceFeature)
+            const textSize = style.layout.getDataValue('text-size', tile.z, sourceFeature)
+            const textColor = style.convertColor(style.paint.getDataValue('text-color', tile.z, sourceFeature))
+            const outlineColor = style.convertColor(style.paint.getDataValue('text-halo-color', tile.z, sourceFeature))
+            const outlineWidth = style.paint.getDataValue('text-halo-width', tile.z, sourceFeature)
+
+            const geometryType = feature.geometry.type
+            const coordinates = feature.geometry.coordinates
+            if (geometryType == 'Point') {
+                addText(coordinates, text, font, textSize, textColor, outlineWidth, outlineColor)
+            }
+            else if (geometryType == 'MultiPoint') {
+                coordinates.forEach(coord => {
+                    addText(coord, text, font, textSize, textColor, outlineWidth, outlineColor)
+                })
+            }
+            else {
+                warnOnce('symbol图层：不支持符号沿线布局');
+            }
+        }
+
+        this.layers.push(layer)
+    }
+
+    createPrimitive() {
+        //所有图层的文字共用一个LabelCollection
+        //注意：这样文字就没有了“图层”的特征了，渲染顺序可能和样式配置的不一致
+        //优化：参考 maplibre-gl 的符号系统实现，但工作量巨大，如有需求建议使用商业版（Mesh-3D矢量地图引擎）
+
+        const primitive = new Cesium.LabelCollection()
+        for (let i = 0; i < this.labels.length; i++) {
+            this.labels[i] = primitive.add(this.labels[i])
+        }
+        this.primitive = primitive
+    }
+
+    update(frameState, tileset) {
+        if (!this.primitive && this.labels?.length) {
+            this.createPrimitive()
+        }
+
+        //我们禁用了 label 的深度测试，这里剔除中心位置在地球背面的符号
+        const cameraPositionWC = frameState.camera.positionWC
+        for (const label of this.labels) {
+            label.show = !this.isOccluded(cameraPositionWC, label.position)
+        }
+
+        //性能优化：这里应该进行自动避让处理
+
+        if (this.primitive) {
+            this.primitive.update(frameState)
+        }
+    }
+
+    destroy() {
+        this.primitive = this.primitive && this.primitive.destroy()
+        super.destroy()
+    }
+
+    isDestroyed() {
+        return false
+    }
+}

package/Source/sources/GeoJSONSource.js

@@ -0,0 +1,46 @@
+import { ISource } from "./ISource";
+import { registerSource } from "./registerSource";
+import geojsonvt from "geojson-vt";
+import { GeoJSONWrapper } from '@maplibre/vt-pbf'
+import { EXTENT } from 'maplibre-gl/src/data/extent';
+
+export class GeoJSONSource extends ISource {
+    constructor(styleSource, path) {
+        super(styleSource, path)
+    }
+
+    async init() {
+        /**@type {import("@maplibre/maplibre-gl-style-spec").GeoJSONSourceSpecification} */
+        const sourceParams = this.styleSource
+        let data = sourceParams.data
+        if (typeof data === 'string') {
+            const url = /^((http)|(https)|(data:)|\/)/.test(data) ? data : this.path + data
+            try {
+                data = await Cesium.Resource.fetchJson(url)
+            } catch (err) {
+                this.errorEvent.raiseEvent(err)
+            }
+        }
+        if (data && data.features?.length) {
+            this.tileIndex = new geojsonvt(data, {
+                extent: EXTENT,
+                buffer: sourceParams.buffer === undefined ? 128 : sourceParams.buffer,
+                tolerance: sourceParams.tolerance === sourceParams.tolerance ? 0.375 : sourceParams.tolerance
+            })
+        }
+    }
+
+    async requestTile(x, y, z) {
+        if (!this.tileIndex) return
+        try {
+            const geoJSONTile = this.tileIndex.getTile(z, x, y)
+            if (!geoJSONTile) return
+            const geojsonWrapper = new GeoJSONWrapper(geoJSONTile.features, { extent: EXTENT });
+            return geojsonWrapper
+        } catch (err) {
+            this.errorEvent.raiseEvent(err)
+        }
+    }
+}
+
+registerSource('geojson', GeoJSONSource)

package/Source/sources/ISource.js

@@ -0,0 +1,39 @@
+import { VectorTile } from '@mapbox/vector-tile'
+
+/**
+ * 数据源基类，定义通用属性和必须实现的方法（init、requestTile）
+ * @see VectorSource
+ * @see GeoJSONSource
+ */
+export  class ISource {
+    /**
+     * 构造数据源实例。注意：该构造函数由VectorTileset调用，请勿在其他模块直接调用
+     * @param {import('@maplibre/maplibre-gl-style-spec').SourceSpecification} styleSource 
+     * @param {string} [path] 
+     * @see VectorSource
+     * @see GeoJSONSource
+     */
+    constructor(styleSource, path = '') {
+        /**@type {"vector"|"geojson"} */
+        this.type = styleSource.type
+        /**@type {import('@maplibre/maplibre-gl-style-spec').SourceSpecification} */
+        this.styleSource = styleSource
+        this.path = path
+        this.errorEvent = new Cesium.Event()
+    }
+
+    async init() { }
+
+    /**
+     * @param {number} x 
+     * @param {number} y 
+     * @param {number} z  
+     * @returns {Promise<VectorTile>}
+     */
+    requestTile(x, y, z) { }
+
+    destroy() {
+        this.styleSource = null
+        this.errorEvent = null
+    }
+}

package/Source/sources/VectorSource.js

@@ -0,0 +1,45 @@
+import { ISource } from "./ISource";
+import { registerSource } from "./registerSource";
+import { VectorTile } from '@mapbox/vector-tile'
+import Pbf from 'pbf'
+
+export class VectorSource extends ISource {
+    constructor(styleSource, path) {
+        super(styleSource, path)
+    }
+
+    async init() {
+        const sourceParams = this.styleSource
+        let url = sourceParams.url
+        if (url && !sourceParams.tiles) {
+            url = /^((http)|(https)|(data:)|\/)/.test(url) ? url : this.path + sourceParams.url
+            try {
+                const metadata = await Cesium.Resource.fetchJson(url)
+                for (const key in metadata) {
+                    if (!sourceParams[key]) {
+                        sourceParams[key] = metadata[key]
+                    }
+                }
+            } catch (err) {
+                this.errorEvent.raiseEvent(err)
+            }
+        }
+    }
+
+    async requestTile(x, y, z) {
+        const sourceParams = this.styleSource
+        if (!sourceParams.tiles || !sourceParams.tiles.length) return
+        let tileUrl = sourceParams.tiles[0].replace('{x}', x).replace('{y}', y).replace('{z}', z)
+        tileUrl = /^((http)|(https)|(data:)|\/)/.test(tileUrl) ? tileUrl : this.path + tileUrl
+
+        try {
+            const tileBuf = await (fetch(tileUrl).then(res => res.arrayBuffer()));
+            const tileData = new VectorTile(new Pbf(tileBuf))
+            return tileData
+        } catch (err) {
+            this.errorEvent.raiseEvent(err)
+        }
+    }
+}
+
+registerSource('vector', VectorSource)

package/Source/sources/granularitySettings.js

@@ -0,0 +1,20 @@
+import { SubdivisionGranularitySetting, SubdivisionGranularityExpression } from "maplibre-gl/src/render/subdivision_granularity_settings"
+
+const granularitySettings = {
+    globe: new SubdivisionGranularitySetting({
+        fill: new SubdivisionGranularityExpression(128, 2),
+        line: new SubdivisionGranularityExpression(512, 0),
+        // Always keep at least some subdivision on raster tiles, etc,
+        // otherwise they will be visibly warped at high zooms (before mercator transition).
+        // This si not needed on fill, because fill geometry tends to already be
+        // highly tessellated and granular at high zooms.
+        tile: new SubdivisionGranularityExpression(128, 32),
+        // Stencil granularity must never be higher than fill granularity,
+        // otherwise we would get seams in the oceans at zoom levels where
+        // stencil has higher granularity than fill.
+        stencil: new SubdivisionGranularityExpression(128, 1),
+        circle: 3
+    })
+}
+
+export { granularitySettings }

package/Source/sources/index.js

@@ -0,0 +1,11 @@
+
+import { ISource } from './ISource'
+import { registerSource, Sources } from './registerSource'
+import { VectorSource } from './VectorSource'
+import { GeoJSONSource } from './GeoJSONSource'
+
+export {
+    ISource, registerSource, Sources,
+    VectorSource,
+    GeoJSONSource
+}

package/Source/sources/registerSource.js

@@ -0,0 +1,19 @@
+import { ISource } from "./ISource"
+
+/**
+ * @type {{[sourceType:string]:typeof ISource}}
+ */
+const Sources = {}
+
+/**
+ * 注册数据源类型，设置数据源类
+ * @param {*} type 
+ * @param {*} sourceCls 
+ */
+function registerSource(type, sourceCls) {
+    Sources[type] = sourceCls
+}
+
+export {
+    Sources, registerSource
+}

package/Source/style/StyleLayer.js

@@ -0,0 +1,43 @@
+import { featureFilter, Color } from "@maplibre/maplibre-gl-style-spec";
+import { StyleLayerProperties } from "./StyleLayerProperties";
+
+export class StyleLayer {
+    /**
+     * @param {import('@maplibre/maplibre-gl-style-spec').LayerSpecification} layer 
+     */
+    constructor(layer) {
+        this.data = layer
+        this.type = layer.type
+        this.id = layer.id
+        this.minzoom = layer.minzoom || 0
+        this.maxzoom = layer.maxzoom || 24
+        this.source = layer.source
+        /**@type {string} */
+        this.sourceLayer = layer['source-layer']
+        /**@type {import("@maplibre/maplibre-gl-style-spec").FeatureFilter|null} */
+        this.filter = null
+        this.paint = new StyleLayerProperties('paint_' + layer.type, layer.paint)
+        this.layout = new StyleLayerProperties('layout_' + layer.type, layer.layout)
+        if (layer.filter) {
+            this.filter = featureFilter(layer.filter)
+        }
+    }
+
+    /**
+     * 转换图层样式颜色，内部进行预乘Alpha的逆处理，@maplibre/maplibre-gl-style-spec内部会自动对颜色进行premultiplyAlpha操作，直接使用会出现明显的色差
+     * @param {Color} styleColor 
+     * @param {Cesium.Color} [result] 
+     * @returns 
+     */
+    convertColor(styleColor, result) {
+        const alphaScalar = styleColor.a > 0 ? 1. / styleColor.a : 1
+        if (!result) {
+            result = new Cesium.Color()
+        }
+        result.red = styleColor.r * alphaScalar
+        result.green = styleColor.g * alphaScalar
+        result.blue = styleColor.b * alphaScalar
+        result.alpha = styleColor.a
+        return result
+    }
+}

package/Source/style/StyleLayerProperties.js

@@ -0,0 +1,43 @@
+import { expression, latest } from '@maplibre/maplibre-gl-style-spec'
+
+export class StyleLayerProperties {
+    constructor(groupName, styleProperties = {}) {
+        this.data = styleProperties
+        /**@type {Map<string,import('@maplibre/maplibre-gl-style-spec').StylePropertyExpression>} */
+        this.props = new Map()
+
+        const groupReference = latest[groupName]
+        for (const key in groupReference) {
+            if (Object.hasOwnProperty.call(groupReference, key)) {
+                const reference = groupReference[key];
+                const value = styleProperties[key];
+                const property = expression.normalizePropertyExpression(
+                    value === undefined ? reference.default : value, reference,
+                )
+                this.props.set(key, property)
+            }
+        }
+    }
+
+    /**
+     * Replace tokens in a string template with values in an object
+     *
+     * @param properties - a key/value relationship between tokens and replacements
+     * @param text - the template string
+     * @returns the template with tokens replaced
+     */
+    resolveTokens(properties, text) {
+        return text.replace(/{([^{}]+)}/g, (match, key) => {
+            return properties && key in properties ? String(properties[key]) : '';
+        });
+    }
+    getDataConstValue(name, zoom) {
+        const expr = this.props.get(name)
+        return expr && expr.evaluate({ zoom })
+    }
+
+    getDataValue(name, zoom, feature) {
+        const expr = this.props.get(name)
+        return expr && expr.evaluate({ zoom }, feature)
+    }
+}

package/Source/style/index.js

@@ -0,0 +1,2 @@
+export { StyleLayerProperties } from "./StyleLayerProperties";
+export { StyleLayer } from "./StyleLayer";