mapbox-gl 1.13.2

package/src/data/bucket.js

@@ -0,0 +1,123 @@
+// @flow
+
+import type {CollisionBoxArray} from './array_types';
+import type Style from '../style/style';
+import type {TypedStyleLayer} from '../style/style_layer/typed_style_layer';
+import type FeatureIndex from './feature_index';
+import type Context from '../gl/context';
+import type {FeatureStates} from '../source/source_state';
+import type {ImagePosition} from '../render/image_atlas';
+import type {CanonicalTileID} from '../source/tile_id';
+
+export type BucketParameters<Layer: TypedStyleLayer> = {
+    index: number,
+    layers: Array<Layer>,
+    zoom: number,
+    pixelRatio: number,
+    overscaling: number,
+    collisionBoxArray: CollisionBoxArray,
+    sourceLayerIndex: number,
+    sourceID: string
+}
+
+export type PopulateParameters = {
+    featureIndex: FeatureIndex,
+    iconDependencies: {},
+    patternDependencies: {},
+    glyphDependencies: {},
+    availableImages: Array<string>
+}
+
+export type IndexedFeature = {
+    feature: VectorTileFeature,
+    id: number | string,
+    index: number,
+    sourceLayerIndex: number,
+}
+
+export type BucketFeature = {|
+    index: number,
+    sourceLayerIndex: number,
+    geometry: Array<Array<Point>>,
+    properties: Object,
+    type: 1 | 2 | 3,
+    id?: any,
+    +patterns: {[_: string]: {"min": string, "mid": string, "max": string}},
+    sortKey?: number
+|};
+
+/**
+ * The `Bucket` interface is the single point of knowledge about turning vector
+ * tiles into WebGL buffers.
+ *
+ * `Bucket` is an abstract interface. An implementation exists for each style layer type.
+ * Create a bucket via the `StyleLayer#createBucket` method.
+ *
+ * The concrete bucket types, using layout options from the style layer,
+ * transform feature geometries into vertex and index data for use by the
+ * vertex shader.  They also (via `ProgramConfiguration`) use feature
+ * properties and the zoom level to populate the attributes needed for
+ * data-driven styling.
+ *
+ * Buckets are designed to be built on a worker thread and then serialized and
+ * transferred back to the main thread for rendering.  On the worker side, a
+ * bucket's vertex, index, and attribute data is stored in `bucket.arrays:
+ * ArrayGroup`.  When a bucket's data is serialized and sent back to the main
+ * thread, is gets deserialized (using `new Bucket(serializedBucketData)`, with
+ * the array data now stored in `bucket.buffers: BufferGroup`.  BufferGroups
+ * hold the same data as ArrayGroups, but are tuned for consumption by WebGL.
+ *
+ * @private
+ */
+export interface Bucket {
+    layerIds: Array<string>;
+    hasPattern: boolean;
+    +layers: Array<any>;
+    +stateDependentLayers: Array<any>;
+    +stateDependentLayerIds: Array<string>;
+    populate(features: Array<IndexedFeature>, options: PopulateParameters, canonical: CanonicalTileID): void;
+    update(states: FeatureStates, vtLayer: VectorTileLayer, imagePositions: {[_: string]: ImagePosition}): void;
+    isEmpty(): boolean;
+
+    upload(context: Context): void;
+    uploadPending(): boolean;
+
+    /**
+     * Release the WebGL resources associated with the buffers. Note that because
+     * buckets are shared between layers having the same layout properties, they
+     * must be destroyed in groups (all buckets for a tile, or all symbol buckets).
+     *
+     * @private
+     */
+    destroy(): void;
+}
+
+export function deserialize(input: Array<Bucket>, style: Style): {[_: string]: Bucket} {
+    const output = {};
+
+    // Guard against the case where the map's style has been set to null while
+    // this bucket has been parsing.
+    if (!style) return output;
+
+    for (const bucket of input) {
+        const layers = bucket.layerIds
+            .map((id) => style.getLayer(id))
+            .filter(Boolean);
+
+        if (layers.length === 0) {
+            continue;
+        }
+
+        // look up StyleLayer objects from layer ids (since we don't
+        // want to waste time serializing/copying them from the worker)
+        (bucket: any).layers = layers;
+        if ((bucket: any).stateDependentLayerIds) {
+            (bucket: any).stateDependentLayers = (bucket: any).stateDependentLayerIds.map((lId) => layers.filter((l) => l.id === lId)[0]);
+        }
+        for (const layer of layers) {
+            output[layer.id] = bucket;
+        }
+    }
+
+    return output;
+}

