@mapgis/mapbox-gl 1.9.12 → 16.0.0

package/src/source/query_features.js

@@ -0,0 +1,208 @@
+// @flow
+
+import type SourceCache from './source_cache';
+import type StyleLayer from '../style/style_layer';
+import type CollisionIndex from '../symbol/collision_index';
+import type Transform from '../geo/transform';
+import type {RetainedQueryData} from '../symbol/placement';
+import type {FilterSpecification} from '../style-spec/types';
+import assert from 'assert';
+import {mat4} from 'gl-matrix';
+
+/*
+ * Returns a matrix that can be used to convert from tile coordinates to viewport pixel coordinates.
+ */
+function getPixelPosMatrix(transform, tileID) {
+    const t = mat4.identity([]);
+    mat4.translate(t, t, [1, 1, 0]);
+    mat4.scale(t, t, [transform.width * 0.5, transform.height * 0.5, 1]);
+    return mat4.multiply(t, t, transform.calculatePosMatrix(tileID.toUnwrapped()));
+}
+
+function queryIncludes3DLayer(layers?: Array<string>, styleLayers: {[_: string]: StyleLayer}, sourceID: string) {
+    if (layers) {
+        for (const layerID of layers) {
+            const layer = styleLayers[layerID];
+            if (layer && layer.source === sourceID && layer.type === 'fill-extrusion') {
+                return true;
+            }
+        }
+    } else {
+        for (const key in styleLayers) {
+            const layer = styleLayers[key];
+            if (layer.source === sourceID && layer.type === 'fill-extrusion') {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+
+export function queryRenderedFeatures(sourceCache: SourceCache,
+                            styleLayers: {[_: string]: StyleLayer},
+                            serializedLayers: {[_: string]: Object},
+                            queryGeometry: Array<Point>,
+                            params: { filter: FilterSpecification, layers: Array<string>, availableImages: Array<string> },
+                            transform: Transform) {
+
+    const has3DLayer = queryIncludes3DLayer(params && params.layers, styleLayers, sourceCache.id);
+    const maxPitchScaleFactor = transform.maxPitchScaleFactor();
+    const tilesIn = sourceCache.tilesIn(queryGeometry, maxPitchScaleFactor, has3DLayer);
+
+    tilesIn.sort(sortTilesIn);
+    const renderedFeatureLayers = [];
+    for (const tileIn of tilesIn) {
+        renderedFeatureLayers.push({
+            wrappedTileID: tileIn.tileID.wrapped().key,
+            queryResults: tileIn.tile.queryRenderedFeatures(
+                styleLayers,
+                serializedLayers,
+                sourceCache._state,
+                tileIn.queryGeometry,
+                tileIn.cameraQueryGeometry,
+                tileIn.scale,
+                params,
+                transform,
+                maxPitchScaleFactor,
+                getPixelPosMatrix(sourceCache.transform, tileIn.tileID))
+        });
+    }
+
+    const result = mergeRenderedFeatureLayers(renderedFeatureLayers);
+
+    // Merge state from SourceCache into the results
+    for (const layerID in result) {
+        result[layerID].forEach((featureWrapper) => {
+            const feature = featureWrapper.feature;
+            const state = sourceCache.getFeatureState(feature.layer['source-layer'], feature.id);
+            feature.source = feature.layer.source;
+            if (feature.layer['source-layer']) {
+                feature.sourceLayer = feature.layer['source-layer'];
+            }
+            feature.state = state;
+        });
+    }
+    return result;
+}
+
+export function queryRenderedSymbols(styleLayers: {[_: string]: StyleLayer},
+                            serializedLayers: {[_: string]: StyleLayer},
+                            sourceCaches: {[_: string]: SourceCache},
+                            queryGeometry: Array<Point>,
+                            params: { filter: FilterSpecification, layers: Array<string>, availableImages: Array<string> },
+                            collisionIndex: CollisionIndex,
+                            retainedQueryData: {[_: number]: RetainedQueryData}) {
+    const result = {};
+    const renderedSymbols = collisionIndex.queryRenderedSymbols(queryGeometry);
+    const bucketQueryData = [];
+    for (const bucketInstanceId of Object.keys(renderedSymbols).map(Number)) {
+        bucketQueryData.push(retainedQueryData[bucketInstanceId]);
+    }
+    bucketQueryData.sort(sortTilesIn);
+
+    for (const queryData of bucketQueryData) {
+        const bucketSymbols = queryData.featureIndex.lookupSymbolFeatures(
+                renderedSymbols[queryData.bucketInstanceId],
+                serializedLayers,
+                queryData.bucketIndex,
+                queryData.sourceLayerIndex,
+                params.filter,
+                params.layers,
+                params.availableImages,
+                styleLayers);
+
+        for (const layerID in bucketSymbols) {
+            const resultFeatures = result[layerID] = result[layerID] || [];
+            const layerSymbols = bucketSymbols[layerID];
+            layerSymbols.sort((a, b) => {
+                // Match topDownFeatureComparator from FeatureIndex, but using
+                // most recent sorting of features from bucket.sortFeatures
+                const featureSortOrder = queryData.featureSortOrder;
+                if (featureSortOrder) {
+                    // queryRenderedSymbols documentation says we'll return features in
+                    // "top-to-bottom" rendering order (aka last-to-first).
+                    // Actually there can be multiple symbol instances per feature, so
+                    // we sort each feature based on the first matching symbol instance.
+                    const sortedA = featureSortOrder.indexOf(a.featureIndex);
+                    const sortedB = featureSortOrder.indexOf(b.featureIndex);
+                    assert(sortedA >= 0);
+                    assert(sortedB >= 0);
+                    return sortedB - sortedA;
+                } else {
+                    // Bucket hasn't been re-sorted based on angle, so use the
+                    // reverse of the order the features appeared in the data.
+                    return b.featureIndex - a.featureIndex;
+                }
+            });
+            for (const symbolFeature of layerSymbols) {
+                resultFeatures.push(symbolFeature);
+            }
+        }
+    }
+
+    // Merge state from SourceCache into the results
+    for (const layerName in result) {
+        result[layerName].forEach((featureWrapper) => {
+            const feature = featureWrapper.feature;
+            const layer = styleLayers[layerName];
+            const sourceCache = sourceCaches[layer.source];
+            const state = sourceCache.getFeatureState(feature.layer['source-layer'], feature.id);
+            feature.source = feature.layer.source;
+            if (feature.layer['source-layer']) {
+                feature.sourceLayer = feature.layer['source-layer'];
+            }
+            feature.state = state;
+        });
+    }
+    return result;
+}
+
+export function querySourceFeatures(sourceCache: SourceCache, params: any) {
+    const tiles = sourceCache.getRenderableIds().map((id) => {
+        return sourceCache.getTileByID(id);
+    });
+
+    const result = [];
+
+    const dataTiles = {};
+    for (let i = 0; i < tiles.length; i++) {
+        const tile = tiles[i];
+        const dataID = tile.tileID.canonical.key;
+        if (!dataTiles[dataID]) {
+            dataTiles[dataID] = true;
+            tile.querySourceFeatures(result, params);
+        }
+    }
+
+    return result;
+}
+
+function sortTilesIn(a, b) {
+    const idA = a.tileID;
+    const idB = b.tileID;
+    return (idA.overscaledZ - idB.overscaledZ) || (idA.canonical.y - idB.canonical.y) || (idA.wrap - idB.wrap) || (idA.canonical.x - idB.canonical.x);
+}
+
+function mergeRenderedFeatureLayers(tiles) {
+    // Merge results from all tiles, but if two tiles share the same
+    // wrapped ID, don't duplicate features between the two tiles
+    const result = {};
+    const wrappedIDLayerMap = {};
+    for (const tile of tiles) {
+        const queryResults = tile.queryResults;
+        const wrappedID = tile.wrappedTileID;
+        const wrappedIDLayers = wrappedIDLayerMap[wrappedID] = wrappedIDLayerMap[wrappedID] || {};
+        for (const layerID in queryResults) {
+            const tileFeatures = queryResults[layerID];
+            const wrappedIDFeatures = wrappedIDLayers[layerID] = wrappedIDLayers[layerID] || {};
+            const resultFeatures = result[layerID] = result[layerID] || [];
+            for (const tileFeature of tileFeatures) {
+                if (!wrappedIDFeatures[tileFeature.featureIndex]) {
+                    wrappedIDFeatures[tileFeature.featureIndex] = true;
+                    resultFeatures.push(tileFeature);
+                }
+            }
+        }
+    }
+    return result;
+}

package/src/source/raster_dem_tile_source.js

@@ -0,0 +1,138 @@
+// @flow
+
+import {getImage, ResourceType} from '../util/ajax';
+import {extend} from '../util/util';
+import {Evented} from '../util/evented';
+import browser from '../util/browser';
+import window from '../util/window';
+import offscreenCanvasSupported from '../util/offscreen_canvas_supported';
+import {OverscaledTileID} from './tile_id';
+import RasterTileSource from './raster_tile_source';
+// ensure DEMData is registered for worker transfer on main thread:
+import '../data/dem_data';
+
+import type {Source} from './source';
+import type Dispatcher from '../util/dispatcher';
+import type Tile from './tile';
+import type {Callback} from '../types/callback';
+import type {RasterDEMSourceSpecification} from '../style-spec/types';
+
+class RasterDEMTileSource extends RasterTileSource implements Source {
+    encoding: "mapbox" | "terrarium";
+
+    constructor(id: string, options: RasterDEMSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented) {
+        super(id, options, dispatcher, eventedParent);
+        this.type = 'raster-dem';
+        this.maxzoom = 22;
+        this._options = extend({type: 'raster-dem'}, options);
+        this.encoding = options.encoding || "mapbox";
+    }
+
+    serialize() {
+        return {
+            type: 'raster-dem',
+            url: this.url,
+            tileSize: this.tileSize,
+            tiles: this.tiles,
+            bounds: this.bounds,
+            encoding: this.encoding
+        };
+    }
+
+    loadTile(tile: Tile, callback: Callback<void>) {
+        const url = this.map._requestManager.normalizeTileURL(tile.tileID.canonical.url(this.tiles, this.scheme), this.tileSize);
+        tile.request = getImage(this.map._requestManager.transformRequest(url, ResourceType.Tile), imageLoaded.bind(this));
+
+        tile.neighboringTiles = this._getNeighboringTiles(tile.tileID);
+        function imageLoaded(err, img) {
+            delete tile.request;
+            if (tile.aborted) {
+                tile.state = 'unloaded';
+                callback(null);
+            } else if (err) {
+                tile.state = 'errored';
+                callback(err);
+            } else if (img) {
+                if (this.map._refreshExpiredTiles) tile.setExpiryData(img);
+                delete (img: any).cacheControl;
+                delete (img: any).expires;
+                const transfer = window.ImageBitmap && img instanceof window.ImageBitmap && offscreenCanvasSupported();
+                const rawImageData = transfer ? img : browser.getImageData(img, 1);
+                const params = {
+                    uid: tile.uid,
+                    coord: tile.tileID,
+                    source: this.id,
+                    rawImageData,
+                    encoding: this.encoding
+                };
+
+                if (!tile.actor || tile.state === 'expired') {
+                    tile.actor = this.dispatcher.getActor();
+                    tile.actor.send('loadDEMTile', params, done.bind(this));
+                }
+            }
+        }
+
+        function done(err, dem) {
+            if (err) {
+                tile.state = 'errored';
+                callback(err);
+            }
+
+            if (dem) {
+                tile.dem = dem;
+                tile.needsHillshadePrepare = true;
+                tile.state = 'loaded';
+                callback(null);
+            }
+        }
+    }
+
+    _getNeighboringTiles(tileID: OverscaledTileID) {
+        const canonical = tileID.canonical;
+        const dim = Math.pow(2, canonical.z);
+
+        const px = (canonical.x - 1 + dim) % dim;
+        const pxw = canonical.x === 0 ? tileID.wrap - 1 : tileID.wrap;
+        const nx = (canonical.x + 1 + dim) % dim;
+        const nxw = canonical.x + 1 === dim ? tileID.wrap + 1 : tileID.wrap;
+
+        const neighboringTiles = {};
+        // add adjacent tiles
+        neighboringTiles[new OverscaledTileID(tileID.overscaledZ, pxw, canonical.z, px, canonical.y).key] = {backfilled: false};
+        neighboringTiles[new OverscaledTileID(tileID.overscaledZ, nxw, canonical.z, nx, canonical.y).key] = {backfilled: false};
+
+        // Add upper neighboringTiles
+        if (canonical.y > 0) {
+            neighboringTiles[new OverscaledTileID(tileID.overscaledZ, pxw, canonical.z, px, canonical.y - 1).key] = {backfilled: false};
+            neighboringTiles[new OverscaledTileID(tileID.overscaledZ, tileID.wrap, canonical.z, canonical.x, canonical.y - 1).key] = {backfilled: false};
+            neighboringTiles[new OverscaledTileID(tileID.overscaledZ, nxw, canonical.z, nx, canonical.y - 1).key] = {backfilled: false};
+        }
+        // Add lower neighboringTiles
+        if (canonical.y + 1 < dim) {
+            neighboringTiles[new OverscaledTileID(tileID.overscaledZ, pxw, canonical.z, px, canonical.y + 1).key] = {backfilled: false};
+            neighboringTiles[new OverscaledTileID(tileID.overscaledZ, tileID.wrap, canonical.z, canonical.x, canonical.y + 1).key] = {backfilled: false};
+            neighboringTiles[new OverscaledTileID(tileID.overscaledZ, nxw, canonical.z, nx, canonical.y + 1).key] = {backfilled: false};
+        }
+
+        return neighboringTiles;
+    }
+
+    unloadTile(tile: Tile) {
+        if (tile.demTexture) this.map.painter.saveTileTexture(tile.demTexture);
+        if (tile.fbo) {
+            tile.fbo.destroy();
+            delete tile.fbo;
+        }
+        if (tile.dem) delete tile.dem;
+        delete tile.neighboringTiles;
+
+        tile.state = 'unloaded';
+        if (tile.actor) {
+            tile.actor.send('removeDEMTile', {uid: tile.uid, source: this.id});
+        }
+    }
+
+}
+
+export default RasterDEMTileSource;

package/src/source/raster_dem_tile_worker_source.js

@@ -0,0 +1,62 @@
+// @flow
+
+import DEMData from '../data/dem_data';
+import {RGBAImage} from '../util/image';
+import window from '../util/window';
+
+import type Actor from '../util/actor';
+import type {
+    WorkerDEMTileParameters,
+    WorkerDEMTileCallback,
+    TileParameters
+} from './worker_source';
+const {ImageBitmap} = window;
+
+class RasterDEMTileWorkerSource {
+    actor: Actor;
+    loaded: {[_: string]: DEMData};
+    offscreenCanvas: OffscreenCanvas;
+    offscreenCanvasContext: CanvasRenderingContext2D;
+
+    constructor() {
+        this.loaded = {};
+    }
+
+    loadTile(params: WorkerDEMTileParameters, callback: WorkerDEMTileCallback) {
+        const {uid, encoding, rawImageData} = params;
+        // Main thread will transfer ImageBitmap if offscreen decode with OffscreenCanvas is supported, else it will transfer an already decoded image.
+        const imagePixels = (ImageBitmap && rawImageData instanceof ImageBitmap) ? this.getImageData(rawImageData) : rawImageData;
+        const dem = new DEMData(uid, imagePixels, encoding);
+        this.loaded = this.loaded || {};
+        this.loaded[uid] = dem;
+        callback(null, dem);
+    }
+
+    getImageData(imgBitmap: ImageBitmap): RGBAImage {
+        // Lazily initialize OffscreenCanvas
+        if (!this.offscreenCanvas || !this.offscreenCanvasContext) {
+            // Dem tiles are typically 256x256
+            this.offscreenCanvas = new OffscreenCanvas(imgBitmap.width, imgBitmap.height);
+            this.offscreenCanvasContext = this.offscreenCanvas.getContext('2d');
+        }
+
+        this.offscreenCanvas.width = imgBitmap.width;
+        this.offscreenCanvas.height = imgBitmap.height;
+
+        this.offscreenCanvasContext.drawImage(imgBitmap, 0, 0, imgBitmap.width, imgBitmap.height);
+        // Insert an additional 1px padding around the image to allow backfilling for neighboring data.
+        const imgData = this.offscreenCanvasContext.getImageData(-1, -1, imgBitmap.width + 2, imgBitmap.height + 2);
+        this.offscreenCanvasContext.clearRect(0, 0, this.offscreenCanvas.width, this.offscreenCanvas.height);
+        return new RGBAImage({width: imgData.width, height: imgData.height}, imgData.data);
+    }
+
+    removeTile(params: TileParameters) {
+        const loaded = this.loaded,
+            uid = params.uid;
+        if (loaded && loaded[uid]) {
+            delete loaded[uid];
+        }
+    }
+}
+
+export default RasterDEMTileWorkerSource;

package/src/source/raster_tile_offline_source.js

@@ -0,0 +1,136 @@
+import RasterTileSource from './raster_tile_source';
+import { extend, pick } from '../util/util';
+import Texture from '../render/texture';
+import Database from './offline_database'
+
+class RasterTileSourceOffline extends RasterTileSource {
+
+    constructor(id, options, dispatcher, eventedParent) {
+        super(id, options, dispatcher, eventedParent);
+        this.id = id;
+        this.dispatcher = dispatcher;
+        this.setEventedParent(eventedParent);
+
+        this.type = 'rasteroffline';
+        this.minzoom = 0;
+        this.maxzoom = 22;
+        this.roundZoom = true;
+        this.scheme = 'xyz';
+        this.tileSize = 512;
+        this.imageFormat = 'png';
+        this._loaded = false;
+        this._options = extend({}, options);
+        extend(this, pick(options, ['scheme', 'tileSize', 'imageFormat']));
+
+        this._transparentPngUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=';
+
+        this.db = this.openDatabase(options.path)
+    }
+
+    openDatabase(dbLocation) {
+        return Database.openDatabase(dbLocation)
+    }
+
+    copyDatabaseFile(dbLocation, dbName, targetDir) {
+        return Database.copyDatabaseFile(dbLocation, dbName, targetDir)
+    }
+
+    loadTile(tile, callback) {
+
+        tile.request = this._getImage(tile.tileID.canonical, done.bind(this));
+
+        function done(err, img) {
+            delete tile.request;
+
+            if (tile.aborted) {
+                tile.state = 'unloaded';
+                callback(null);
+            } else if (err) {
+                tile.state = 'errored';
+                callback(err);
+            } else if (img) {
+                if (this.map._refreshExpiredTiles) tile.setExpiryData(img);
+                delete img.cacheControl;
+                delete img.expires;
+
+                const context = this.map.painter.context;
+                const gl = context.gl;
+                tile.texture = this.map.painter.getTileTexture(img.width);
+                if (tile.texture) {
+                    tile.texture.update(img, { useMipmap: true });
+                } else {
+                    tile.texture = new Texture(context, img, gl.RGBA, { useMipmap: true });
+                    tile.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE, gl.LINEAR_MIPMAP_NEAREST);
+
+                    if (context.extTextureFilterAnisotropic) {
+                        gl.texParameterf(gl.TEXTURE_2D, context.extTextureFilterAnisotropic.TEXTURE_MAX_ANISOTROPY_EXT,
+                            context.extTextureFilterAnisotropicMax);
+                    }
+                }
+
+                tile.state = 'loaded';
+
+                callback(null);
+            }
+        }
+    }
+
+    _getBlob(coord, callback){
+
+        const coordY = Math.pow(2, coord.z) -1 - coord.y;
+
+        const query = 'SELECT BASE64(tile_data) AS base64_tile_data FROM tiles WHERE zoom_level = ? AND tile_column = ? AND tile_row = ?';
+        const params = [coord.z, coord.x, coordY];
+
+        const base64Prefix = 'data:image/' + this.imageFormat + ';base64,';
+
+        this.db.then((db) => {
+            db.transaction((txn) => {
+                txn.executeSql(query, params, (tx, res) => {
+                    if (res.rows.length) {
+                        callback(undefined,
+                            {
+                                data: base64Prefix + res.rows.item(0).base64_tile_data,
+                                cacheControl: null,
+                                expires: null
+                            });
+
+                    } else {
+                        console.error('tile ' + params.join(',') + ' not found');
+                        callback(undefined,
+                            {
+                                data: this._transparentPngUrl,
+                                cacheControl: null,
+                                expires: null
+                            });
+                    }
+                });
+            }, (error) => {
+                callback(error); // Error executing SQL
+            });
+        }).catch((err) => {
+            callback(err);
+        });
+    }
+
+
+    _getImage(coord, callback) {
+
+        return this._getBlob(coord, (err, imgData) => {
+            if (err) return callback(err);
+
+            const img = new window.Image();
+            const URL = window.URL || window.webkitURL;
+            img.onload = () => {
+                callback(null, img);
+                URL.revokeObjectURL(img.src);
+            };
+            img.cacheControl = imgData.cacheControl;
+            img.expires = imgData.expires;
+            img.src = imgData.data;
+        });
+
+    }
+}
+
+export default RasterTileSourceOffline;