@mapgis/mapbox-gl 16.0.1 → 16.2.0

package/src/source/image_source.js

@@ -1,307 +0,0 @@
-// @flow
-
-import {CanonicalTileID} from './tile_id';
-import {Event, ErrorEvent, Evented} from '../util/evented';
-import {getImage, ResourceType} from '../util/ajax';
-import EXTENT from '../data/extent';
-import {RasterBoundsArray} from '../data/array_types';
-import rasterBoundsAttributes from '../data/raster_bounds_attributes';
-import SegmentVector from '../data/segment';
-import Texture from '../render/texture';
-import MercatorCoordinate from '../geo/mercator_coordinate';
-
-import type {Source} from './source';
-import type {CanvasSourceSpecification} from './canvas_source';
-import type Map from '../ui/map';
-import type Dispatcher from '../util/dispatcher';
-import type Tile from './tile';
-import type {Callback} from '../types/callback';
-import type VertexBuffer from '../gl/vertex_buffer';
-import type {
-    ImageSourceSpecification,
-    VideoSourceSpecification
-} from '../style-spec/types';
-
-type Coordinates = [[number, number], [number, number], [number, number], [number, number]];
-
-/**
- * A data source containing an image.
- * (See the [Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/#sources-image) for detailed documentation of options.)
- *
- * @example
- * // add to map
- * map.addSource('some id', {
- *    type: 'image',
- *    url: 'https://www.mapbox.com/images/foo.png',
- *    coordinates: [
- *        [-76.54, 39.18],
- *        [-76.52, 39.18],
- *        [-76.52, 39.17],
- *        [-76.54, 39.17]
- *    ]
- * });
- *
- * // update coordinates
- * var mySource = map.getSource('some id');
- * mySource.setCoordinates([
- *     [-76.54335737228394, 39.18579907229748],
- *     [-76.52803659439087, 39.1838364847587],
- *     [-76.5295386314392, 39.17683392507606],
- *     [-76.54520273208618, 39.17876344106642]
- * ]);
- *
- * // update url and coordinates simultaneously
- * mySource.updateImage({
- *    url: 'https://www.mapbox.com/images/bar.png',
- *    coordinates: [
- *        [-76.54335737228394, 39.18579907229748],
- *        [-76.52803659439087, 39.1838364847587],
- *        [-76.5295386314392, 39.17683392507606],
- *        [-76.54520273208618, 39.17876344106642]
- *    ]
- * })
- *
- * map.removeSource('some id');  // remove
- * @see [Add an image](https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/)
- */
-class ImageSource extends Evented implements Source {
-    type: string;
-    id: string;
-    minzoom: number;
-    maxzoom: number;
-    tileSize: number;
-    url: string;
-
-    coordinates: Coordinates;
-    tiles: {[_: string]: Tile};
-    options: any;
-    dispatcher: Dispatcher;
-    map: Map;
-    texture: Texture | null;
-    image: HTMLImageElement | ImageBitmap;
-    tileID: CanonicalTileID;
-    _boundsArray: RasterBoundsArray;
-    boundsBuffer: VertexBuffer;
-    boundsSegments: SegmentVector;
-    _loaded: boolean;
-
-    /**
-     * @private
-     */
-    constructor(id: string, options: ImageSourceSpecification | VideoSourceSpecification | CanvasSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented) {
-        super();
-        this.id = id;
-        this.dispatcher = dispatcher;
-        this.coordinates = options.coordinates;
-
-        this.type = 'image';
-        this.minzoom = 0;
-        this.maxzoom = 22;
-        this.tileSize = 512;
-        this.tiles = {};
-        this._loaded = false;
-
-        this.setEventedParent(eventedParent);
-
-        this.options = options;
-    }
-
-    load(newCoordinates?: Coordinates, successCallback?: () => void) {
-        this._loaded = false;
-        this.fire(new Event('dataloading', {dataType: 'source'}));
-
-        this.url = this.options.url;
-
-        getImage(this.map._requestManager.transformRequest(this.url, ResourceType.Image), (err, image) => {
-            this._loaded = true;
-            if (err) {
-                this.fire(new ErrorEvent(err));
-            } else if (image) {
-                this.image = image;
-                if (newCoordinates) {
-                    this.coordinates = newCoordinates;
-                }
-                if (successCallback) {
-                    successCallback();
-                }
-                this._finishLoading();
-            }
-        });
-    }
-
-    loaded(): boolean {
-        return this._loaded;
-    }
-
-    /**
-     * Updates the image URL and, optionally, the coordinates. To avoid having the image flash after changing,
-     * set the `raster-fade-duration` paint property on the raster layer to 0.
-     *
-     * @param {Object} options Options object.
-     * @param {string} [options.url] Required image URL.
-     * @param {Array<Array<number>>} [options.coordinates] Four geographical coordinates,
-     *   represented as arrays of longitude and latitude numbers, which define the corners of the image.
-     *   The coordinates start at the top left corner of the image and proceed in clockwise order.
-     *   They do not have to represent a rectangle.
-     * @returns {ImageSource} this
-     */
-    updateImage(options: {url: string, coordinates?: Coordinates}) {
-        if (!this.image || !options.url) {
-            return this;
-        }
-        this.options.url = options.url;
-        this.load(options.coordinates, () => { this.texture = null; });
-        return this;
-    }
-
-    _finishLoading() {
-        if (this.map) {
-            this.setCoordinates(this.coordinates);
-            this.fire(new Event('data', {dataType: 'source', sourceDataType: 'metadata'}));
-        }
-    }
-
-    onAdd(map: Map) {
-        this.map = map;
-        this.load();
-    }
-
-    /**
-     * Sets the image's coordinates and re-renders the map.
-     *
-     * @param {Array<Array<number>>} coordinates Four geographical coordinates,
-     *   represented as arrays of longitude and latitude numbers, which define the corners of the image.
-     *   The coordinates start at the top left corner of the image and proceed in clockwise order.
-     *   They do not have to represent a rectangle.
-     * @returns {ImageSource} this
-     */
-    setCoordinates(coordinates: Coordinates) {
-        this.coordinates = coordinates;
-
-        // Calculate which mercator tile is suitable for rendering the video in
-        // and create a buffer with the corner coordinates. These coordinates
-        // may be outside the tile, because raster tiles aren't clipped when rendering.
-
-        // transform the geo coordinates into (zoom 0) tile space coordinates
-        const cornerCoords = coordinates.map(MercatorCoordinate.fromLngLat);
-
-        // Compute the coordinates of the tile we'll use to hold this image's
-        // render data
-        this.tileID = getCoordinatesCenterTileID(cornerCoords);
-
-        // Constrain min/max zoom to our tile's zoom level in order to force
-        // SourceCache to request this tile (no matter what the map's zoom
-        // level)
-        this.minzoom = this.maxzoom = this.tileID.z;
-
-        // Transform the corner coordinates into the coordinate space of our
-        // tile.
-        const tileCoords = cornerCoords.map((coord) => this.tileID.getTilePoint(coord)._round());
-
-        this._boundsArray = new RasterBoundsArray();
-        this._boundsArray.emplaceBack(tileCoords[0].x, tileCoords[0].y, 0, 0);
-        this._boundsArray.emplaceBack(tileCoords[1].x, tileCoords[1].y, EXTENT, 0);
-        this._boundsArray.emplaceBack(tileCoords[3].x, tileCoords[3].y, 0, EXTENT);
-        this._boundsArray.emplaceBack(tileCoords[2].x, tileCoords[2].y, EXTENT, EXTENT);
-
-        if (this.boundsBuffer) {
-            this.boundsBuffer.destroy();
-            delete this.boundsBuffer;
-        }
-
-        this.fire(new Event('data', {dataType:'source', sourceDataType: 'content'}));
-        return this;
-    }
-
-    prepare() {
-        if (Object.keys(this.tiles).length === 0 || !this.image) {
-            return;
-        }
-
-        const context = this.map.painter.context;
-        const gl = context.gl;
-
-        if (!this.boundsBuffer) {
-            this.boundsBuffer = context.createVertexBuffer(this._boundsArray, rasterBoundsAttributes.members);
-        }
-
-        if (!this.boundsSegments) {
-            this.boundsSegments = SegmentVector.simpleSegment(0, 0, 4, 2);
-        }
-
-        if (!this.texture) {
-            this.texture = new Texture(context, this.image, gl.RGBA);
-            this.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
-        }
-
-        for (const w in this.tiles) {
-            const tile = this.tiles[w];
-            if (tile.state !== 'loaded') {
-                tile.state = 'loaded';
-                tile.texture = this.texture;
-            }
-        }
-    }
-
-    loadTile(tile: Tile, callback: Callback<void>) {
-        // We have a single tile -- whoose coordinates are this.tileID -- that
-        // covers the image we want to render.  If that's the one being
-        // requested, set it up with the image; otherwise, mark the tile as
-        // `errored` to indicate that we have no data for it.
-        // If the world wraps, we may have multiple "wrapped" copies of the
-        // single tile.
-        if (this.tileID && this.tileID.equals(tile.tileID.canonical)) {
-            this.tiles[String(tile.tileID.wrap)] = tile;
-            tile.buckets = {};
-            callback(null);
-        } else {
-            tile.state = 'errored';
-            callback(null);
-        }
-    }
-
-    serialize(): Object {
-        return {
-            type: 'image',
-            url: this.options.url,
-            coordinates: this.coordinates
-        };
-    }
-
-    hasTransition() {
-        return false;
-    }
-}
-
-/**
- * Given a list of coordinates, get their center as a coordinate.
- *
- * @returns centerpoint
- * @private
- */
-export function getCoordinatesCenterTileID(coords: Array<MercatorCoordinate>) {
-    let minX = Infinity;
-    let minY = Infinity;
-    let maxX = -Infinity;
-    let maxY = -Infinity;
-
-    for (const coord of coords) {
-        minX = Math.min(minX, coord.x);
-        minY = Math.min(minY, coord.y);
-        maxX = Math.max(maxX, coord.x);
-        maxY = Math.max(maxY, coord.y);
-    }
-
-    const dx = maxX - minX;
-    const dy = maxY - minY;
-    const dMax = Math.max(dx, dy);
-    const zoom = Math.max(0, Math.floor(-Math.log(dMax) / Math.LN2));
-    const tilesAtZoom = Math.pow(2, zoom);
-
-    return new CanonicalTileID(
-            zoom,
-            Math.floor((minX + maxX) / 2 * tilesAtZoom),
-            Math.floor((minY + maxY) / 2 * tilesAtZoom));
-}
-
-export default ImageSource;

