@antv/l7-component 2.18.2 → 2.18.3

package/es/control/layerSwitch.js

@@ -0,0 +1,141 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _get from "@babel/runtime/helpers/esm/get";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import { createL7Icon } from "../utils/icon";
+import SelectControl from "./baseControl/selectControl";
+export { LayerSwitch };
+var LayerSwitch = /*#__PURE__*/function (_SelectControl) {
+  _inherits(LayerSwitch, _SelectControl);
+  var _super = _createSuper(LayerSwitch);
+  function LayerSwitch() {
+    var _this;
+    _classCallCheck(this, LayerSwitch);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "onLayerChange", function () {
+      var _this$controlOption$l;
+      if ((_this$controlOption$l = _this.controlOption.layers) !== null && _this$controlOption$l !== void 0 && _this$controlOption$l.length) {
+        return;
+      }
+      _this.selectValue = _this.getLayerVisible();
+      _this.setOptions({
+        options: _this.getLayerOptions()
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "onLayerVisibleChane", function () {
+      _this.setSelectValue(_this.getLayerVisible());
+    });
+    _defineProperty(_assertThisInitialized(_this), "onSelectChange", function () {
+      _this.layers.forEach(function (layer) {
+        var needShow = _this.selectValue.includes(layer.name);
+        var isShow = layer.isVisible();
+        if (needShow && !isShow) {
+          layer.show();
+        }
+        if (!needShow && isShow) {
+          layer.hide();
+        }
+      });
+    });
+    return _this;
+  }
+  _createClass(LayerSwitch, [{
+    key: "layers",
+    get: function get() {
+      var layerService = this.layerService;
+      var layers = this.controlOption.layers;
+      if (Array.isArray(layers) && layers.length) {
+        var layerInstances = [];
+        layers.forEach(function (layer) {
+          if (layer instanceof Object) {
+            layerInstances.push(layer);
+          }
+          if (typeof layer === 'string') {
+            var targetLayer = layerService.getLayer(layer) || layerService.getLayerByName(layer);
+            if (targetLayer) {
+              layerInstances.push(targetLayer);
+            }
+          }
+        });
+        return layerInstances;
+      }
+      return layerService.getLayers() || [];
+    }
+  }, {
+    key: "getDefault",
+    value: function getDefault(option) {
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(LayerSwitch.prototype), "getDefault", this).call(this, option)), {}, {
+        title: '图层控制',
+        btnIcon: createL7Icon('l7-icon-layer'),
+        options: []
+      });
+    }
+  }, {
+    key: "getLayerVisible",
+    value: function getLayerVisible() {
+      return this.layers.filter(function (layer) {
+        return layer.isVisible();
+      }).map(function (layer) {
+        return layer.name;
+      });
+    }
+  }, {
+    key: "getLayerOptions",
+    value: function getLayerOptions() {
+      return this.layers.map(function (layer) {
+        return {
+          text: layer.name,
+          value: layer.name
+        };
+      });
+    }
+  }, {
+    key: "setOptions",
+    value: function setOptions(option) {
+      var isLayerChange = this.checkUpdateOption(option, ['layers']);
+      _get(_getPrototypeOf(LayerSwitch.prototype), "setOptions", this).call(this, option);
+      if (isLayerChange) {
+        this.selectValue = this.getLayerVisible();
+        this.controlOption.options = this.getLayerOptions();
+        this.popper.setContent(this.getPopperContent(this.controlOption.options));
+      }
+    }
+  }, {
+    key: "onAdd",
+    value: function onAdd() {
+      var _this$controlOption$o;
+      if (!((_this$controlOption$o = this.controlOption.options) !== null && _this$controlOption$o !== void 0 && _this$controlOption$o.length)) {
+        this.controlOption.options = this.getLayerOptions();
+      }
+      if (!this.controlOption.defaultValue) {
+        this.controlOption.defaultValue = this.getLayerVisible();
+      }
+      this.on('selectChange', this.onSelectChange);
+      this.layerService.on('layerChange', this.onLayerChange);
+      return _get(_getPrototypeOf(LayerSwitch.prototype), "onAdd", this).call(this);
+    }
+  }, {
+    key: "onRemove",
+    value: function onRemove() {
+      this.off('selectChange', this.onSelectChange);
+      this.layerService.off('layerChange', this.onLayerChange);
+    }
+  }, {
+    key: "getIsMultiple",
+    value: function getIsMultiple() {
+      return true;
+    }
+  }]);
+  return LayerSwitch;
+}(SelectControl);
+export { LayerSwitch as default };

