@mesh3d/cesium-vectortile-gl 0.4.4 → 0.4.6

package/Source/sources/GeoJSONSource.js

@@ -1,46 +1,53 @@
-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)
+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

@@ -1,39 +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
-    }
-}
+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

@@ -1,52 +1,94 @@
-import { ISource } from "./ISource";
-import { registerSource } from "./registerSource";
-import { VectorTile, VectorTileFeature } from '@mapbox/vector-tile'
-import { MLTVectorTile } from 'maplibre-gl/src/source/vector_tile_mlt'
-import Pbf from 'pbf'
-
-export class VectorSource extends ISource {
-    constructor(styleSource, path) {
-        super(styleSource, path)
-        /**@type {Cesium.WebMercatorTilingScheme} */
-        this.tilingScheme = new Cesium.WebMercatorTilingScheme()
-    }
-
-    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
-        if (sourceParams.scheme === 'tms') {
-            const numOfY = this.tilingScheme.getNumberOfYTilesAtLevel(z)
-            y = numOfY - y - 1
-        }
-        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 = sourceParams.encoding == 'mlt' ? new MLTVectorTile(tileBuf) : new VectorTile(new Pbf(tileBuf))
-            return tileData
-        } catch (err) {
-            this.errorEvent.raiseEvent(err)
-        }
-    }
-}
-
-registerSource('vector', VectorSource)
+import { ISource } from './ISource'
+import { registerSource } from './registerSource'
+import { VectorTile, VectorTileFeature } from '@mapbox/vector-tile'
+import { MLTVectorTile } from 'maplibre-gl/src/source/vector_tile_mlt'
+import Pbf from 'pbf'
+
+export class VectorSource extends ISource {
+  constructor(styleSource, path) {
+    super(styleSource, path)
+    /**@type {Cesium.WebMercatorTilingScheme} */
+    this.tilingScheme = new Cesium.WebMercatorTilingScheme()
+  }
+
+  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
+    if (sourceParams.scheme === 'tms') {
+      const numOfY = this.tilingScheme.getNumberOfYTilesAtLevel(z)
+      y = numOfY - y - 1
+    }
+    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 =
+        sourceParams.encoding == 'mlt'
+          ? new MLTVectorTile(tileBuf)
+          : new VectorTile(new Pbf(tileBuf))
+      return tileData
+    } catch (err) {
+      this.errorEvent.raiseEvent(err)
+    }
+  }
+
+  /**
+   * 仅拉取瓦片 ArrayBuffer，不解析；供 Web Worker 路径使用。
+   * @param {number} x
+   * @param {number} y
+   * @param {number} z
+   * @param {import('../../VectorTileset').VectorTileset} [tileset]
+   * @returns {Promise<{buffer:ArrayBuffer,encoding:string}|undefined>}
+   */
+  async requestTileBuffer(x, y, z, tileset) {
+    const sourceParams = this.styleSource
+    if (!sourceParams.tiles || !sourceParams.tiles.length) return
+    if (sourceParams.scheme === 'tms') {
+      const numOfY = this.tilingScheme.getNumberOfYTilesAtLevel(z)
+      y = numOfY - y - 1
+    }
+    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 buffer = await fetch(tileUrl).then(res => res.arrayBuffer())
+      const encoding = sourceParams.encoding === 'mlt' ? 'mlt' : 'mvt'
+      return { buffer, encoding }
+    } catch (err) {
+      this.errorEvent.raiseEvent(err)
+    }
+  }
+}
+
+registerSource('vector', VectorSource)

package/Source/sources/granularitySettings.js

@@ -1,20 +1,23 @@
-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 }
+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

@@ -1,11 +1,6 @@
-
-import { ISource } from './ISource'
-import { registerSource, Sources } from './registerSource'
-import { VectorSource } from './VectorSource'
-import { GeoJSONSource } from './GeoJSONSource'
-
-export {
-    ISource, registerSource, Sources,
-    VectorSource,
-    GeoJSONSource
-}
+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

@@ -1,19 +1,17 @@
-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
-}
+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

@@ -1,43 +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
-    }
-}
+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

@@ -1,43 +1,44 @@
-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)
-    }
-}
+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

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