package/src/source/load_tilejson.js

@@ -1,39 +0,0 @@
-// @flow
-
-import {pick, extend} from '../util/util';
-
-import {getJSON, ResourceType} from '../util/ajax';
-import browser from '../util/browser';
-
-import type {RequestManager} from '../util/mapbox';
-import type {Callback} from '../types/callback';
-import type {TileJSON} from '../types/tilejson';
-import type {Cancelable} from '../types/cancelable';
-
-export default function(options: any, requestManager: RequestManager, callback: Callback<TileJSON>): Cancelable {
-    const loaded = function(err: ?Error, tileJSON: ?Object) {
-        if (err) {
-            return callback(err);
-        } else if (tileJSON) {
-            const result: any = pick(
-                // explicit source options take precedence over TileJSON
-                extend(tileJSON, options),
-                ['tiles', 'minzoom', 'maxzoom', 'attribution', 'mapbox_logo', 'bounds', 'scheme', 'tileSize', 'encoding']
-            );
-
-            if (tileJSON.vector_layers) {
-                result.vectorLayers = tileJSON.vector_layers;
-                result.vectorLayerIds = result.vectorLayers.map((layer) => { return layer.id; });
-            }
-
-            result.tiles = requestManager.canonicalizeTileset(result, options.url);
-            callback(null, result);
-        }
-    };
-
-    if (options.url) {
-        return getJSON(requestManager.transformRequest(requestManager.normalizeSourceURL(options.url), ResourceType.Source), loaded);
-    } else {
-        return browser.frame(() => loaded(null, options));
-    }
-}