package/src/data/dem_data.js

@@ -0,0 +1,125 @@
+// @flow
+import {RGBAImage} from '../util/image';
+
+import {warnOnce} from '../util/util';
+import {register} from '../util/web_worker_transfer';
+
+// DEMData is a data structure for decoding, backfilling, and storing elevation data for processing in the hillshade shaders
+// data can be populated either from a pngraw image tile or from serliazed data sent back from a worker. When data is initially
+// loaded from a image tile, we decode the pixel values using the appropriate decoding formula, but we store the
+// elevation data as an Int32 value. we add 65536 (2^16) to eliminate negative values and enable the use of
+// integer overflow when creating the texture used in the hillshadePrepare step.
+
+// DEMData also handles the backfilling of data from a tile's neighboring tiles. This is necessary because we use a pixel's 8
+// surrounding pixel values to compute the slope at that pixel, and we cannot accurately calculate the slope at pixels on a
+// tile's edge without backfilling from neighboring tiles.
+
+export default class DEMData {
+    uid: string;
+    data: Uint32Array;
+    stride: number;
+    dim: number;
+    encoding: "mapbox" | "terrarium";
+
+    // RGBAImage data has uniform 1px padding on all sides: square tile edge size defines stride
+    // and dim is calculated as stride - 2.
+    constructor(uid: string, data: RGBAImage, encoding: "mapbox" | "terrarium") {
+        this.uid = uid;
+        if (data.height !== data.width) throw new RangeError('DEM tiles must be square');
+        if (encoding && encoding !== "mapbox" && encoding !== "terrarium") return warnOnce(
+            `"${encoding}" is not a valid encoding type. Valid types include "mapbox" and "terrarium".`
+        );
+        this.stride = data.height;
+        const dim = this.dim = data.height - 2;
+        this.data = new Uint32Array(data.data.buffer);
+        this.encoding = encoding || 'mapbox';
+
+        // in order to avoid flashing seams between tiles, here we are initially populating a 1px border of pixels around the image
+        // with the data of the nearest pixel from the image. this data is eventually replaced when the tile's neighboring
+        // tiles are loaded and the accurate data can be backfilled using DEMData#backfillBorder
+        for (let x = 0; x < dim; x++) {
+            // left vertical border
+            this.data[this._idx(-1, x)] = this.data[this._idx(0, x)];
+            // right vertical border
+            this.data[this._idx(dim, x)] = this.data[this._idx(dim - 1, x)];
+            // left horizontal border
+            this.data[this._idx(x, -1)] = this.data[this._idx(x, 0)];
+            // right horizontal border
+            this.data[this._idx(x, dim)] = this.data[this._idx(x, dim - 1)];
+        }
+        // corners
+        this.data[this._idx(-1, -1)] = this.data[this._idx(0, 0)];
+        this.data[this._idx(dim, -1)] = this.data[this._idx(dim - 1, 0)];
+        this.data[this._idx(-1, dim)] = this.data[this._idx(0, dim - 1)];
+        this.data[this._idx(dim, dim)] = this.data[this._idx(dim - 1, dim - 1)];
+    }
+
+    get(x: number, y: number) {
+        const pixels = new Uint8Array(this.data.buffer);
+        const index = this._idx(x, y) * 4;
+        const unpack = this.encoding === "terrarium" ? this._unpackTerrarium : this._unpackMapbox;
+        return unpack(pixels[index], pixels[index + 1], pixels[index + 2]);
+    }
+
+    getUnpackVector() {
+        return this.encoding === "terrarium" ? [256.0, 1.0, 1.0 / 256.0, 32768.0] : [6553.6, 25.6, 0.1, 10000.0];
+    }
+
+    _idx(x: number, y: number) {
+        if (x < -1 || x >= this.dim + 1 ||  y < -1 || y >= this.dim + 1) throw new RangeError('out of range source coordinates for DEM data');
+        return (y + 1) * this.stride + (x + 1);
+    }
+
+    _unpackMapbox(r: number, g: number, b: number) {
+        // unpacking formula for mapbox.terrain-rgb:
+        // https://www.mapbox.com/help/access-elevation-data/#mapbox-terrain-rgb
+        return ((r * 256 * 256 + g * 256.0 + b) / 10.0 - 10000.0);
+    }
+
+    _unpackTerrarium(r: number, g: number, b: number) {
+        // unpacking formula for mapzen terrarium:
+        // https://aws.amazon.com/public-datasets/terrain/
+        return ((r * 256 + g + b / 256) - 32768.0);
+    }
+
+    getPixels() {
+        return new RGBAImage({width: this.stride, height: this.stride}, new Uint8Array(this.data.buffer));
+    }
+
+    backfillBorder(borderTile: DEMData, dx: number, dy: number) {
+        if (this.dim !== borderTile.dim) throw new Error('dem dimension mismatch');
+
+        let xMin = dx * this.dim,
+            xMax = dx * this.dim + this.dim,
+            yMin = dy * this.dim,
+            yMax = dy * this.dim + this.dim;
+
+        switch (dx) {
+        case -1:
+            xMin = xMax - 1;
+            break;
+        case 1:
+            xMax = xMin + 1;
+            break;
+        }
+
+        switch (dy) {
+        case -1:
+            yMin = yMax - 1;
+            break;
+        case 1:
+            yMax = yMin + 1;
+            break;
+        }
+
+        const ox = -dx * this.dim;
+        const oy = -dy * this.dim;
+        for (let y = yMin; y < yMax; y++) {
+            for (let x = xMin; x < xMax; x++) {
+                this.data[this._idx(x, y)] = borderTile.data[this._idx(x + ox, y + oy)];
+            }
+        }
+    }
+}
+
+register('DEMData', DEMData);