package/es/control/logo.d.ts

@@ -0,0 +1,13 @@
+import { Control, IControlOption } from './baseControl';
+export interface ILogoControlOption extends IControlOption {
+    img: string;
+    href?: string | null;
+}
+export { Logo };
+export default class Logo extends Control<ILogoControlOption> {
+    getDefault(): ILogoControlOption;
+    onAdd(): HTMLElement;
+    onRemove(): null;
+    setOptions(option: Partial<ILogoControlOption>): void;
+    protected setLogoContent(container: HTMLElement): void;
+}

package/es/control/logo.js

@@ -0,0 +1,75 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _get from "@babel/runtime/helpers/esm/get";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import { DOM } from '@antv/l7-utils';
+import { Control, PositionType } from "./baseControl";
+export { Logo };
+var Logo = /*#__PURE__*/function (_Control) {
+  _inherits(Logo, _Control);
+  var _super = _createSuper(Logo);
+  function Logo() {
+    _classCallCheck(this, Logo);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Logo, [{
+    key: "getDefault",
+    value: function getDefault() {
+      return {
+        position: PositionType.BOTTOMLEFT,
+        name: 'logo',
+        href: 'https://l7.antv.antgroup.com/',
+        img: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*GRb1TKp4HcMAAAAAAAAAAAAAARQnAQ'
+      };
+    }
+  }, {
+    key: "onAdd",
+    value: function onAdd() {
+      var container = DOM.create('div', 'l7-control-logo');
+      this.setLogoContent(container);
+      return container;
+    }
+  }, {
+    key: "onRemove",
+    value: function onRemove() {
+      return null;
+    }
+  }, {
+    key: "setOptions",
+    value: function setOptions(option) {
+      _get(_getPrototypeOf(Logo.prototype), "setOptions", this).call(this, option);
+      if (this.checkUpdateOption(option, ['img', 'href'])) {
+        DOM.clearChildren(this.container);
+        this.setLogoContent(this.container);
+      }
+    }
+  }, {
+    key: "setLogoContent",
+    value: function setLogoContent(container) {
+      var _this$controlOption = this.controlOption,
+        href = _this$controlOption.href,
+        img = _this$controlOption.img;
+      var imgDOM = DOM.create('img');
+      imgDOM.setAttribute('src', img);
+      imgDOM.setAttribute('aria-label', 'AntV logo');
+      DOM.setUnDraggable(imgDOM);
+      if (href) {
+        var anchorDOM = DOM.create('a', 'l7-control-logo-link');
+        anchorDOM.target = '_blank';
+        anchorDOM.href = href;
+        anchorDOM.rel = 'noopener nofollow';
+        anchorDOM.setAttribute('rel', 'noopener nofollow');
+        anchorDOM.appendChild(imgDOM);
+        container.appendChild(anchorDOM);
+      } else {
+        container.appendChild(imgDOM);
+      }
+    }
+  }]);
+  return Logo;
+}(Control);
+export { Logo as default };

package/es/control/mapTheme.d.ts

