@mapgis/mapbox-gl 16.0.1 → 16.2.0

package/src/ui/control/navigation_control.js

@@ -1,148 +0,0 @@
-// @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

@@ -1,142 +0,0 @@
-// @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

@@ -1,64 +0,0 @@
-// @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

@@ -1,20 +0,0 @@
-// @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;