package/src/source/mbtiles_source.js

@@ -1,115 +0,0 @@
-import VectorTileSource from './vector_tile_source'
-import pako from 'pako/lib/inflate'
-import base64js from 'base64-js'
-import Database from './offline_database'
-
-class MBTilesSource extends VectorTileSource {
-
-    constructor(id, options, dispatcher, eventedParent) {
-        super(id, options, dispatcher, eventedParent);
-        
-        this.dispatcher = dispatcher;
-        this.setEventedParent(eventedParent);
-
-        this.type = "mbtiles";        
-        this.db = this.openDatabase(options.path);        
-    }
-
-    openDatabase(dbLocation) {
-        return Database.openDatabase(dbLocation)
-    }
-
-    copyDatabaseFile(dbLocation, dbName, targetDir) {
-        return Database.copyDatabaseFile(dbLocation, dbName, targetDir)
-    }
-
-    readTile(z, x, y, callback) {
-        const query = 'SELECT BASE64(tile_data) AS base64_tile_data FROM tiles WHERE zoom_level=? AND tile_column=? AND tile_row=?';
-        const params = [z, x, y];
-        this.db.then(function(db) {
-            db.transaction(function (txn) {
-                txn.executeSql(query, params, function (tx, res) {
-                    if (res.rows.length) {
-                        const base64Data = res.rows.item(0).base64_tile_data;
-                        // const tileData = res.rows.item(0).base64_tile_data;
-                        // gzip 压缩格式
-                        const rawData = pako.inflate(base64js.toByteArray(base64Data)); 
-                        callback(undefined, base64js.fromByteArray(rawData)); // Tile contents read, callback success.
-                        // m标准不压缩格式
-                        // callback(undefined, tileData); // Tile contents read, callback success.
-                    } else {
-                        callback(new Error('tile ' + params.join(',') + ' not found'));
-                    }
-                });
-            }, function (error) {
-                callback(error); // Error executing SQL
-            });
-        }).catch(function(err) {
-            callback(err);
-        });
-    }
-
-    loadTile(tile, callback) {
-        const coord = tile.tileID.canonical;
-        const overscaling = coord.z > this.maxzoom ? Math.pow(2, coord.z - this.maxzoom) : 1;
-
-        const z = Math.min(coord.z, this.maxzoom || coord.z); // Don't try to get data over maxzoom
-        const x = coord.x;
-        const y = Math.pow(2,z)-coord.y-1; // Tiles on database are tms (inverted y axis)
-
-        this.readTile(z, x, y, dispatch.bind(this));
-
-        function dispatch(err, base64Data) {
-            if (err) {
-                return callback(err);
-            }
-            if (base64Data === undefined) {
-              return callback(new Error("empty data"));
-            }
-
-            const params = {
-                request: { url: "data:application/x-protobuf;base64," + base64Data },
-                uid: tile.uid,
-                tileID: tile.tileID,
-                zoom: coord.z,
-                tileSize: this.tileSize * overscaling,
-                type: this.type,
-                source: this.id,
-                pixelRatio: window.devicePixelRatio || 1,
-                overscaling: overscaling,
-                showCollisionBoxes: this.map.showCollisionBoxes
-            };
-
-            if (!tile.actor || tile.state === 'expired') {
-                tile.actor = this.dispatcher.getActor();
-                tile.request = tile.actor.send('loadTile', params, done.bind(this));
-            } else if (tile.state === 'loading') {
-                // schedule tile reloading after it has been loaded
-                tile.reloadCallback = callback;
-            } else {
-                tile.request = tile.actor.send('reloadTile', params, done.bind(this));
-            }
-
-            function done(err, data) {
-                if (tile.aborted)
-                    return;
-
-                if (err) {
-                    return callback(err);
-                }
-
-                if (this.map._refreshExpiredTiles) tile.setExpiryData(data);
-                tile.loadVectorData(data, this.map.painter);
-
-                callback(null);
-
-                if (tile.reloadCallback) {
-                    this.loadTile(tile, tile.reloadCallback);
-                    tile.reloadCallback = null;
-                }
-            }
-        }
-    }
-}
-
-export default MBTilesSource;