@@ -0,0 +1,10 @@
+import SelectControl, { ControlOptionItem, ISelectControlOption } from './baseControl/selectControl';
+export { MapTheme };
+export default class MapTheme extends SelectControl<ISelectControlOption> {
+    getDefault(option?: Partial<ISelectControlOption>): ISelectControlOption;
+    getStyleOptions(): ControlOptionItem[];
+    getMapStyle(): any;
+    onAdd(): HTMLElement;
+    protected onMapThemeChange: () => void;
+    protected getIsMultiple(): boolean;
+}

package/es/control/mapTheme.js

@@ -0,0 +1,110 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _get from "@babel/runtime/helpers/esm/get";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import { GaodeMapStyleConfig, MapboxMapStyleConfig } from "../constants";
+import { createL7Icon } from "../utils/icon";
+import SelectControl from "./baseControl/selectControl";
+export { MapTheme };
+var MapTheme = /*#__PURE__*/function (_SelectControl) {
+  _inherits(MapTheme, _SelectControl);
+  var _super = _createSuper(MapTheme);
+  function MapTheme() {
+    var _this;
+    _classCallCheck(this, MapTheme);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "onMapThemeChange", function () {
+      _this.mapsService.setMapStyle(_this.selectValue[0]);
+    });
+    return _this;
+  }
+  _createClass(MapTheme, [{
+    key: "getDefault",
+    value: function getDefault(option) {
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(MapTheme.prototype), "getDefault", this).call(this, option)), {}, {
+        title: '地图样式',
+        btnIcon: createL7Icon('l7-icon-color'),
+        options: []
+      });
+    }
+  }, {
+    key: "getStyleOptions",
+    value: function getStyleOptions() {
+      var mapStyleConfig = this.mapsService.getType() === 'mapbox' ? MapboxMapStyleConfig : GaodeMapStyleConfig;
+      return Object.entries(this.mapsService.getMapStyleConfig()).filter(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          key = _ref2[0],
+          value = _ref2[1];
+        return typeof value === 'string' && key !== 'blank';
+      }).map(function (_ref3) {
+        var _mapStyleConfig$key;
+        var _ref4 = _slicedToArray(_ref3, 2),
+          key = _ref4[0],
+          value = _ref4[1];
+        // @ts-ignore
+        var _ref5 = (_mapStyleConfig$key = mapStyleConfig[key]) !== null && _mapStyleConfig$key !== void 0 ? _mapStyleConfig$key : {},
+          text = _ref5.text,
+          img = _ref5.img;
+        return {
+          text: text !== null && text !== void 0 ? text : key,
+          value: value,
+          img: img,
+          key: key
+        };
+      });
+    }
+  }, {
+    key: "getMapStyle",
+    value: function getMapStyle() {
+      return this.mapsService.getMapStyle();
+    }
+  }, {
+    key: "onAdd",
+    value: function onAdd() {
+      var _this$controlOption$o,
+        _this2 = this;
+      if (!((_this$controlOption$o = this.controlOption.options) !== null && _this$controlOption$o !== void 0 && _this$controlOption$o.length)) {
+        this.controlOption.options = this.getStyleOptions();
+      }
+      if (this.controlOption.defaultValue) {
+        var _this$controlOption$o2, _this$controlOption$o3;
+        var defaultValue = this.controlOption.defaultValue;
+        this.controlOption.defaultValue = (_this$controlOption$o2 = (_this$controlOption$o3 = this.controlOption.options.find(function (item) {
+          return item.key === defaultValue;
+        })) === null || _this$controlOption$o3 === void 0 ? void 0 : _this$controlOption$o3.value) !== null && _this$controlOption$o2 !== void 0 ? _this$controlOption$o2 : defaultValue;
+      } else {
+        var defaultStyle = this.getMapStyle();
+        if (defaultStyle) {
+          this.controlOption.defaultValue = defaultStyle;
+        } else {
+          // @ts-ignore
+          this.mapsService.map.once('styledata', function () {
+            var mapboxStyle = _this2.mapsService.getMapStyle();
+            _this2.controlOption.defaultValue = mapboxStyle;
+            _this2.setSelectValue(mapboxStyle, false);
+          });
+        }
+      }
+      this.on('selectChange', this.onMapThemeChange);
+      return _get(_getPrototypeOf(MapTheme.prototype), "onAdd", this).call(this);
+    }
+  }, {
+    key: "getIsMultiple",
+    value: function getIsMultiple() {
+      return false;
+    }
+  }]);
+  return MapTheme;
+}(SelectControl);
+export { MapTheme as default };