package/src/data/evaluation_feature.js

@@ -0,0 +1,25 @@
+// @flow
+
+import loadGeometry from './load_geometry';
+
+type EvaluationFeature = {
+    +type: 1 | 2 | 3 | 'Unknown' | 'Point' | 'MultiPoint' | 'LineString' | 'MultiLineString' | 'Polygon' | 'MultiPolygon',
+    +id?: any,
+    +properties: {[_: string]: any},
+    +patterns?: {[_: string]: {"min": string, "mid": string, "max": string}},
+    geometry: Array<Array<Point>>
+};
+
+/**
+ * Construct a new feature based on a VectorTileFeature for expression evaluation, the geometry of which
+ * will be loaded based on necessity.
+ * @param {VectorTileFeature} feature
+ * @param {boolean} needGeometry
+ * @private
+ */
+export default function toEvaluationFeature(feature: VectorTileFeature, needGeometry: boolean): EvaluationFeature {
+    return {type: feature.type,
+        id: feature.id,
+        properties:feature.properties,
+        geometry: needGeometry ? loadGeometry(feature) : []};
+}

package/src/data/extent.js

@@ -0,0 +1,18 @@
+// @flow
+
+/**
+ * The maximum value of a coordinate in the internal tile coordinate system. Coordinates of
+ * all source features normalized to this extent upon load.
+ *
+ * The value is a consequence of the following:
+ *
+ * * Vertex buffer store positions as signed 16 bit integers.
+ * * One bit is lost for signedness to support tile buffers.
+ * * One bit is lost because the line vertex buffer used to pack 1 bit of other data into the int.
+ * * One bit is lost to support features extending past the extent on the right edge of the tile.
+ * * This leaves us with 2^13 = 8192
+ *
+ * @private
+ * @readonly
+ */
+export default 8192;

package/src/data/feature_index.js