package/src/source/offline_database.js

@@ -1,61 +0,0 @@
-class Database {
-
-    static openDatabase(dbLocation) {
-        const dbName = dbLocation.split("/").slice(-1)[0]; // Get the DB file basename
-        const source = this;
-        console.log('openDatabase', self);
-        if ('sqlitePlugin' in self) {
-            if('device' in self) {
-                return new Promise(function (resolve, reject) {
-                    if(device.platform === 'Android') {
-                        resolveLocalFileSystemURL(cordova.file.applicationStorageDirectory, function (dir) {
-                            dir.getDirectory('databases', {create: true}, function (subdir) {
-                                resolve(subdir);
-                            });
-                        }, reject);
-                    } else if(device.platform === 'iOS') {
-                        resolveLocalFileSystemURL(cordova.file.documentsDirectory, resolve, reject);
-                    } else {
-                        reject("Platform not supported");
-                    }
-                }).then(function (targetDir) {
-                    return new Promise(function (resolve, reject) {
-                        targetDir.getFile(dbName, {}, resolve, reject);
-                    }).catch(function () {
-                        return source.copyDatabaseFile(dbLocation, dbName, targetDir)
-                    });
-                }).then(function () {
-                    var params = {name: dbName};
-                    if(device.platform === 'iOS') {
-                        params.iosDatabaseLocation = 'Documents';
-                    } else {
-                        params.location = 'default';
-                    }
-                    return sqlitePlugin.openDatabase(params);
-                });
-            } else {
-                return Promise.reject(new Error("cordova-plugin-device not available. " +
-                    "Please install the plugin and make sure this code is run after onDeviceReady event"));
-            }
-        } else {
-            return Promise.reject(new Error("cordova-sqlite-ext plugin not available. " +
-                "Please install the plugin and make sure this code is run after onDeviceReady event"));
-        }
-    }
-
-    static copyDatabaseFile(dbLocation, dbName, targetDir) {
-        console.log("Copying database to application storage directory");
-        return new Promise(function (resolve, reject) {
-            const absPath =  cordova.file.externalRootDirectory + '/' + dbLocation;
-            resolveLocalFileSystemURL(absPath, resolve, reject);
-        }).then(function (sourceFile) {
-            return new Promise(function (resolve, reject) {
-                sourceFile.copyTo(targetDir, dbName, resolve, reject);
-            }).then(function () {
-                console.log("Database copied");
-            });
-        });
-    }
-}
-
-export default Database

