@antv/l7-component 2.9.36-alpha.1 → 2.9.37

package/lib/control/layer.js

@@ -0,0 +1,362 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _l7Core = require("@antv/l7-core");
+
+var _l7Utils = require("@antv/l7-utils");
+
+var _BaseControl = _interopRequireDefault(require("./BaseControl"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+
+var Layers = /*#__PURE__*/function (_Control) {
+  (0, _inherits2.default)(Layers, _Control);
+
+  var _super = _createSuper(Layers);
+
+  function Layers(cfg) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, Layers);
+    _this = _super.call(this, cfg);
+    _this.layerControlInputs = [];
+    _this.layers = [];
+    _this.lastZIndex = 0;
+    _this.handlingClick = false;
+
+    _this.initLayers();
+
+    (0, _l7Utils.bindAll)(['checkDisabledLayers', 'onLayerChange', 'collapse', 'extend', 'expand', 'onInputClick'], (0, _assertThisInitialized2.default)(_this));
+    return _this;
+  }
+
+  (0, _createClass2.default)(Layers, [{
+    key: "getDefault",
+    value: function getDefault() {
+      return {
+        collapsed: true,
+        position: _l7Core.PositionType.TOPRIGHT,
+        autoZIndex: true,
+        hideSingleBase: false,
+        sortLayers: false,
+        name: 'layers'
+      };
+    }
+  }, {
+    key: "onAdd",
+    value: function onAdd() {
+      var _this2 = this;
+
+      this.initLayout();
+      this.update();
+      this.mapsService.on('zoomend', this.checkDisabledLayers);
+      this.layers.forEach(function (layerItem) {
+        layerItem.layer.on('remove', _this2.onLayerChange);
+        layerItem.layer.on('add', _this2.onLayerChange);
+      });
+      return this.container;
+    }
+  }, {
+    key: "addVisualLayer",
+    value: function addVisualLayer(layer, name) {
+      this.addLayer(layer, name, true);
+      return this.mapsService ? this.update() : this;
+    }
+  }, {
+    key: "expand",
+    value: function expand() {
+      var _this$renderService$g = this.renderService.getViewportSize(),
+          height = _this$renderService$g.height;
+
+      _l7Utils.DOM.addClass(this.container, 'l7-control-layers-expanded');
+
+      this.form.style.height = 'null';
+      var acceptableHeight = height - (this.container.offsetTop + 50);
+
+      if (acceptableHeight < this.form.clientHeight) {
+        _l7Utils.DOM.addClass(this.form, 'l7-control-layers-scrollbar');
+
+        this.form.style.height = acceptableHeight + 'px';
+      } else {
+        _l7Utils.DOM.removeClass(this.form, 'l7-control-layers-scrollbar');
+      }
+
+      this.checkDisabledLayers();
+      return this;
+    }
+  }, {
+    key: "collapse",
+    value: function collapse() {
+      _l7Utils.DOM.removeClass(this.container, 'l7-control-layers-expanded');
+
+      return this;
+    }
+  }, {
+    key: "onRemove",
+    value: function onRemove() {
+      var _this3 = this;
+
+      if (!this.mapsService) {
+        return;
+      }
+
+      this.mapsService.off('click', this.collapse);
+      this.layers.forEach(function (layerItem) {
+        layerItem.layer.off('remove', _this3.onLayerChange);
+        layerItem.layer.off('add', _this3.onLayerChange);
+      });
+    }
+  }, {
+    key: "initLayout",
+    value: function initLayout() {
+      var className = 'l7-control-layers';
+
+      var container = this.container = _l7Utils.DOM.create('div', className);
+
+      var collapsed = this.controlOption.collapsed; // makes this work on IE touch devices by stopping it from firing a mouseout event when the touch is released
+
+      container.setAttribute('aria-haspopup', 'true');
+
+      var form = this.form = _l7Utils.DOM.create('form', className + '-list');
+
+      if (collapsed) {
+        this.mapsService.on('click', this.collapse);
+        container.addEventListener('mouseenter', this.expand);
+        container.addEventListener('mouseleave', this.collapse);
+      }
+
+      this.layersLink = _l7Utils.DOM.create('a', className + '-toggle', container);
+      var link = this.layersLink; // link.href = '#';
+
+      link.title = 'Layers';
+
+      if (!collapsed) {
+        this.expand();
+      }
+
+      this.baseLayersList = _l7Utils.DOM.create('div', className + '-base', form);
+      this.separator = _l7Utils.DOM.create('div', className + '-separator', form);
+      this.overlaysList = _l7Utils.DOM.create('div', className + '-overlays', form);
+      container.appendChild(form);
+    }
+  }, {
+    key: "initLayers",
+    value: function initLayers() {
+      var _this4 = this;
+
+      var _this$controlOption = this.controlOption,
+          _this$controlOption$b = _this$controlOption.baseLayers,
+          baseLayers = _this$controlOption$b === void 0 ? {} : _this$controlOption$b,
+          _this$controlOption$o = _this$controlOption.overlayers,
+          overlayers = _this$controlOption$o === void 0 ? {} : _this$controlOption$o;
+      Object.keys(baseLayers).forEach(function (name) {
+        // baseLayers[name].once('inited', this.update);
+        _this4.addLayer(baseLayers[name], name, false);
+      });
+      Object.keys(overlayers).forEach(function (name) {
+        // overlayers[name].once('inited', this.update);
+        _this4.addLayer(overlayers[name], name, true);
+      });
+    }
+  }, {
+    key: "update",
+    value: function update() {
+      if (!this.container) {
+        return this;
+      }
+
+      _l7Utils.DOM.empty(this.baseLayersList);
+
+      _l7Utils.DOM.empty(this.overlaysList);
+
+      this.layerControlInputs = [];
+      var baseLayersPresent;
+      var overlaysPresent;
+      var i;
+      var obj;
+      var baseLayersCount = 0;
+
+      for (i = 0; i < this.layers.length; i++) {
+        obj = this.layers[i];
+        this.addItem(obj);
+        overlaysPresent = overlaysPresent || obj.overlay;
+        baseLayersPresent = baseLayersPresent || !obj.overlay;
+        baseLayersCount += !obj.overlay ? 1 : 0;
+      } // Hide base layers section if there's only one layer.
+
+
+      if (this.controlOption.hideSingleBase) {
+        baseLayersPresent = baseLayersPresent && baseLayersCount > 1;
+        this.baseLayersList.style.display = baseLayersPresent ? '' : 'none';
+      }
+
+      this.separator.style.display = overlaysPresent && baseLayersPresent ? '' : 'none';
+      return this;
+    }
+  }, {
+    key: "checkDisabledLayers",
+    value: function checkDisabledLayers() {
+      var inputs = this.layerControlInputs;
+      var input;
+      var layer;
+      var zoom = this.mapsService.getZoom();
+
+      for (var i = inputs.length - 1; i >= 0; i--) {
+        input = inputs[i];
+        layer = this.layerService.getLayer(input.layerId);
+
+        if (layer && layer.inited) {
+          var minZoom = layer.getMinZoom();
+          var maxZoom = layer.getMaxZoom();
+          input.disabled = zoom < minZoom || zoom > maxZoom;
+        }
+      }
+    }
+  }, {
+    key: "addLayer",
+    value: function addLayer(layer, name, overlay) {
+      if (this.mapsService) {
+        layer.on('add', this.onLayerChange);
+        layer.on('remove', this.onLayerChange);
+      }
+
+      this.layers.push({
+        layer: layer,
+        name: name,
+        overlay: overlay
+      });
+      var _this$controlOption2 = this.controlOption,
+          sortLayers = _this$controlOption2.sortLayers,
+          sortFunction = _this$controlOption2.sortFunction,
+          autoZIndex = _this$controlOption2.autoZIndex;
+
+      if (sortLayers) {
+        this.layers.sort(function (a, b) {
+          return sortFunction(a.layer, b.layer, a.name, b.name);
+        });
+      }
+
+      if (autoZIndex && layer.setZIndex) {
+        this.lastZIndex++;
+        layer.setZIndex(this.lastZIndex);
+      }
+
+      this.expandIfNotCollapsed();
+    }
+  }, {
+    key: "expandIfNotCollapsed",
+    value: function expandIfNotCollapsed() {
+      if (this.mapsService && !this.controlOption.collapsed) {
+        this.expand();
+      }
+
+      return this;
+    }
+  }, {
+    key: "onLayerChange",
+    value: function onLayerChange(e) {
+      if (!this.handlingClick) {
+        this.update();
+      }
+
+      var obj = this.layerService.getLayer(e.target.layerId); // @ts-ignore
+
+      var type = obj !== null && obj !== void 0 && obj.overlay ? e.type === 'add' ? 'overlayadd' : 'overlayremove' : e.type === 'add' ? 'baselayerchange' : null;
+
+      if (type) {
+        this.emit(type, obj);
+      }
+    }
+  }, {
+    key: "createRadioElement",
+    value: function createRadioElement(name, checked) {
+      var radioHtml = '<input type="radio" class="l7-control-layers-selector" name="' + name + '"' + (checked ? ' checked="checked"' : '') + '/>';
+      var radioFragment = document.createElement('div');
+      radioFragment.innerHTML = radioHtml;
+      return radioFragment.firstChild;
+    }
+  }, {
+    key: "addItem",
+    value: function addItem(obj) {
+      var label = document.createElement('label');
+      var layer = this.layerService.getLayer(obj.layer.id);
+      var checked = layer && layer.inited && obj.layer.isVisible();
+      var input;
+
+      if (obj.overlay) {
+        input = document.createElement('input');
+        input.type = 'checkbox';
+        input.className = 'l7-control-layers-selector';
+        input.defaultChecked = checked;
+      } else {
+        input = this.createRadioElement('l7-base-layers', checked);
+      }
+
+      this.layerControlInputs.push(input);
+      input.layerId = obj.layer.id;
+      input.addEventListener('click', this.onInputClick);
+      var name = document.createElement('span');
+      name.innerHTML = ' ' + obj.name;
+      var holder = document.createElement('div');
+      label.appendChild(holder);
+      holder.appendChild(input);
+      holder.appendChild(name);
+      var container = obj.overlay ? this.overlaysList : this.baseLayersList;
+      container.appendChild(label);
+      this.checkDisabledLayers();
+      return label;
+    }
+  }, {
+    key: "onInputClick",
+    value: function onInputClick() {
+      var inputs = this.layerControlInputs;
+      var input;
+      var layer;
+      var addedLayers = [];
+      var removedLayers = [];
+      this.handlingClick = true;
+
+      for (var i = inputs.length - 1; i >= 0; i--) {
+        input = inputs[i];
+        layer = this.layerService.getLayer(input.layerId);
+
+        if (input.checked) {
+          addedLayers.push(layer);
+        } else if (!input.checked) {
+          removedLayers.push(layer);
+        }
+      }
+
+      removedLayers.forEach(function (l) {
+        l.hide();
+      });
+      addedLayers.forEach(function (l) {
+        l.show();
+      });
+      this.handlingClick = false;
+    }
+  }]);
+  return Layers;
+}(_BaseControl.default);
+
+exports.default = Layers;