@@ -0,0 +1,322 @@
+// @flow
+
+import Point from '@mapbox/point-geometry';
+
+import loadGeometry from './load_geometry';
+import toEvaluationFeature from './evaluation_feature';
+import EXTENT from './extent';
+import featureFilter from '../style-spec/feature_filter';
+import Grid from 'grid-index';
+import DictionaryCoder from '../util/dictionary_coder';
+import vt from '@mapbox/vector-tile';
+import Protobuf from 'pbf';
+import GeoJSONFeature from '../util/vectortile_to_geojson';
+import {arraysIntersect, mapObject, extend} from '../util/util';
+import {OverscaledTileID} from '../source/tile_id';
+import {register} from '../util/web_worker_transfer';
+import EvaluationParameters from '../style/evaluation_parameters';
+import SourceFeatureState from '../source/source_state';
+import {polygonIntersectsBox} from '../util/intersection_tests';
+import {PossiblyEvaluated} from '../style/properties';
+
+import type StyleLayer from '../style/style_layer';
+import type {FeatureFilter} from '../style-spec/feature_filter';
+import type Transform from '../geo/transform';
+import type {FilterSpecification, PromoteIdSpecification} from '../style-spec/types';
+
+import {FeatureIndexArray} from './array_types';
+
+type QueryParameters = {
+    scale: number,
+    pixelPosMatrix: Float32Array,
+    transform: Transform,
+    tileSize: number,
+    queryGeometry: Array<Point>,
+    cameraQueryGeometry: Array<Point>,
+    queryPadding: number,
+    params: {
+        filter: FilterSpecification,
+        layers: Array<string>,
+        availableImages: Array<string>
+    }
+}
+
+class FeatureIndex {
+    tileID: OverscaledTileID;
+    x: number;
+    y: number;
+    z: number;
+    grid: Grid;
+    grid3D: Grid;
+    featureIndexArray: FeatureIndexArray;
+    promoteId: ?PromoteIdSpecification;
+
+    rawTileData: ArrayBuffer;
+    bucketLayerIDs: Array<Array<string>>;
+
+    vtLayers: {[_: string]: VectorTileLayer};
+    sourceLayerCoder: DictionaryCoder;
+
+    constructor(tileID: OverscaledTileID, promoteId?: ?PromoteIdSpecification) {
+        this.tileID = tileID;
+        this.x = tileID.canonical.x;
+        this.y = tileID.canonical.y;
+        this.z = tileID.canonical.z;
+        this.grid = new Grid(EXTENT, 16, 0);
+        this.grid3D = new Grid(EXTENT, 16, 0);
+        this.featureIndexArray = new FeatureIndexArray();
+        this.promoteId = promoteId;
+    }
+
+    insert(feature: VectorTileFeature, geometry: Array<Array<Point>>, featureIndex: number, sourceLayerIndex: number, bucketIndex: number, is3D?: boolean) {
+        const key = this.featureIndexArray.length;
+        this.featureIndexArray.emplaceBack(featureIndex, sourceLayerIndex, bucketIndex);
+
+        const grid = is3D ? this.grid3D : this.grid;
+
+        for (let r = 0; r < geometry.length; r++) {
+            const ring = geometry[r];
+
+            const bbox = [Infinity, Infinity, -Infinity, -Infinity];
+            for (let i = 0; i < ring.length; i++) {
+                const p = ring[i];
+                bbox[0] = Math.min(bbox[0], p.x);
+                bbox[1] = Math.min(bbox[1], p.y);
+                bbox[2] = Math.max(bbox[2], p.x);
+                bbox[3] = Math.max(bbox[3], p.y);
+            }
+
+            if (bbox[0] < EXTENT &&
+                bbox[1] < EXTENT &&
+                bbox[2] >= 0 &&
+                bbox[3] >= 0) {
+                grid.insert(key, bbox[0], bbox[1], bbox[2], bbox[3]);
+            }
+        }
+    }
+
+    loadVTLayers(): {[_: string]: VectorTileLayer} {
+        if (!this.vtLayers) {
+            this.vtLayers = new vt.VectorTile(new Protobuf(this.rawTileData)).layers;
+            this.sourceLayerCoder = new DictionaryCoder(this.vtLayers ? Object.keys(this.vtLayers).sort() : ['_geojsonTileLayer']);
+        }
+        return this.vtLayers;
+    }
+
+    // Finds non-symbol features in this tile at a particular position.
+    query(args: QueryParameters, styleLayers: {[_: string]: StyleLayer}, serializedLayers: {[_: string]: Object}, sourceFeatureState: SourceFeatureState): {[_: string]: Array<{ featureIndex: number, feature: GeoJSONFeature }>} {
+        this.loadVTLayers();
+
+        const params = args.params || {},
+            pixelsToTileUnits = EXTENT / args.tileSize / args.scale,
+            filter = featureFilter(params.filter);
+
+        const queryGeometry = args.queryGeometry;
+        const queryPadding = args.queryPadding * pixelsToTileUnits;
+
+        const bounds = getBounds(queryGeometry);
+        const matching = this.grid.query(bounds.minX - queryPadding, bounds.minY - queryPadding, bounds.maxX + queryPadding, bounds.maxY + queryPadding);
+
+        const cameraBounds = getBounds(args.cameraQueryGeometry);
+        const matching3D = this.grid3D.query(
+                cameraBounds.minX - queryPadding, cameraBounds.minY - queryPadding, cameraBounds.maxX + queryPadding, cameraBounds.maxY + queryPadding,
+                (bx1, by1, bx2, by2) => {
+                    return polygonIntersectsBox(args.cameraQueryGeometry, bx1 - queryPadding, by1 - queryPadding, bx2 + queryPadding, by2 + queryPadding);
+                });
+
+        for (const key of matching3D) {
+            matching.push(key);
+        }
+
+        matching.sort(topDownFeatureComparator);
+
+        const result = {};
+        let previousIndex;
+        for (let k = 0; k < matching.length; k++) {
+            const index = matching[k];
+
+            // don't check the same feature more than once
+            if (index === previousIndex) continue;
+            previousIndex = index;
+
+            const match = this.featureIndexArray.get(index);
+            let featureGeometry = null;
+            this.loadMatchingFeature(
+                result,
+                match.bucketIndex,
+                match.sourceLayerIndex,
+                match.featureIndex,
+                filter,
+                params.layers,
+                params.availableImages,
+                styleLayers,
+                serializedLayers,
+                sourceFeatureState,
+                (feature: VectorTileFeature, styleLayer: StyleLayer, featureState: Object) => {
+                    if (!featureGeometry) {
+                        featureGeometry = loadGeometry(feature);
+                    }
+
+                    return styleLayer.queryIntersectsFeature(queryGeometry, feature, featureState, featureGeometry, this.z, args.transform, pixelsToTileUnits, args.pixelPosMatrix);
+                }
+            );
+        }
+
+        return result;
+    }
+
+    loadMatchingFeature(
+        result: {[_: string]: Array<{ featureIndex: number, feature: GeoJSONFeature }>},
+        bucketIndex: number,
+        sourceLayerIndex: number,
+        featureIndex: number,
+        filter: FeatureFilter,
+        filterLayerIDs: Array<string>,
+        availableImages: Array<string>,
+        styleLayers: {[_: string]: StyleLayer},
+        serializedLayers: {[_: string]: Object},
+        sourceFeatureState?: SourceFeatureState,
+        intersectionTest?: (feature: VectorTileFeature, styleLayer: StyleLayer, featureState: Object, id: string | number | void) => boolean | number) {
+
+        const layerIDs = this.bucketLayerIDs[bucketIndex];
+        if (filterLayerIDs && !arraysIntersect(filterLayerIDs, layerIDs))
+            return;
+
+        const sourceLayerName = this.sourceLayerCoder.decode(sourceLayerIndex);
+        const sourceLayer = this.vtLayers[sourceLayerName];
+        const feature = sourceLayer.feature(featureIndex);
+
+        if (filter.needGeometry) {
+            const evaluationFeature = toEvaluationFeature(feature, true);
+            if (!filter.filter(new EvaluationParameters(this.tileID.overscaledZ), evaluationFeature, this.tileID.canonical)) {
+                return;
+            }
+        } else if (!filter.filter(new EvaluationParameters(this.tileID.overscaledZ), feature)) {
+            return;
+        }
+
+        const id = this.getId(feature, sourceLayerName);
+
+        for (let l = 0; l < layerIDs.length; l++) {
+            const layerID = layerIDs[l];
+
+            if (filterLayerIDs && filterLayerIDs.indexOf(layerID) < 0) {
+                continue;
+            }
+
+            const styleLayer = styleLayers[layerID];
+
+            if (!styleLayer) continue;
+
+            let featureState = {};
+            if (id !== undefined && sourceFeatureState) {
+                // `feature-state` expression evaluation requires feature state to be available
+                featureState = sourceFeatureState.getState(styleLayer.sourceLayer || '_geojsonTileLayer', id);
+            }
+
+            const serializedLayer = extend({}, serializedLayers[layerID]);
+
+            serializedLayer.paint = evaluateProperties(serializedLayer.paint, styleLayer.paint, feature, featureState, availableImages);
+            serializedLayer.layout = evaluateProperties(serializedLayer.layout, styleLayer.layout, feature, featureState, availableImages);
+
+            const intersectionZ = !intersectionTest || intersectionTest(feature, styleLayer, featureState);
+            if (!intersectionZ) {
+                // Only applied for non-symbol features
+                continue;
+            }
+
+            const geojsonFeature = new GeoJSONFeature(feature, this.z, this.x, this.y, id);
+            (geojsonFeature: any).layer = serializedLayer;
+            let layerResult = result[layerID];
+            if (layerResult === undefined) {
+                layerResult = result[layerID] = [];
+            }
+            layerResult.push({featureIndex, feature: geojsonFeature, intersectionZ});
+        }
+    }
+
+    // Given a set of symbol indexes that have already been looked up,
+    // return a matching set of GeoJSONFeatures
+    lookupSymbolFeatures(symbolFeatureIndexes: Array<number>,
+                         serializedLayers: {[string]: StyleLayer},
+                         bucketIndex: number,
+                         sourceLayerIndex: number,
+                         filterSpec: FilterSpecification,
+                         filterLayerIDs: Array<string>,
+                         availableImages: Array<string>,
+                         styleLayers: {[_: string]: StyleLayer}) {
+        const result = {};
+        this.loadVTLayers();
+
+        const filter = featureFilter(filterSpec);
+
+        for (const symbolFeatureIndex of symbolFeatureIndexes) {
+            this.loadMatchingFeature(
+                result,
+                bucketIndex,
+                sourceLayerIndex,
+                symbolFeatureIndex,
+                filter,
+                filterLayerIDs,
+                availableImages,
+                styleLayers,
+                serializedLayers
+            );
+
+        }
+        return result;
+    }
+
+    hasLayer(id: string) {
+        for (const layerIDs of this.bucketLayerIDs) {
+            for (const layerID of layerIDs) {
+                if (id === layerID) return true;
+            }
+        }
+
+        return false;
+    }
+
+    getId(feature: VectorTileFeature, sourceLayerId: string): string | number | void {
+        let id = feature.id;
+        if (this.promoteId) {
+            const propName = typeof this.promoteId === 'string' ? this.promoteId : this.promoteId[sourceLayerId];
+            id = feature.properties[propName];
+            if (typeof id === 'boolean') id =  Number(id);
+        }
+        return id;
+    }
+}
+
+register(
+    'FeatureIndex',
+    FeatureIndex,
+    {omit: ['rawTileData', 'sourceLayerCoder']}
+);
+
+export default FeatureIndex;
+
+function evaluateProperties(serializedProperties, styleLayerProperties, feature, featureState, availableImages) {
+    return mapObject(serializedProperties, (property, key) => {
+        const prop = styleLayerProperties instanceof PossiblyEvaluated ? styleLayerProperties.get(key) : null;
+        return prop && prop.evaluate ? prop.evaluate(feature, featureState, availableImages) : prop;
+    });
+}
+
+function getBounds(geometry: Array<Point>) {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const p of geometry) {
+        minX = Math.min(minX, p.x);
+        minY = Math.min(minY, p.y);
+        maxX = Math.max(maxX, p.x);
+        maxY = Math.max(maxY, p.y);
+    }
+    return {minX, minY, maxX, maxY};
+}
+
+function topDownFeatureComparator(a, b) {
+    return b - a;
+}