@mapgis/mapbox-gl 1.9.12 → 16.0.1

package/src/source/canvas_source.js

@@ -0,0 +1,238 @@
+// @flow
+
+import ImageSource from './image_source';
+
+import window from '../util/window';
+import rasterBoundsAttributes from '../data/raster_bounds_attributes';
+import SegmentVector from '../data/segment';
+import Texture from '../render/texture';
+import {ErrorEvent} from '../util/evented';
+import ValidationError from '../style-spec/error/validation_error';
+
+import type Map from '../ui/map';
+import type Dispatcher from '../util/dispatcher';
+import type {Evented} from '../util/evented';
+
+export type CanvasSourceSpecification = {|
+    "type": "canvas",
+    "coordinates": [[number, number], [number, number], [number, number], [number, number]],
+    "animate"?: boolean,
+    "canvas": string | HTMLCanvasElement
+|};
+
+/**
+ * Options to add a canvas source type to the map.
+ *
+ * @typedef {Object} CanvasSourceOptions
+ * @property {string} type Source type. Must be `"canvas"`.
+ * @property {string|HTMLCanvasElement} canvas Canvas source from which to read pixels. Can be a string representing the ID of the canvas element, or the `HTMLCanvasElement` itself.
+ * @property {Array<Array<number>>} coordinates Four geographical coordinates denoting where to place the corners of the canvas, specified in `[longitude, latitude]` pairs.
+ * @property {boolean} [animate=true] Whether the canvas source is animated. If the canvas is static (i.e. pixels do not need to be re-read on every frame), `animate` should be set to `false` to improve performance.
+ */
+
+/**
+ * A data source containing the contents of an HTML canvas. See {@link CanvasSourceOptions} for detailed documentation of options.
+ *
+ * @example
+ * // add to map
+ * map.addSource('some id', {
+ *    type: 'canvas',
+ *    canvas: 'idOfMyHTMLCanvas',
+ *    animate: true,
+ *    coordinates: [
+ *        [-76.54, 39.18],
+ *        [-76.52, 39.18],
+ *        [-76.52, 39.17],
+ *        [-76.54, 39.17]
+ *    ]
+ * });
+ *
+ * // update
+ * var mySource = map.getSource('some id');
+ * mySource.setCoordinates([
+ *     [-76.54335737228394, 39.18579907229748],
+ *     [-76.52803659439087, 39.1838364847587],
+ *     [-76.5295386314392, 39.17683392507606],
+ *     [-76.54520273208618, 39.17876344106642]
+ * ]);
+ *
+ * map.removeSource('some id');  // remove
+ */
+class CanvasSource extends ImageSource {
+    options: CanvasSourceSpecification;
+    animate: boolean;
+    canvas: HTMLCanvasElement;
+    width: number;
+    height: number;
+    play: () => void;
+    pause: () => void;
+    _playing: boolean;
+
+    /**
+     * @private
+     */
+    constructor(id: string, options: CanvasSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented) {
+        super(id, options, dispatcher, eventedParent);
+
+        // We build in some validation here, since canvas sources aren't included in the style spec:
+        if (!options.coordinates) {
+            this.fire(new ErrorEvent(new ValidationError(`sources.${id}`, null, 'missing required property "coordinates"')));
+        } else if (!Array.isArray(options.coordinates) || options.coordinates.length !== 4 ||
+                options.coordinates.some(c => !Array.isArray(c) || c.length !== 2 || c.some(l => typeof l !== 'number'))) {
+            this.fire(new ErrorEvent(new ValidationError(`sources.${id}`, null, '"coordinates" property must be an array of 4 longitude/latitude array pairs')));
+        }
+
+        if (options.animate && typeof options.animate !== 'boolean') {
+            this.fire(new ErrorEvent(new ValidationError(`sources.${id}`, null, 'optional "animate" property must be a boolean value')));
+        }
+
+        if (!options.canvas) {
+            this.fire(new ErrorEvent(new ValidationError(`sources.${id}`, null, 'missing required property "canvas"')));
+        } else if (typeof options.canvas !== 'string' && !(options.canvas instanceof window.HTMLCanvasElement)) {
+            this.fire(new ErrorEvent(new ValidationError(`sources.${id}`, null, '"canvas" must be either a string representing the ID of the canvas element from which to read, or an HTMLCanvasElement instance')));
+        }
+
+        this.options = options;
+        this.animate = options.animate !== undefined ? options.animate : true;
+    }
+
+    /**
+     * Enables animation. The image will be copied from the canvas to the map on each frame.
+     * @method play
+     * @instance
+     * @memberof CanvasSource
+     */
+
+    /**
+     * Disables animation. The map will display a static copy of the canvas image.
+     * @method pause
+     * @instance
+     * @memberof CanvasSource
+     */
+
+    load() {
+        this._loaded = true;
+        if (!this.canvas) {
+            this.canvas = (this.options.canvas instanceof window.HTMLCanvasElement) ?
+                this.options.canvas :
+                window.document.getElementById(this.options.canvas);
+        }
+        this.width = this.canvas.width;
+        this.height = this.canvas.height;
+
+        if (this._hasInvalidDimensions()) {
+            this.fire(new ErrorEvent(new Error('Canvas dimensions cannot be less than or equal to zero.')));
+            return;
+        }
+
+        this.play = function() {
+            this._playing = true;
+            this.map.triggerRepaint();
+        };
+
+        this.pause = function() {
+            if (this._playing) {
+                this.prepare();
+                this._playing = false;
+            }
+        };
+
+        this._finishLoading();
+    }
+
+    /**
+     * Returns the HTML `canvas` element.
+     *
+     * @returns {HTMLCanvasElement} The HTML `canvas` element.
+     */
+    getCanvas() {
+        return this.canvas;
+    }
+
+    onAdd(map: Map) {
+        this.map = map;
+        this.load();
+        if (this.canvas) {
+            if (this.animate) this.play();
+        }
+    }
+
+    onRemove() {
+        this.pause();
+    }
+
+    /**
+     * Sets the canvas's coordinates and re-renders the map.
+     *
+     * @method setCoordinates
+     * @instance
+     * @memberof CanvasSource
+     * @param {Array<Array<number>>} coordinates Four geographical coordinates,
+     *   represented as arrays of longitude and latitude numbers, which define the corners of the canvas.
+     *   The coordinates start at the top left corner of the canvas and proceed in clockwise order.
+     *   They do not have to represent a rectangle.
+     * @returns {CanvasSource} this
+     */
+    // setCoordinates inherited from ImageSource
+
+    prepare() {
+        let resize = false;
+        if (this.canvas.width !== this.width) {
+            this.width = this.canvas.width;
+            resize = true;
+        }
+        if (this.canvas.height !== this.height) {
+            this.height = this.canvas.height;
+            resize = true;
+        }
+
+        if (this._hasInvalidDimensions()) return;
+
+        if (Object.keys(this.tiles).length === 0) return; // not enough data for current position
+
+        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.canvas, gl.RGBA, {premultiply: true});
+        } else if (resize || this._playing) {
+            this.texture.update(this.canvas, {premultiply: true});
+        }
+
+        for (const w in this.tiles) {
+            const tile = this.tiles[w];
+            if (tile.state !== 'loaded') {
+                tile.state = 'loaded';
+                tile.texture = this.texture;
+            }
+        }
+    }
+
+    serialize(): Object {
+        return {
+            type: 'canvas',
+            coordinates: this.coordinates
+        };
+    }
+
+    hasTransition() {
+        return this._playing;
+    }
+
+    _hasInvalidDimensions() {
+        for (const x of [this.canvas.width, this.canvas.height]) {
+            if (isNaN(x) || x <= 0) return true;
+        }
+        return false;
+    }
+}
+
+export default CanvasSource;

