@antv/l7-component 2.9.32-alpha.2 → 2.9.33

package/es/control/scale.js

@@ -0,0 +1,148 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/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 { 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(cfg) {
+    var _this;
+
+    _classCallCheck(this, Scale);
+
+    _this = _super.call(this, cfg);
+    bindAll(['update'], _assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(Scale, [{
+    key: "getDefault",
+    value: function getDefault() {
+      return {
+        position: PositionType.BOTTOMLEFT,
+        maxWidth: 100,
+        metric: true,
+        updateWhenIdle: false,
+        imperial: false,
+        name: 'scale'
+      };
+    }
+  }, {
+    key: "onAdd",
+    value: function onAdd() {
+      var className = 'l7-control-scale';
+      var container = DOM.create('div', className);
+      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;
+    }
+  }, {
+    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: "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",
+    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: "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);
+      }
+    }
+  }, {
+    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;
+}(Control);
+
+export { Scale as default };

package/es/control/zoom.d.ts

@@ -0,0 +1,24 @@
+import { IZoomControlOption } from '../interface';
+import Control, { PositionType } from './BaseControl';
+export default class Zoom extends Control {
+    private disabled;
+    private zoomInButton;
+    private zoomOutButton;
+    constructor(cfg?: Partial<IZoomControlOption>);
+    getDefault(): {
+        position: PositionType;
+        zoomInText: string;
+        zoomInTitle: string;
+        zoomOutText: string;
+        zoomOutTitle: string;
+        name: string;
+    };
+    onAdd(): HTMLElement;
+    onRemove(): void;
+    disable(): this;
+    enable(): this;
+    private zoomIn;
+    private zoomOut;
+    private createButton;
+    private updateDisabled;
+}

package/es/control/zoom.js

@@ -0,0 +1,119 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/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 { 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(cfg) {
+    var _this;
+
+    _classCallCheck(this, Zoom);
+
+    _this = _super.call(this, cfg);
+    bindAll(['updateDisabled', 'zoomIn', 'zoomOut'], _assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(Zoom, [{
+    key: "getDefault",
+    value: function getDefault() {
+      return {
+        position: PositionType.TOPLEFT,
+        zoomInText: '+',
+        zoomInTitle: 'Zoom in',
+        zoomOutText: '−',
+        zoomOutTitle: 'Zoom out',
+        name: 'zoom'
+      };
+    }
+  }, {
+    key: "onAdd",
+    value: function onAdd() {
+      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;
+    }
+  }, {
+    key: "onRemove",
+    value: function onRemove() {
+      this.mapsService.off('zoomend', this.updateDisabled);
+      this.mapsService.off('zoomchange', this.updateDisabled);
+    }
+  }, {
+    key: "disable",
+    value: function disable() {
+      this.disabled = true;
+      this.updateDisabled();
+      return this;
+    }
+  }, {
+    key: "enable",
+    value: function enable() {
+      this.disabled = false;
+      this.updateDisabled();
+      return this;
+    }
+  }, {
+    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('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;
+}(Control);
+
+export { Zoom as default };