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

package/es/control/scale.js

@@ -1,73 +1,56 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _get from "@babel/runtime/helpers/get";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/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 };
+import { bindAll, DOM, lnglatDistance } from '@antv/l7-utils';
+import Control, { PositionType } from "./BaseControl";
 
 var Scale = /*#__PURE__*/function (_Control) {
   _inherits(Scale, _Control);
 
   var _super = _createSuper(Scale);
 
-  function Scale() {
+  function Scale(cfg) {
     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);
-    });
-
+    _this = _super.call(this, cfg);
+    bindAll(['update'], _assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(Scale, [{
     key: "getDefault",
-    value: function getDefault(option) {
-      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(Scale.prototype), "getDefault", this).call(this, option)), {}, {
-        name: 'scale',
+    value: function getDefault() {
+      return {
         position: PositionType.BOTTOMLEFT,
         maxWidth: 100,
         metric: true,
         updateWhenIdle: false,
         imperial: false,
-        lockWidth: true
-      });
+        name: 'scale'
+      };
     }
   }, {
     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.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;
     }
   }, {
@@ -78,13 +61,15 @@ var Scale = /*#__PURE__*/function (_Control) {
       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: "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 = lnglatDistance([p1.lng, p1.lat], [p2.lng, p2.lat]);
+      this.updateScales(maxMeters);
     }
   }, {
     key: "updateScales",
@@ -101,45 +86,6 @@ var Scale = /*#__PURE__*/function (_Control) {
         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) {
@@ -164,6 +110,36 @@ 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 = DOM.create('div', className, container);
+      }
+
+      if (imperial) {
+        this.iScale = DOM.create('div', className, container);
+      }
+    }
   }]);
 
   return Scale;

package/es/control/zoom.d.ts

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

package/es/control/zoom.js

@@ -1,98 +1,54 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _get from "@babel/runtime/helpers/get";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/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 { createL7Icon } from "../utils/icon";
-import { Control } from "./baseControl";
-export { Zoom };
+import { bindAll, DOM } from '@antv/l7-utils';
+import Control, { PositionType } from "./BaseControl";
 
 var Zoom = /*#__PURE__*/function (_Control) {
   _inherits(Zoom, _Control);
 
   var _super = _createSuper(Zoom);
 
-  function Zoom() {
+  function Zoom(cfg) {
     var _this;
 
     _classCallCheck(this, Zoom);
 
-    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), "zoomIn", function () {
-      if (!_this.disabled && _this.mapsService.getZoom() < _this.mapsService.getMaxZoom()) {
-        _this.mapsService.zoomIn();
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "zoomOut", function () {
-      if (!_this.disabled && _this.mapsService.getZoom() > _this.mapsService.getMinZoom()) {
-        _this.mapsService.zoomOut();
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "updateDisabled", function () {
-      var mapsService = _this.mapsService;
-
-      _this.zoomInButton.removeAttribute('disabled');
-
-      _this.zoomOutButton.removeAttribute('disabled');
-
-      if (_this.disabled || mapsService.getZoom() <= mapsService.getMinZoom()) {
-        _this.zoomOutButton.setAttribute('disabled', 'true');
-      }
-
-      if (_this.disabled || mapsService.getZoom() >= mapsService.getMaxZoom()) {
-        _this.zoomInButton.setAttribute('disabled', 'true');
-      }
-    });
-
+    _this = _super.call(this, cfg);
+    bindAll(['updateDisabled', 'zoomIn', 'zoomOut'], _assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(Zoom, [{
     key: "getDefault",
-    value: function getDefault(option) {
-      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(Zoom.prototype), "getDefault", this).call(this, option)), {}, {
-        position: PositionType.BOTTOMRIGHT,
-        name: 'zoom',
-        zoomInText: createL7Icon('l7-icon-enlarge'),
+    value: function getDefault() {
+      return {
+        position: PositionType.TOPLEFT,
+        zoomInText: '+',
         zoomInTitle: 'Zoom in',
-        zoomOutText: createL7Icon('l7-icon-narrow'),
-        zoomOutTitle: 'Zoom out'
-      });
-    }
-  }, {
-    key: "setOptions",
-    value: function setOptions(newOptions) {
-      _get(_getPrototypeOf(Zoom.prototype), "setOptions", this).call(this, newOptions);
-
-      if (this.checkUpdateOption(newOptions, ['zoomInText', 'zoomInTitle', 'zoomOutText', 'zoomOutTitle'])) {
-        this.resetButtonGroup(this.container);
-      }
+        zoomOutText: '&#x2212;',
+        zoomOutTitle: 'Zoom out',
+        name: 'zoom'
+      };
     }
   }, {
     key: "onAdd",
     value: function onAdd() {
-      var container = DOM.create('div', 'l7-control-zoom');
-      this.resetButtonGroup(container);
+      var zoomName = 'l7-control-zoom';
+      var container = DOM.create('div', zoomName + ' l7-bar');
+      this.zoomInButton = this.createButton(this.controlOption.zoomInText, this.controlOption.zoomInTitle, zoomName + '-in', container, this.zoomIn);
+      this.zoomOutButton = this.createButton(this.controlOption.zoomOutText, this.controlOption.zoomOutTitle, zoomName + '-out', container, this.zoomOut);
       this.mapsService.on('zoomend', this.updateDisabled);
       this.mapsService.on('zoomchange', this.updateDisabled);
+      this.updateDisabled();
       return container;
     }
   }, {
@@ -116,28 +72,45 @@ var Zoom = /*#__PURE__*/function (_Control) {
       return this;
     }
   }, {
-    key: "resetButtonGroup",
-    value: function resetButtonGroup(container) {
-      DOM.clearChildren(container);
-      this.zoomInButton = this.createButton(this.controlOption.zoomInText, this.controlOption.zoomInTitle, 'l7-button-control', container, this.zoomIn);
-      this.zoomOutButton = this.createButton(this.controlOption.zoomOutText, this.controlOption.zoomOutTitle, 'l7-button-control', container, this.zoomOut);
-      this.updateDisabled();
+    key: "zoomIn",
+    value: function zoomIn() {
+      if (!this.disabled && this.mapsService.getZoom() < this.mapsService.getMaxZoom()) {
+        this.mapsService.zoomIn();
+      }
+    }
+  }, {
+    key: "zoomOut",
+    value: function zoomOut() {
+      if (!this.disabled && this.mapsService.getZoom() > this.mapsService.getMinZoom()) {
+        this.mapsService.zoomOut();
+      }
     }
   }, {
     key: "createButton",
     value: function createButton(html, tile, className, container, fn) {
-      var link = DOM.create('button', className, container);
-
-      if (typeof html === 'string') {
-        link.innerHTML = html;
-      } else {
-        link.append(html);
-      }
-
+      var link = DOM.create('a', className, container);
+      link.innerHTML = html;
       link.title = tile;
+      link.href = 'javascript:void(0)';
       link.addEventListener('click', fn);
       return link;
     }
+  }, {
+    key: "updateDisabled",
+    value: function updateDisabled() {
+      var mapsService = this.mapsService;
+      var className = 'l7-disabled';
+      DOM.removeClass(this.zoomInButton, className);
+      DOM.removeClass(this.zoomOutButton, className);
+
+      if (this.disabled || mapsService.getZoom() <= mapsService.getMinZoom()) {
+        DOM.addClass(this.zoomOutButton, className);
+      }
+
+      if (this.disabled || mapsService.getZoom() >= mapsService.getMaxZoom()) {
+        DOM.addClass(this.zoomInButton, className);
+      }
+    }
   }]);
 
   return Zoom;