package/src/source/geojson_helper.js

@@ -0,0 +1,92 @@
+/**
+ * 
+ * @param {*} data 
+ * @param {*} crs 
+ */
+export function loopData(data, crs) {
+    if (data.type === "FeatureCollection") {
+        data = loopFeatureCollection(data);
+    } else if (data.type === "Point") {
+        data = oopPoint(data);
+    } else if (data.type === "LineString" || data.type === "MultiPoint") {
+        data = loopLine(data);
+    } else if (data.type === "Polygon" || data.type === "MultiLineString") {
+        data = loopPolygon(data);
+    } else if (data.type === "MultiPolygon") {
+        data = loopMultiPolygon(data);
+    }
+    console.log("loopdata", data);
+    return data;
+}
+
+/**
+ * 原先的 90 ~ -90  -> 90 ~ -270， 按照对应的百分比处理
+ * @param {*} lat
+ */
+function fixLat(lat) {
+    let percent = (90 + lat) / 180;
+    let zero = 90 * percent;
+    return zero  || (45 + zero / 2);
+}
+
+function loopFeatureCollection(data) {
+    data.features = data.features.map(f => {
+        if (f.geometry.type === "Point") {
+            f = loopPoint(f);
+        } else if (
+            f.geometry.type === "LineString" ||
+            data.type === "MultiPoint"
+        ) {
+            f = loopLine(f);
+        } else if (
+            f.geometry.type === "Polygon" ||
+            data.type === "MultiLineString"
+        ) {
+            f = loopPolygon(f);
+        } else if (f.geometry.type === "MultiPolygon") {
+            f = loopMultiPolygon(f);
+        }
+        return f;
+    });
+    return data;
+}
+
+// "coordinates": [102,0.5]
+function loopPoint(feature) {
+    feature.geometry.coordinates[1] = fixLat(feature.geometry.coordinates[1]);
+    return feature;
+}
+
+// "coordinates": [[102, 0], [103, 1], [104, 0],[105, 1]]
+function loopLine(feature) {
+    feature.geometry.coordinates = feature.geometry.coordinates.map(p => {
+        p[1] = fixLat(p[1]);
+        return p;
+    });
+    return feature;
+}
+
+function loopPolygon(feature) {
+    feature.geometry.coordinates = feature.geometry.coordinates.map(r => {
+        r = r.map(p => {
+            p[1] = fixLat(p[1]);
+            return p;
+        });
+        return r;
+    });
+    return feature;
+}
+
+function loopMultiPolygon(feature) {
+    feature.geometry.coordinates = feature.geometry.coordinates.map(m => {
+        m.map(r => {
+            r = r.map(p => {
+                p[1] = fixLat(p[1]);
+                return p;
+            });
+            return r;
+        });
+        return m;
+    });
+    return feature;
+}