package/es/control/mouseLocation.d.ts

@@ -0,0 +1,15 @@
+import { Position } from '@antv/l7-core';
+import Control, { IControlOption } from './baseControl/control';
+export interface IMouseLocationControlOption extends IControlOption {
+    transform: (position: Position) => Position;
+}
+export { MouseLocation };
+export default class MouseLocation extends Control<IMouseLocationControlOption> {
+    protected location: Position;
+    getLocation(): Position;
+    getDefault(option?: Partial<IMouseLocationControlOption>): IMouseLocationControlOption;
+    onAdd(): HTMLElement;
+    onRemove(): void;
+    protected onMouseMove: (e: any) => void;
+    protected insertLocation2HTML(position: Position): void;
+}

package/es/control/mouseLocation.js

@@ -0,0 +1,83 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _get from "@babel/runtime/helpers/esm/get";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import { PositionType } from '@antv/l7-core';
+import { DOM } from '@antv/l7-utils';
+import Control from "./baseControl/control";
+export { MouseLocation };
+var MouseLocation = /*#__PURE__*/function (_Control) {
+  _inherits(MouseLocation, _Control);
+  var _super = _createSuper(MouseLocation);
+  function MouseLocation() {
+    var _this;
+    _classCallCheck(this, MouseLocation);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "location", [0, 0]);
+    _defineProperty(_assertThisInitialized(_this), "onMouseMove", function (e) {
+      var position = _this.location;
+      var lngLat = e.lngLat || e.lnglat;
+      var transform = _this.controlOption.transform;
+      if (lngLat) {
+        position = [lngLat.lng, lngLat.lat];
+      }
+      _this.location = position;
+      if (transform) {
+        position = transform(position);
+      }
+      _this.insertLocation2HTML(position);
+      _this.emit('locationChange', position);
+    });
+    return _this;
+  }
+  _createClass(MouseLocation, [{
+    key: "getLocation",
+    value: function getLocation() {
+      return this.location;
+    }
+  }, {
+    key: "getDefault",
+    value: function getDefault(option) {
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(MouseLocation.prototype), "getDefault", this).call(this, option)), {}, {
+        position: PositionType.BOTTOMLEFT,
+        transform: function transform(_ref) {
+          var _ref2 = _slicedToArray(_ref, 2),
+            lng = _ref2[0],
+            lat = _ref2[1];
+          return [+(+lng).toFixed(6), +(+lat).toFixed(6)];
+        }
+      });
+    }
+  }, {
+    key: "onAdd",
+    value: function onAdd() {
+      var container = DOM.create('div', 'l7-control-mouse-location');
+      container.innerHTML = '&nbsp;';
+      this.mapsService.on('mousemove', this.onMouseMove);
+      return container;
+    }
+  }, {
+    key: "onRemove",
+    value: function onRemove() {
+      this.mapsService.off('mousemove', this.onMouseMove);
+    }
+  }, {
+    key: "insertLocation2HTML",
+    value: function insertLocation2HTML(position) {
+      this.container.innerText = position.join(', ');
+    }
+  }]);
+  return MouseLocation;
+}(Control);
+export { MouseLocation as default };

package/es/control/scale.d.ts

