@mapgis/mapbox-gl 1.9.12 → 16.0.0

package/src/ui/control/navigation_control.js

@@ -0,0 +1,148 @@
+// @flow
+
+import DOM from '../../util/dom';
+import {extend, bindAll} from '../../util/util';
+import DragRotateHandler from '../handler/drag_rotate';
+
+import type Map from '../map';
+
+type Options = {
+    showCompass?: boolean,
+    showZoom?: boolean,
+    visualizePitch?: boolean
+};
+
+const defaultOptions: Options = {
+    showCompass: true,
+    showZoom: true,
+    visualizePitch: false
+};
+
+/**
+ * A `NavigationControl` control contains zoom buttons and a compass.
+ *
+ * @implements {IControl}
+ * @param {Object} [options]
+ * @param {Boolean} [options.showCompass=true] If `true` the compass button is included.
+ * @param {Boolean} [options.showZoom=true] If `true` the zoom-in and zoom-out buttons are included.
+ * @param {Boolean} [options.visualizePitch=false] If `true` the pitch is visualized by rotating X-axis of compass.
+ * @example
+ * var nav = new mapboxgl.NavigationControl();
+ * map.addControl(nav, 'top-left');
+ * @see [Display map navigation controls](https://www.mapbox.com/mapbox-gl-js/example/navigation/)
+ * @see [Add a third party vector tile source](https://www.mapbox.com/mapbox-gl-js/example/third-party/)
+ */
+class NavigationControl {
+    _map: Map;
+    options: Options;
+    _container: HTMLElement;
+    _zoomInButton: HTMLButtonElement;
+    _zoomOutButton: HTMLButtonElement;
+    _compass: HTMLButtonElement;
+    _compassIcon: HTMLElement;
+    _handler: DragRotateHandler;
+
+    constructor(options: Options) {
+        this.options = extend({}, defaultOptions, options);
+
+        this._container = DOM.create('div', 'mapboxgl-ctrl mapboxgl-ctrl-group');
+        this._container.addEventListener('contextmenu', (e) => e.preventDefault());
+
+        if (this.options.showZoom) {
+            bindAll([
+                '_setButtonTitle',
+                '_updateZoomButtons'
+            ], this);
+            this._zoomInButton = this._createButton('mapboxgl-ctrl-zoom-in', (e) => this._map.zoomIn({}, {originalEvent: e}));
+            DOM.create('span', `mapboxgl-ctrl-icon`, this._zoomInButton).setAttribute('aria-hidden', true);
+            this._zoomOutButton = this._createButton('mapboxgl-ctrl-zoom-out', (e) => this._map.zoomOut({}, {originalEvent: e}));
+            DOM.create('span', `mapboxgl-ctrl-icon`, this._zoomOutButton).setAttribute('aria-hidden', true);
+        }
+        if (this.options.showCompass) {
+            bindAll([
+                '_rotateCompassArrow'
+            ], this);
+            this._compass = this._createButton('mapboxgl-ctrl-compass', (e) => {
+                if (this.options.visualizePitch) {
+                    this._map.resetNorthPitch({}, {originalEvent: e});
+                } else {
+                    this._map.resetNorth({}, {originalEvent: e});
+                }
+            });
+            this._compassIcon = DOM.create('span', 'mapboxgl-ctrl-icon', this._compass);
+            this._compassIcon.setAttribute('aria-hidden', true);
+        }
+    }
+
+    _updateZoomButtons() {
+        const zoom = this._map.getZoom();
+        this._zoomInButton.disabled = zoom === this._map.getMaxZoom();
+        this._zoomOutButton.disabled = zoom === this._map.getMinZoom();
+    }
+
+    _rotateCompassArrow() {
+        const rotate = this.options.visualizePitch ?
+            `scale(${1 / Math.pow(Math.cos(this._map.transform.pitch * (Math.PI / 180)), 0.5)}) rotateX(${this._map.transform.pitch}deg) rotateZ(${this._map.transform.angle * (180 / Math.PI)}deg)` :
+            `rotate(${this._map.transform.angle * (180 / Math.PI)}deg)`;
+
+        this._compassIcon.style.transform = rotate;
+    }
+
+    onAdd(map: Map) {
+        this._map = map;
+        if (this.options.showZoom) {
+            this._setButtonTitle(this._zoomInButton, 'ZoomIn');
+            this._setButtonTitle(this._zoomOutButton, 'ZoomOut');
+            this._map.on('zoom', this._updateZoomButtons);
+            this._updateZoomButtons();
+        }
+        if (this.options.showCompass) {
+            this._setButtonTitle(this._compass, 'ResetBearing');
+            if (this.options.visualizePitch) {
+                this._map.on('pitch', this._rotateCompassArrow);
+            }
+            this._map.on('rotate', this._rotateCompassArrow);
+            this._rotateCompassArrow();
+            // Temporary fix with clickTolerance (https://github.com/mapbox/mapbox-gl-js/pull/9015)
+            this._handler = new DragRotateHandler(map, {button: 'left', element: this._compass, clickTolerance: map.dragRotate._clickTolerance});
+            DOM.addEventListener(this._compass, 'mousedown', this._handler.onMouseDown);
+            DOM.addEventListener(this._compass, 'touchstart', this._handler.onMouseDown, {passive: false});
+            this._handler.enable();
+        }
+        return this._container;
+    }
+
+    onRemove() {
+        DOM.remove(this._container);
+        if (this.options.showZoom) {
+            this._map.off('zoom', this._updateZoomButtons);
+        }
+        if (this.options.showCompass) {
+            if (this.options.visualizePitch) {
+                this._map.off('pitch', this._rotateCompassArrow);
+            }
+            this._map.off('rotate', this._rotateCompassArrow);
+            DOM.removeEventListener(this._compass, 'mousedown', this._handler.onMouseDown);
+            DOM.removeEventListener(this._compass, 'touchstart', this._handler.onMouseDown, {passive: false});
+            this._handler.disable();
+            delete this._handler;
+        }
+
+        delete this._map;
+    }
+
+    _createButton(className: string, fn: () => mixed) {
+        const a = DOM.create('button', className, this._container);
+        a.type = 'button';
+        a.addEventListener('click', fn);
+        return a;
+    }
+
+    _setButtonTitle(button: HTMLButtonElement, title: string) {
+        const str = this._map._getUIString(`NavigationControl.${title}`);
+        button.title = str;
+        button.setAttribute('aria-label', str);
+    }
+}
+
+export default NavigationControl;

