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

package/es/control/mouseLocation.js

@@ -0,0 +1,104 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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 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(): any;
+    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,172 @@
+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 };
+
+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,34 @@
+import { PositionType } from '@antv/l7-core';
+import { Control, IControlOption } from './baseControl';
+export interface IZoomControlOption extends IControlOption {
+    zoomInText: Element | string;
+    zoomInTitle: string;
+    zoomOutText: Element | string;
+    zoomOutTitle: string;
+}
+export { Zoom };
+export default class Zoom extends Control<IZoomControlOption> {
+    private disabled;
+    private zoomInButton;
+    private zoomOutButton;
+    getDefault(option: Partial<IZoomControlOption>): {
+        position: PositionType;
+        name: string;
+        zoomInText: SVGSVGElement;
+        zoomInTitle: string;
+        zoomOutText: SVGSVGElement;
+        zoomOutTitle: string;
+        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;
+}

package/es/control/zoom.js

@@ -0,0 +1,146 @@
+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 };
+
+var Zoom = /*#__PURE__*/function (_Control) {
+  _inherits(Zoom, _Control);
+
+  var _super = _createSuper(Zoom);
+
+  function Zoom() {
+    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');
+      }
+    });
+
+    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'),
+        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);
+      }
+    }
+  }, {
+    key: "onAdd",
+    value: function onAdd() {
+      var container = DOM.create('div', 'l7-control-zoom');
+      this.resetButtonGroup(container);
+      this.mapsService.on('zoomend', this.updateDisabled);
+      this.mapsService.on('zoomchange', 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: "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: "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);
+      }
+
+      link.title = tile;
+      link.addEventListener('click', fn);
+      return link;
+    }
+  }]);
+
+  return Zoom;
+}(Control);
+
+export { Zoom as default };

package/es/css/button.less

@@ -0,0 +1,70 @@
+@import 'variables.less';
+
+.l7-button-control {
+  min-width: @l7-btn-control-size;
+  height: @l7-btn-control-size;
+  background-color: @l7-control-bg-color;
+  border-width: 0;
+  border-radius: @l7-btn-control-border-radius;
+  outline: 0;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 ((@l7-btn-control-size - @l7-btn-icon-size) / 2);
+  box-shadow: @l7-control-shadow;
+  line-height: 16px;
+
+  .l7-iconfont {
+    fill: @l7-control-font-color;
+    color: @l7-control-font-color;
+    width: @l7-btn-icon-size;
+    height: @l7-btn-icon-size;
+  }
+
+  &.l7-button-control--row {
+    padding: 0 16px 0 13px;
+
+    * + .l7-button-control__text {
+      margin-left: 8px;
+    }
+  }
+
+  &.l7-button-control--column {
+    height: @l7-btn-column-height;
+    flex-direction: column;
+    .l7-iconfont {
+      margin-top: 3px;
+    }
+    .l7-button-control__text {
+      margin-top: 3px;
+      font-size: 10px;
+      transform: scale(0.83333);
+    }
+  }
+
+  &:not(:disabled) {
+    &:hover {
+      background-color: @l7-btn-control-bg-hover-color;
+    }
+    &:active {
+      background-color: @l7-btn-control-bg-active-color;
+    }
+  }
+  &:disabled {
+    background-color: @l7-btn-control-disabled-bg-color;
+    color: @l7-btn-control-disabled-font-color;
+    cursor: not-allowed;
+    .l7-iconfont {
+      fill: @l7-btn-control-disabled-font-color;
+      color: @l7-btn-control-disabled-font-color;
+    }
+    &:hover {
+      background-color: @l7-btn-control-disabled-bg-color;
+    }
+    &:active {
+      background-color: @l7-btn-control-disabled-bg-color;
+    }
+  }
+}

package/es/css/control.less

@@ -0,0 +1,71 @@
+@import 'variables.less';
+
+.l7-control-container {
+  font: 12px/1.5 'Helvetica Neue', Arial, Helvetica, sans-serif;
+
+  .l7-control {
+    position: relative;
+    z-index: 800;
+    float: left;
+    clear: both;
+    color: @l7-control-font-color;
+    font-size: @l7-control-font-size;
+    pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+    pointer-events: auto;
+
+    &.l7-control--hide {
+      display: none;
+    }
+  }
+
+  each(@position-list,{
+    .l7-@{value} {
+        @{value}: 0;
+      display: flex;
+      position: absolute;
+      z-index: 1000;
+      pointer-events: none;
+      .l7-control:not(.l7-control--hide) {
+        margin-@{value}: @l7-control-space;
+      }
+    }
+  });
+
+  .l7-center {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    &.l7-top,
+    &.l7-bottom {
+      width: 100%;
+    }
+    &.l7-left,
+    &.l7-right {
+      height: 100%;
+    }
+    .l7-control {
+      margin-right: @l7-control-space;
+      margin-bottom: @l7-control-space;
+    }
+  }
+
+  .l7-row {
+    flex-direction: row;
+    &.l7-top {
+      align-items: flex-start;
+    }
+    &.l7-bottom {
+      align-items: flex-end;
+    }
+  }
+
+  .l7-column {
+    flex-direction: column;
+    &.l7-left {
+      align-items: flex-start;
+    }
+    &.l7-right {
+      align-items: flex-end;
+    }
+  }
+}