@@ -0,0 +1,34 @@
+import { Control, IControlOption, PositionType } from './baseControl';
+export interface IScaleControlOption extends IControlOption {
+    lockWidth: boolean;
+    maxWidth: number;
+    metric: boolean;
+    updateWhenIdle: boolean;
+    imperial: boolean;
+}
+export { Scale };
+export default class Scale extends Control<IScaleControlOption> {
+    private mScale;
+    private iScale;
+    getDefault(option: Partial<IScaleControlOption>): {
+        name: string;
+        position: PositionType;
+        maxWidth: number;
+        metric: boolean;
+        updateWhenIdle: boolean;
+        imperial: boolean;
+        lockWidth: boolean;
+        className?: string | undefined;
+        style?: string | undefined;
+    };
+    onAdd(): HTMLElement;
+    onRemove(): void;
+    setOptions(newOption: Partial<IScaleControlOption>): void;
+    update: () => void;
+    updateScales(maxMeters: number): void;
+    private resetScaleLines;
+    private updateScale;
+    private getRoundNum;
+    private updateMetric;
+    private updateImperial;
+}

package/es/control/scale.js

@@ -0,0 +1,149 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _get from "@babel/runtime/helpers/esm/get";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import { DOM, lnglatDistance } from '@antv/l7-utils';
+import { Control, PositionType } from "./baseControl";
+export { Scale };
+var Scale = /*#__PURE__*/function (_Control) {
+  _inherits(Scale, _Control);
+  var _super = _createSuper(Scale);
+  function Scale() {
+    var _this;
+    _classCallCheck(this, Scale);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "update", function () {
+      var mapsService = _this.mapsService;
+      var maxWidth = _this.controlOption.maxWidth;
+      var y = mapsService.getSize()[1] / 2;
+      var p1 = mapsService.containerToLngLat([0, y]);
+      var p2 = mapsService.containerToLngLat([maxWidth, y]);
+      var maxMeters = lnglatDistance([p1.lng, p1.lat], [p2.lng, p2.lat]);
+      _this.updateScales(maxMeters);
+    });
+    return _this;
+  }
+  _createClass(Scale, [{
+    key: "getDefault",
+    value: function getDefault(option) {
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(Scale.prototype), "getDefault", this).call(this, option)), {}, {
+        name: 'scale',
+        position: PositionType.BOTTOMLEFT,
+        maxWidth: 100,
+        metric: true,
+        updateWhenIdle: false,
+        imperial: false,
+        lockWidth: true
+      });
+    }
+  }, {
+    key: "onAdd",
+    value: function onAdd() {
+      var className = 'l7-control-scale';
+      var container = DOM.create('div', className);
+      this.resetScaleLines(container);
+      var updateWhenIdle = this.controlOption.updateWhenIdle;
+      this.mapsService.on(updateWhenIdle ? 'moveend' : 'mapmove', this.update);
+      this.mapsService.on(updateWhenIdle ? 'zoomend' : 'zoomchange', this.update);
+      return container;
+    }
+  }, {
+    key: "onRemove",
+    value: function onRemove() {
+      var updateWhenIdle = this.controlOption.updateWhenIdle;
+      this.mapsService.off(updateWhenIdle ? 'zoomend' : 'zoomchange', this.update);
+      this.mapsService.off(updateWhenIdle ? 'moveend' : 'mapmove', this.update);
+    }
+  }, {
+    key: "setOptions",
+    value: function setOptions(newOption) {
+      _get(_getPrototypeOf(Scale.prototype), "setOptions", this).call(this, newOption);
+      if (this.checkUpdateOption(newOption, ['lockWidth', 'maxWidth', 'metric', 'updateWhenIdle', 'imperial'])) {
+        this.resetScaleLines(this.container);
+      }
+    }
+  }, {
+    key: "updateScales",
+    value: function updateScales(maxMeters) {
+      var _this$controlOption = this.controlOption,
+        metric = _this$controlOption.metric,
+        imperial = _this$controlOption.imperial;
+      if (metric && maxMeters) {
+        this.updateMetric(maxMeters);
+      }
+      if (imperial && maxMeters) {
+        this.updateImperial(maxMeters);
+      }
+    }
+  }, {
+    key: "resetScaleLines",
+    value: function resetScaleLines(container) {
+      DOM.clearChildren(container);
+      var _this$controlOption2 = this.controlOption,
+        metric = _this$controlOption2.metric,
+        imperial = _this$controlOption2.imperial,
+        maxWidth = _this$controlOption2.maxWidth,
+        lockWidth = _this$controlOption2.lockWidth;
+      if (lockWidth) {
+        DOM.addStyle(container, "width: ".concat(maxWidth, "px"));
+      }
+      if (metric) {
+        this.mScale = DOM.create('div', 'l7-control-scale-line', container);
+      }
+      if (imperial) {
+        this.iScale = DOM.create('div', 'l7-control-scale-line', container);
+      }
+      this.update();
+    }
+  }, {
+    key: "updateScale",
+    value: function updateScale(scale, text, ratio) {
+      var maxWidth = this.controlOption.maxWidth;
+      scale.style.width = Math.round(maxWidth * ratio) + 'px';
+      scale.innerHTML = text;
+    }
+  }, {
+    key: "getRoundNum",
+    value: function getRoundNum(num) {
+      var pow10 = Math.pow(10, (Math.floor(num) + '').length - 1);
+      var d = num / pow10;
+      d = d >= 10 ? 10 : d >= 5 ? 5 : d >= 3 ? 3 : d >= 2 ? 2 : 1;
+      return pow10 * d;
+    }
+  }, {
+    key: "updateMetric",
+    value: function updateMetric(maxMeters) {
+      var meters = this.getRoundNum(maxMeters);
+      var label = meters < 1000 ? meters + ' m' : meters / 1000 + ' km';
+      this.updateScale(this.mScale, label, meters / maxMeters);
+    }
+  }, {
+    key: "updateImperial",
+    value: function updateImperial(maxMeters) {
+      var maxFeet = maxMeters * 3.2808399;
+      var maxMiles;
+      var miles;
+      var feet;
+      if (maxFeet > 5280) {
+        maxMiles = maxFeet / 5280;
+        miles = this.getRoundNum(maxMiles);
+        this.updateScale(this.iScale, miles + ' mi', miles / maxMiles);
+      } else {
+        feet = this.getRoundNum(maxFeet);
+        this.updateScale(this.iScale, feet + ' ft', feet / maxFeet);
+      }
+    }
+  }]);
+  return Scale;
+}(Control);
+export { Scale as default };