package/src/ui/control/scale_control.js

@@ -0,0 +1,142 @@
+// @flow
+
+import DOM from '../../util/dom';
+import {extend, bindAll} from '../../util/util';
+
+import type Map from '../map';
+
+type Unit = 'imperial' | 'metric' | 'nautical';
+
+type Options = {
+    maxWidth?: number,
+    unit?: Unit;
+};
+
+const defaultOptions: Options = {
+    maxWidth: 100,
+    unit: 'metric'
+};
+
+/**
+ * A `ScaleControl` control displays the ratio of a distance on the map to the corresponding distance on the ground.
+ *
+ * @implements {IControl}
+ * @param {Object} [options]
+ * @param {number} [options.maxWidth='100'] The maximum length of the scale control in pixels.
+ * @param {string} [options.unit='metric'] Unit of the distance (`'imperial'`, `'metric'` or `'nautical'`).
+ * @example
+ * var scale = new mapboxgl.ScaleControl({
+ *     maxWidth: 80,
+ *     unit: 'imperial'
+ * });
+ * map.addControl(scale);
+ *
+ * scale.setUnit('metric');
+ */
+class ScaleControl {
+    _map: Map;
+    _container: HTMLElement;
+    options: Options;
+
+    constructor(options: Options) {
+        this.options = extend({}, defaultOptions, options);
+
+        bindAll([
+            '_onMove',
+            'setUnit'
+        ], this);
+    }
+
+    getDefaultPosition() {
+        return 'bottom-left';
+    }
+
+    _onMove() {
+        updateScale(this._map, this._container, this.options);
+    }
+
+    onAdd(map: Map) {
+        this._map = map;
+        this._container = DOM.create('div', 'mapboxgl-ctrl mapboxgl-ctrl-scale', map.getContainer());
+
+        this._map.on('move', this._onMove);
+        this._onMove();
+
+        return this._container;
+    }
+
+    onRemove() {
+        DOM.remove(this._container);
+        this._map.off('move', this._onMove);
+        this._map = (undefined: any);
+    }
+
+    /**
+     * Set the scale's unit of the distance
+     *
+     * @param unit Unit of the distance (`'imperial'`, `'metric'` or `'nautical'`).
+     */
+    setUnit(unit: Unit) {
+        this.options.unit = unit;
+        updateScale(this._map, this._container, this.options);
+    }
+}
+
+export default ScaleControl;
+
+function updateScale(map, container, options) {
+    // A horizontal scale is imagined to be present at center of the map
+    // container with maximum length (Default) as 100px.
+    // Using spherical law of cosines approximation, the real distance is
+    // found between the two coordinates.
+    const maxWidth = options && options.maxWidth || 100;
+
+    const y = map._container.clientHeight / 2;
+    const left = map.unproject([0, y]);
+    const right = map.unproject([maxWidth, y]);
+    const maxMeters = left.distanceTo(right);
+    // The real distance corresponding to 100px scale length is rounded off to
+    // near pretty number and the scale length for the same is found out.
+    // Default unit of the scale is based on User's locale.
+    if (options && options.unit === 'imperial') {
+        const maxFeet = 3.2808 * maxMeters;
+        if (maxFeet > 5280) {
+            const maxMiles = maxFeet / 5280;
+            setScale(container, maxWidth, maxMiles, map._getUIString('ScaleControl.Miles'));
+        } else {
+            setScale(container, maxWidth, maxFeet, map._getUIString('ScaleControl.Feet'));
+        }
+    } else if (options && options.unit === 'nautical') {
+        const maxNauticals = maxMeters / 1852;
+        setScale(container, maxWidth, maxNauticals, map._getUIString('ScaleControl.NauticalMiles'));
+    } else if (maxMeters >= 1000) {
+        setScale(container, maxWidth, maxMeters / 1000, map._getUIString('ScaleControl.Kilometers'));
+    } else {
+        setScale(container, maxWidth, maxMeters, map._getUIString('ScaleControl.Meters'));
+    }
+}
+
+function setScale(container, maxWidth, maxDistance, unit) {
+    const distance = getRoundNum(maxDistance);
+    const ratio = distance / maxDistance;
+    container.style.width = `${maxWidth * ratio}px`;
+    container.innerHTML = `${distance} ${unit}`;
+}
+
+function getDecimalRoundNum(d) {
+    const multiplier = Math.pow(10, Math.ceil(-Math.log(d) / Math.LN10));
+    return Math.round(d * multiplier) / multiplier;
+}
+
+function getRoundNum(num) {
+    const pow10 = Math.pow(10, (`${Math.floor(num)}`).length - 1);
+    let d = num / pow10;
+
+    d = d >= 10 ? 10 :
+        d >= 5 ? 5 :
+        d >= 3 ? 3 :
+        d >= 2 ? 2 :
+        d >= 1 ? 1 : getDecimalRoundNum(d);
+
+    return pow10 * d;
+}