package/src/source/offline_database_root.js

@@ -1,62 +0,0 @@
-class Database {
-
-    static openDatabase(dbLocation) {
-        const dbName = dbLocation.split("/").slice(-1)[0]; // Get the DB file basename
-        const source = this;
-        console.log('openDatabase', self);
-        if ('sqlitePlugin' in self) {
-            if('device' in self) {
-                return new Promise(function (resolve, reject) {
-                    if(device.platform === 'Android') {
-                        resolveLocalFileSystemURL(cordova.file.externalRootDirectory, function (dirEntry) {
-                            let subdir = cordova.file.externalRootDirectory + "/" + dbLocation
-                            resolve({dirEntry, subdir});
-                        }, reject);
-                    } else if(device.platform === 'iOS') {
-                        resolveLocalFileSystemURL(cordova.file.documentsDirectory, resolve, reject);
-                    } else {
-                        reject("Platform not supported");
-                    }
-                }).then(function (opt) {
-                    let {dirEntry, subdir} = opt;
-                    return new Promise(function (resolve, reject) {
-                        console.warn('offline 1', subdir);
-                        dirEntry.getFile(subdir, {}, resolve, reject);
-                    }).catch(function () {
-                        return source.copyDatabaseFile(dbLocation, dbName, dirEntry)
-                    });
-                }).then(function () {
-                    var params = {name: dbName};
-                    if(device.platform === 'iOS') {
-                        params.iosDatabaseLocation = 'Documents';
-                    } else {
-                        params.location = 'default';
-                    }
-                    return sqlitePlugin.openDatabase(params);
-                });
-            } else {
-                return Promise.reject(new Error("cordova-plugin-device not available. " +
-                    "Please install the plugin and make sure this code is run after onDeviceReady event"));
-            }
-        } else {
-            return Promise.reject(new Error("cordova-sqlite-ext plugin not available. " +
-                "Please install the plugin and make sure this code is run after onDeviceReady event"));
-        }
-    }
-
-    static copyDatabaseFile(dbLocation, dbName, targetDir) {
-        console.log("Copying database to application storage directory");
-        return new Promise(function (resolve, reject) {
-            const absPath =  cordova.file.externalRootDirectory + dbLocation;
-            resolveLocalFileSystemURL(absPath, resolve, reject);
-        }).then(function (sourceFile) {
-            return new Promise(function (resolve, reject) {
-                sourceFile.copyTo(targetDir, dbName, resolve, reject);
-            }).then(function () {
-                console.log("Database copied");
-            });
-        });
-    }
-}
-
-export default Database

package/src/source/pixels_to_tile_units.js

@@ -1,21 +0,0 @@
-// @flow
-
-import EXTENT from '../data/extent';
-
-import type {OverscaledTileID} from './tile_id';
-
-/**
- * Converts a pixel value at a the given zoom level to tile units.
- *
- * The shaders mostly calculate everything in tile units so style
- * properties need to be converted from pixels to tile units using this.
- *
- * For example, a translation by 30 pixels at zoom 6.5 will be a
- * translation by pixelsToTileUnits(30, 6.5) tile units.
- *
- * @returns value in tile units
- * @private
- */
-export default function(tile: {tileID: OverscaledTileID, tileSize: number}, pixelValue: number, z: number): number {
-    return pixelValue * (EXTENT / (tile.tileSize * Math.pow(2, z - tile.tileID.overscaledZ)));
-}