package/es/control/zoom.d.ts

@@ -0,0 +1,38 @@
+import { PositionType } from '@antv/l7-core';
+import { DOM } from '@antv/l7-utils';
+import { Control, IControlOption } from './baseControl';
+export interface IZoomControlOption extends IControlOption {
+    zoomInText: DOM.ELType | string;
+    zoomInTitle: string;
+    zoomOutText: DOM.ELType | string;
+    zoomOutTitle: string;
+    showZoom: boolean;
+}
+export { Zoom };
+export default class Zoom extends Control<IZoomControlOption> {
+    private disabled;
+    private zoomInButton;
+    private zoomOutButton;
+    private zoomNumDiv;
+    getDefault(option: Partial<IZoomControlOption>): {
+        position: PositionType;
+        name: string;
+        zoomInText: SVGSVGElement;
+        zoomInTitle: string;
+        zoomOutText: SVGSVGElement;
+        zoomOutTitle: string;
+        showZoom: boolean;
+        className?: string | undefined;
+        style?: string | undefined;
+    };
+    setOptions(newOptions: Partial<IZoomControlOption>): void;
+    onAdd(): HTMLElement;
+    onRemove(): void;
+    disable(): this;
+    enable(): this;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    private resetButtonGroup;
+    private createButton;
+    private updateDisabled;
+}