package/src/ui/crs.js

@@ -0,0 +1,64 @@
+// @flow
+/***
+ * @author gyj 2019-2-21
+ * @description mapbox坐标系定义类
+ */
+class CRS {
+    constructor(code, extent, unit) {
+        this.epsgCode = code;
+        this.extent = extent;
+        this.unit = unit || "degree";
+        CRS.set(this);
+    }
+
+    getExtent() {
+        if (!this._rectifyExtent) {
+            const t = this.extent[2] - this.extent[0],
+                e = this.extent[3] - this.extent[1];
+            if (t === e) this._rectifyExtent = [this.extent[0], this.extent[1], this.extent[2], this.extent[3]];
+            else {
+                const i = Math.max(t, e);
+                // [-180, -270, 180, 90]
+                // [-180, 90]   |------|------|    [180, 90]
+                //              |--lt--|--rt--|
+                //              |------|------|
+                //              |--lb--|--rb--|
+                // [-180, -270] |------|------|    [180, -270]
+                this._rectifyExtent = [this.extent[0], this.extent[3] - i, this.extent[0] + i, this.extent[3]];
+            }
+        }
+        return this._rectifyExtent;
+    }
+
+    getOrigin() {
+        return [this.extent[0], this.extent[3]];
+    }
+
+    getEpsgCode() {
+        return this.epsgCode;
+    }
+
+    getUnit() {
+        return this.unit;
+    }
+}
+
+export default CRS;
+
+CRS.get = function (code) {
+    for (const e in CRS) {
+        if (CRS.hasOwnProperty(e) && CRS[e].getEpsgCode && CRS[e].getEpsgCode() === code) {
+            return CRS[e];
+        }
+    }
+    return null;
+};
+CRS.set = function (crs) {
+    const e = crs.getEpsgCode().replace(":", "").toUpperCase();
+    CRS[e] = crs;
+};
+CRS.EPSG4326 = new CRS("EPSG:4326", [-180, -90, 180, 90]);
+CRS.EPSG4214 = new CRS("EPSG:4214", [-180, -90, 180, 90]);
+CRS.EPSG4490 = new CRS("EPSG:4490", [-180, -90, 180, 90]);
+CRS.EPSG4610 = new CRS("EPSG:4610", [-180, -90, 180, 90]);
+CRS.EPSG3857 = new CRS("EPSG:3857", [-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892]);

package/src/ui/default_locale.js

@@ -0,0 +1,20 @@
+// @flow
+
+const defaultLocale = {
+    'FullscreenControl.Enter': 'Enter fullscreen',
+    'FullscreenControl.Exit': 'Exit fullscreen',
+    'GeolocateControl.FindMyLocation': 'Find my location',
+    'GeolocateControl.LocationNotAvailable': 'Location not available',
+    'LogoControl.Title': 'Mapbox logo',
+    'NavigationControl.ResetBearing': 'Reset bearing to north',
+    'NavigationControl.ZoomIn': 'Zoom in',
+    'NavigationControl.ZoomOut': 'Zoom out',
+    'ScaleControl.Feet': 'ft',
+    'ScaleControl.Meters': 'm',
+    'ScaleControl.Kilometers': 'km',
+    'ScaleControl.Miles': 'mi',
+    'ScaleControl.NauticalMiles': 'nm'
+
+};
+
+export default defaultLocale;