package/src/source/geojson_source.js

@@ -0,0 +1,374 @@
+// @flow
+
+import {Event, ErrorEvent, Evented} from '../util/evented';
+
+import {extend} from '../util/util';
+import EXTENT from '../data/extent';
+import {ResourceType} from '../util/ajax';
+import browser from '../util/browser';
+
+import type {Source} from './source';
+import type Map from '../ui/map';
+import type Dispatcher from '../util/dispatcher';
+import type Tile from './tile';
+import type Actor from '../util/actor';
+import type {Callback} from '../types/callback';
+import type {GeoJSON, GeoJSONFeature} from '@mapbox/geojson-types';
+import type {GeoJSONSourceSpecification, PromoteIdSpecification} from '../style-spec/types';
+
+import {loopData} from './geojson_helper';
+import CRS from '../ui/crs';
+
+/**
+ * A source containing GeoJSON.
+ * (See the [Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/#sources-geojson) for detailed documentation of options.)
+ *
+ * @example
+ * map.addSource('some id', {
+ *     type: 'geojson',
+ *     data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_ports.geojson'
+ * });
+ *
+ * @example
+ * map.addSource('some id', {
+ *    type: 'geojson',
+ *    data: {
+ *        "type": "FeatureCollection",
+ *        "features": [{
+ *            "type": "Feature",
+ *            "properties": {},
+ *            "geometry": {
+ *                "type": "Point",
+ *                "coordinates": [
+ *                    -76.53063297271729,
+ *                    39.18174077994108
+ *                ]
+ *            }
+ *        }]
+ *    }
+ * });
+ *
+ * @example
+ * map.getSource('some id').setData({
+ *   "type": "FeatureCollection",
+ *   "features": [{
+ *       "type": "Feature",
+ *       "properties": { "name": "Null Island" },
+ *       "geometry": {
+ *           "type": "Point",
+ *           "coordinates": [ 0, 0 ]
+ *       }
+ *   }]
+ * });
+ * @see [Draw GeoJSON points](https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/)
+ * @see [Add a GeoJSON line](https://www.mapbox.com/mapbox-gl-js/example/geojson-line/)
+ * @see [Create a heatmap from points](https://www.mapbox.com/mapbox-gl-js/example/heatmap/)
+ * @see [Create and style clusters](https://www.mapbox.com/mapbox-gl-js/example/cluster/)
+ */
+class GeoJSONSource extends Evented implements Source {
+    crs: string;
+
+    type: 'geojson';
+    id: string;
+    minzoom: number;
+    maxzoom: number;
+    tileSize: number;
+    attribution: string;
+    promoteId: ?PromoteIdSpecification;
+
+    isTileClipped: boolean;
+    reparseOverscaled: boolean;
+    _data: GeoJSON | string;
+    _options: any;
+    workerOptions: any;
+    map: Map;
+    actor: Actor;
+    _loaded: boolean;
+    _collectResourceTiming: boolean;
+    _resourceTiming: Array<PerformanceResourceTiming>;
+    _removed: boolean;
+
+    /**
+     * @private
+     */
+    constructor(id: string, options: GeoJSONSourceSpecification & {workerOptions?: any, collectResourceTiming: boolean}, dispatcher: Dispatcher, eventedParent: Evented) {
+        super();
+
+        this.id = id;
+
+        // `type` is a property rather than a constant to make it easy for 3rd
+        // parties to use GeoJSONSource to build their own source types.
+        this.type = 'geojson';
+
+        this.minzoom = 0;
+        this.maxzoom = 18;
+        this.tileSize = 512;
+        this.isTileClipped = true;
+        this.reparseOverscaled = true;
+        this._removed = false;
+        this._loaded = false;
+
+        this.actor = dispatcher.getActor();
+        this.setEventedParent(eventedParent);
+
+        this.crs = this.getCrs();        
+        this._data = options.data;// this.fixCrsData(options.data);
+        this._options = extend({}, options);
+
+        this._collectResourceTiming = options.collectResourceTiming;
+        this._resourceTiming = [];
+
+        if (options.maxzoom !== undefined) this.maxzoom = options.maxzoom;
+        if (options.type) this.type = options.type;
+        if (options.attribution) this.attribution = options.attribution;
+        this.promoteId = options.promoteId;
+
+        const scale = EXTENT / this.tileSize;
+
+        // sent to the worker, along with `url: ...` or `data: literal geojson`,
+        // so that it can load/parse/index the geojson data
+        // extending with `options.workerOptions` helps to make it easy for
+        // third-party sources to hack/reuse GeoJSONSource.
+        this.workerOptions = extend({
+            crs: this.crs,
+            source: this.id,
+            cluster: options.cluster || false,
+            geojsonVtOptions: {
+                buffer: (options.buffer !== undefined ? options.buffer : 128) * scale,
+                tolerance: (options.tolerance !== undefined ? options.tolerance : 0.375) * scale,
+                extent: EXTENT,
+                maxZoom: this.maxzoom,
+                lineMetrics: options.lineMetrics || false,
+                generateId: options.generateId || false,
+                crs: this.getCrs(),
+            },
+            superclusterOptions: {
+                maxZoom: options.clusterMaxZoom !== undefined ?
+                    Math.min(options.clusterMaxZoom, this.maxzoom - 1) :
+                    (this.maxzoom - 1),
+                extent: EXTENT,
+                radius: (options.clusterRadius || 50) * scale,
+                log: false,
+                generateId: options.generateId || false,
+                crs: this.getCrs(),
+            },
+            clusterProperties: options.clusterProperties
+        }, options.workerOptions);
+    }
+
+    getCrs() {
+        return 'EPSG:3857';
+    }
+
+    fixCrsData(data) {
+        if (this.getCrs() !== CRS.EPSG3857.getEpsgCode()) {
+            // console.log('before loop', data);
+            data = loopData(data);
+            // console.log('after loop', data);
+        }
+        return data;
+    }
+
+    load() {
+        this.fire(new Event('dataloading', {dataType: 'source'}));
+        this._updateWorkerData((err) => {
+            if (err) {
+                this.fire(new ErrorEvent(err));
+                return;
+            }
+
+            const data: Object = {dataType: 'source', sourceDataType: 'metadata'};
+            if (this._collectResourceTiming && this._resourceTiming && (this._resourceTiming.length > 0)) {
+                data.resourceTiming = this._resourceTiming;
+                this._resourceTiming = [];
+            }
+
+            // although GeoJSON sources contain no metadata, we fire this event to let the SourceCache
+            // know its ok to start requesting tiles.
+            this.fire(new Event('data', data));
+        });
+    }
+
+    onAdd(map: Map) {
+        this.map = map;
+        this.load();
+    }
+
+    /**
+     * Sets the GeoJSON data and re-renders the map.
+     *
+     * @param {Object|string} data A GeoJSON data object or a URL to one. The latter is preferable in the case of large GeoJSON files.
+     * @returns {GeoJSONSource} this
+     */
+    setData(data: GeoJSON | string) {
+        this._data = data;
+        this.fire(new Event('dataloading', {dataType: 'source'}));
+        this._updateWorkerData((err) => {
+            if (err) {
+                this.fire(new ErrorEvent(err));
+                return;
+            }
+
+            const data: Object = {dataType: 'source', sourceDataType: 'content'};
+            if (this._collectResourceTiming && this._resourceTiming && (this._resourceTiming.length > 0)) {
+                data.resourceTiming = this._resourceTiming;
+                this._resourceTiming = [];
+            }
+            this.fire(new Event('data', data));
+        });
+
+        return this;
+    }
+
+    /**
+     * For clustered sources, fetches the zoom at which the given cluster expands.
+     *
+     * @param clusterId The value of the cluster's `cluster_id` property.
+     * @param callback A callback to be called when the zoom value is retrieved (`(error, zoom) => { ... }`).
+     * @returns {GeoJSONSource} this
+     */
+    getClusterExpansionZoom(clusterId: number, callback: Callback<number>) {
+        this.actor.send('geojson.getClusterExpansionZoom', {clusterId, source: this.id}, callback);
+        return this;
+    }
+
+    /**
+     * For clustered sources, fetches the children of the given cluster on the next zoom level (as an array of GeoJSON features).
+     *
+     * @param clusterId The value of the cluster's `cluster_id` property.
+     * @param callback A callback to be called when the features are retrieved (`(error, features) => { ... }`).
+     * @returns {GeoJSONSource} this
+     */
+    getClusterChildren(clusterId: number, callback: Callback<Array<GeoJSONFeature>>) {
+        this.actor.send('geojson.getClusterChildren', {clusterId, source: this.id}, callback);
+        return this;
+    }
+
+    /**
+     * For clustered sources, fetches the original points that belong to the cluster (as an array of GeoJSON features).
+     *
+     * @param clusterId The value of the cluster's `cluster_id` property.
+     * @param limit The maximum number of features to return.
+     * @param offset The number of features to skip (e.g. for pagination).
+     * @param callback A callback to be called when the features are retrieved (`(error, features) => { ... }`).
+     * @returns {GeoJSONSource} this
+     */
+    getClusterLeaves(clusterId: number, limit: number, offset: number, callback: Callback<Array<GeoJSONFeature>>) {
+        this.actor.send('geojson.getClusterLeaves', {
+            source: this.id,
+            clusterId,
+            limit,
+            offset
+        }, callback);
+        return this;
+    }
+
+    /*
+     * Responsible for invoking WorkerSource's geojson.loadData target, which
+     * handles loading the geojson data and preparing to serve it up as tiles,
+     * using geojson-vt or supercluster as appropriate.
+     */
+    _updateWorkerData(callback: Callback<void>) {
+        this._loaded = false;
+        const options = extend({}, this.workerOptions);
+        let data = this._data;
+
+        if (typeof data === 'string') {
+            options.request = this.map._requestManager.transformRequest(browser.resolveURL(data), ResourceType.Source);
+            options.request.collectResourceTiming = this._collectResourceTiming;
+        } else {
+            options.data = JSON.stringify(data);
+        }
+        // target {this.type}.loadData rather than literally geojson.loadData,
+        // so that other geojson-like source types can easily reuse this
+        // implementation
+        this.actor.send(`${this.type}.loadData`, options, (err, result) => {
+            if (this._removed || (result && result.abandoned)) {
+                return;
+            }
+
+            this._loaded = true;
+
+            if (result && result.resourceTiming && result.resourceTiming[this.id])
+                this._resourceTiming = result.resourceTiming[this.id].slice(0);
+            // Any `loadData` calls that piled up while we were processing
+            // this one will get coalesced into a single call when this
+            // 'coalesce' message is processed.
+            // We would self-send from the worker if we had access to its
+            // message queue. Waiting instead for the 'coalesce' to round-trip
+            // through the foreground just means we're throttling the worker
+            // to run at a little less than full-throttle.
+            this.actor.send(`${this.type}.coalesce`, {source: options.source}, null);
+            callback(err);
+        });
+    }
+
+    loaded(): boolean {
+        return this._loaded;
+    }
+
+    loadTile(tile: Tile, callback: Callback<void>) {
+        const message = !tile.actor ? 'loadTile' : 'reloadTile';
+        tile.actor = this.actor;
+        const params = {
+            type: this.type,
+            uid: tile.uid,
+            tileID: tile.tileID,
+            zoom: tile.tileID.overscaledZ,
+            maxZoom: this.maxzoom,
+            tileSize: this.tileSize,
+            source: this.id,
+            pixelRatio: browser.devicePixelRatio,
+            showCollisionBoxes: this.map.showCollisionBoxes,
+            promoteId: this.promoteId
+        };
+
+        tile.request = this.actor.send(message, params, (err, data) => {
+            delete tile.request;
+            tile.unloadVectorData();
+
+            if (tile.aborted) {
+                return callback(null);
+            }
+
+            if (err) {
+                return callback(err);
+            }
+
+            tile.loadVectorData(data, this.map.painter, message === 'reloadTile');
+
+            return callback(null);
+        });
+    }
+
+    abortTile(tile: Tile) {
+        if (tile.request) {
+            tile.request.cancel();
+            delete tile.request;
+        }
+        tile.aborted = true;
+    }
+
+    unloadTile(tile: Tile) {
+        tile.unloadVectorData();
+        this.actor.send('removeTile', {uid: tile.uid, type: this.type, source: this.id});
+    }
+
+    onRemove() {
+        this._removed = true;
+        this.actor.send('removeSource', {type: this.type, source: this.id});
+    }
+
+    serialize() {
+        return extend({}, this._options, {
+            type: this.type,
+            data: this._data
+        });
+    }
+
+    hasTransition() {
+        return false;
+    }
+}
+
+export default GeoJSONSource;