package/lib/control/logo.js

@@ -2,17 +2,17 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Logo = void 0;
+exports.default = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -21,7 +21,11 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _l7Utils = require("@antv/l7-utils");
 
-var _baseControl = require("./baseControl");
+var _BaseControl = _interopRequireWildcard(require("./BaseControl"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -41,18 +45,25 @@ var Logo = /*#__PURE__*/function (_Control) {
     key: "getDefault",
     value: function getDefault() {
       return {
-        position: _baseControl.PositionType.BOTTOMLEFT,
-        name: 'logo',
-        href: 'https://l7.antv.vision/',
-        img: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*GRb1TKp4HcMAAAAAAAAAAAAAARQnAQ'
+        position: _BaseControl.PositionType.BOTTOMLEFT,
+        name: 'logo'
       };
     }
   }, {
     key: "onAdd",
     value: function onAdd() {
-      var container = _l7Utils.DOM.create('div', 'l7-control-logo');
+      var className = 'l7-control-logo';
+
+      var container = _l7Utils.DOM.create('div', className);
+
+      var anchor = _l7Utils.DOM.create('a', 'l7-ctrl-logo');
 
-      this.setLogoContent(container);
+      anchor.target = '_blank';
+      anchor.rel = 'noopener nofollow';
+      anchor.href = 'https://antv.alipay.com/l7';
+      anchor.setAttribute('aria-label', 'AntV logo');
+      anchor.setAttribute('rel', 'noopener nofollow');
+      container.appendChild(anchor);
       return container;
     }
   }, {
@@ -60,46 +71,8 @@ var Logo = /*#__PURE__*/function (_Control) {
     value: function onRemove() {
       return null;
     }
-  }, {
-    key: "setOptions",
-    value: function setOptions(option) {
-      (0, _get2.default)((0, _getPrototypeOf2.default)(Logo.prototype), "setOptions", this).call(this, option);
-
-      if (this.checkUpdateOption(option, ['img', 'href'])) {
-        _l7Utils.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 = _l7Utils.DOM.create('img');
-
-      imgDOM.setAttribute('src', img);
-      imgDOM.setAttribute('aria-label', 'AntV logo');
-
-      _l7Utils.DOM.setUnDraggable(imgDOM);
-
-      if (href) {
-        var anchorDOM = _l7Utils.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;
-}(_baseControl.Control);
+}(_BaseControl.default);
 
-exports.default = exports.Logo = Logo;
+exports.default = Logo;

package/lib/control/scale.js

@@ -2,12 +2,12 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Scale = void 0;
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+exports.default = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -15,19 +15,19 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _l7Utils = require("@antv/l7-utils");
 
-var _baseControl = require("./baseControl");
+var _BaseControl = _interopRequireWildcard(require("./BaseControl"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -38,41 +38,26 @@ var Scale = /*#__PURE__*/function (_Control) {
 
   var _super = _createSuper(Scale);
 
-  function Scale() {
+  function Scale(cfg) {
     var _this;
 
     (0, _classCallCheck2.default)(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));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 = (0, _l7Utils.lnglatDistance)([p1.lng, p1.lat], [p2.lng, p2.lat]);
-
-      _this.updateScales(maxMeters);
-    });
+    _this = _super.call(this, cfg);
+    (0, _l7Utils.bindAll)(['update'], (0, _assertThisInitialized2.default)(_this));
     return _this;
   }
 
   (0, _createClass2.default)(Scale, [{
     key: "getDefault",
-    value: function getDefault(option) {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _get2.default)((0, _getPrototypeOf2.default)(Scale.prototype), "getDefault", this).call(this, option)), {}, {
-        name: 'scale',
-        position: _baseControl.PositionType.BOTTOMLEFT,
+    value: function getDefault() {
+      return {
+        position: _BaseControl.PositionType.BOTTOMLEFT,
         maxWidth: 100,
         metric: true,
         updateWhenIdle: false,
         imperial: false,
-        lockWidth: true
-      });
+        name: 'scale'
+      };
     }
   }, {
     key: "onAdd",
@@ -81,10 +66,13 @@ var Scale = /*#__PURE__*/function (_Control) {
 
       var container = _l7Utils.DOM.create('div', className);
 
-      this.resetScaleLines(container);
-      var updateWhenIdle = this.controlOption.updateWhenIdle;
+      this.addScales(className + '-line', container);
+      var updateWhenIdle = this.controlOption.updateWhenIdle; // TODO: 高德地图和MapBox地图事件不一致问题
+      // 高德zoomchange
+
       this.mapsService.on(updateWhenIdle ? 'moveend' : 'mapmove', this.update);
       this.mapsService.on(updateWhenIdle ? 'zoomend' : 'zoomchange', this.update);
+      this.update();
       return container;
     }
   }, {
@@ -95,13 +83,15 @@ var Scale = /*#__PURE__*/function (_Control) {
       this.mapsService.off(updateWhenIdle ? 'moveend' : 'mapmove', this.update);
     }
   }, {
-    key: "setOptions",
-    value: function setOptions(newOption) {
-      (0, _get2.default)((0, _getPrototypeOf2.default)(Scale.prototype), "setOptions", this).call(this, newOption);
-
-      if (this.checkUpdateOption(newOption, ['lockWidth', 'maxWidth', 'metric', 'updateWhenIdle', 'imperial'])) {
-        this.resetScaleLines(this.container);
-      }
+    key: "update",
+    value: function update() {
+      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 = (0, _l7Utils.lnglatDistance)([p1.lng, p1.lat], [p2.lng, p2.lat]);
+      this.updateScales(maxMeters);
     }
   }, {
     key: "updateScales",
@@ -118,46 +108,6 @@ var Scale = /*#__PURE__*/function (_Control) {
         this.updateImperial(maxMeters);
       }
     }
-  }, {
-    key: "resetScaleLines",
-    value: function resetScaleLines(container) {
-      _l7Utils.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) {
-        _l7Utils.DOM.addStyle(container, "width: ".concat(maxWidth, "px"));
-      }
-
-      if (metric) {
-        this.mScale = _l7Utils.DOM.create('div', 'l7-control-scale-line', container);
-      }
-
-      if (imperial) {
-        this.iScale = _l7Utils.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) {
@@ -182,8 +132,38 @@ var Scale = /*#__PURE__*/function (_Control) {
         this.updateScale(this.iScale, feet + ' ft', feet / maxFeet);
       }
     }
+  }, {
+    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: "addScales",
+    value: function addScales(className, container) {
+      var _this$controlOption2 = this.controlOption,
+          metric = _this$controlOption2.metric,
+          imperial = _this$controlOption2.imperial;
+
+      if (metric) {
+        this.mScale = _l7Utils.DOM.create('div', className, container);
+      }
+
+      if (imperial) {
+        this.iScale = _l7Utils.DOM.create('div', className, container);
+      }
+    }
   }]);
   return Scale;
-}(_baseControl.Control);
+}(_BaseControl.default);
 
-exports.default = exports.Scale = Scale;
+exports.default = Scale;