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

package/lib/control/scale.js

@@ -0,0 +1,136 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/control/scale.ts
+var scale_exports = {};
+__export(scale_exports, {
+  Scale: () => Scale,
+  default: () => Scale
+});
+module.exports = __toCommonJS(scale_exports);
+var import_l7_utils = require("@antv/l7-utils");
+var import_baseControl = require("./baseControl");
+var Scale = class extends import_baseControl.Control {
+  constructor() {
+    super(...arguments);
+    this.update = () => {
+      const mapsService = this.mapsService;
+      const { maxWidth } = this.controlOption;
+      const y = mapsService.getSize()[1] / 2;
+      const p1 = mapsService.containerToLngLat([0, y]);
+      const p2 = mapsService.containerToLngLat([maxWidth, y]);
+      const maxMeters = (0, import_l7_utils.lnglatDistance)([p1.lng, p1.lat], [p2.lng, p2.lat]);
+      this.updateScales(maxMeters);
+    };
+  }
+  getDefault(option) {
+    return {
+      ...super.getDefault(option),
+      name: "scale",
+      position: import_baseControl.PositionType.BOTTOMLEFT,
+      maxWidth: 100,
+      metric: true,
+      updateWhenIdle: false,
+      imperial: false,
+      lockWidth: true
+    };
+  }
+  onAdd() {
+    const className = "l7-control-scale";
+    const container = import_l7_utils.DOM.create("div", className);
+    this.resetScaleLines(container);
+    const { updateWhenIdle } = this.controlOption;
+    this.mapsService.on(updateWhenIdle ? "moveend" : "mapmove", this.update);
+    this.mapsService.on(updateWhenIdle ? "zoomend" : "zoomchange", this.update);
+    return container;
+  }
+  onRemove() {
+    const { updateWhenIdle } = this.controlOption;
+    this.mapsService.off(updateWhenIdle ? "zoomend" : "zoomchange", this.update);
+    this.mapsService.off(updateWhenIdle ? "moveend" : "mapmove", this.update);
+  }
+  setOptions(newOption) {
+    super.setOptions(newOption);
+    if (this.checkUpdateOption(newOption, [
+      "lockWidth",
+      "maxWidth",
+      "metric",
+      "updateWhenIdle",
+      "imperial"
+    ])) {
+      this.resetScaleLines(this.container);
+    }
+  }
+  updateScales(maxMeters) {
+    const { metric, imperial } = this.controlOption;
+    if (metric && maxMeters) {
+      this.updateMetric(maxMeters);
+    }
+    if (imperial && maxMeters) {
+      this.updateImperial(maxMeters);
+    }
+  }
+  resetScaleLines(container) {
+    import_l7_utils.DOM.clearChildren(container);
+    const { metric, imperial, maxWidth, lockWidth } = this.controlOption;
+    if (lockWidth) {
+      import_l7_utils.DOM.addStyle(container, `width: ${maxWidth}px`);
+    }
+    if (metric) {
+      this.mScale = import_l7_utils.DOM.create("div", "l7-control-scale-line", container);
+    }
+    if (imperial) {
+      this.iScale = import_l7_utils.DOM.create("div", "l7-control-scale-line", container);
+    }
+    this.update();
+  }
+  updateScale(scale, text, ratio) {
+    const { maxWidth } = this.controlOption;
+    scale.style.width = Math.round(maxWidth * ratio) + "px";
+    scale.innerHTML = text;
+  }
+  getRoundNum(num) {
+    const pow10 = Math.pow(10, (Math.floor(num) + "").length - 1);
+    let d = num / pow10;
+    d = d >= 10 ? 10 : d >= 5 ? 5 : d >= 3 ? 3 : d >= 2 ? 2 : 1;
+    return pow10 * d;
+  }
+  updateMetric(maxMeters) {
+    const meters = this.getRoundNum(maxMeters);
+    const label = meters < 1e3 ? meters + " m" : meters / 1e3 + " km";
+    this.updateScale(this.mScale, label, meters / maxMeters);
+  }
+  updateImperial(maxMeters) {
+    const maxFeet = maxMeters * 3.2808399;
+    let maxMiles;
+    let miles;
+    let 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);
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Scale
+});

package/lib/control/zoom.js

@@ -0,0 +1,119 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/control/zoom.ts
+var zoom_exports = {};
+__export(zoom_exports, {
+  Zoom: () => Zoom,
+  default: () => Zoom
+});
+module.exports = __toCommonJS(zoom_exports);
+var import_l7_core = require("@antv/l7-core");
+var import_l7_utils = require("@antv/l7-utils");
+var import_icon = require("../utils/icon");
+var import_baseControl = require("./baseControl");
+var Zoom = class extends import_baseControl.Control {
+  constructor() {
+    super(...arguments);
+    this.zoomIn = () => {
+      if (!this.disabled && this.mapsService.getZoom() < this.mapsService.getMaxZoom()) {
+        this.mapsService.zoomIn();
+      }
+    };
+    this.zoomOut = () => {
+      if (!this.disabled && this.mapsService.getZoom() > this.mapsService.getMinZoom()) {
+        this.mapsService.zoomOut();
+      }
+    };
+    this.updateDisabled = () => {
+      const 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");
+      }
+    };
+  }
+  getDefault(option) {
+    return {
+      ...super.getDefault(option),
+      position: import_l7_core.PositionType.BOTTOMRIGHT,
+      name: "zoom",
+      zoomInText: (0, import_icon.createL7Icon)("l7-icon-enlarge"),
+      zoomInTitle: "Zoom in",
+      zoomOutText: (0, import_icon.createL7Icon)("l7-icon-narrow"),
+      zoomOutTitle: "Zoom out"
+    };
+  }
+  setOptions(newOptions) {
+    super.setOptions(newOptions);
+    if (this.checkUpdateOption(newOptions, [
+      "zoomInText",
+      "zoomInTitle",
+      "zoomOutText",
+      "zoomOutTitle"
+    ])) {
+      this.resetButtonGroup(this.container);
+    }
+  }
+  onAdd() {
+    const container = import_l7_utils.DOM.create("div", "l7-control-zoom");
+    this.resetButtonGroup(container);
+    this.mapsService.on("zoomend", this.updateDisabled);
+    this.mapsService.on("zoomchange", this.updateDisabled);
+    return container;
+  }
+  onRemove() {
+    this.mapsService.off("zoomend", this.updateDisabled);
+    this.mapsService.off("zoomchange", this.updateDisabled);
+  }
+  disable() {
+    this.disabled = true;
+    this.updateDisabled();
+    return this;
+  }
+  enable() {
+    this.disabled = false;
+    this.updateDisabled();
+    return this;
+  }
+  resetButtonGroup(container) {
+    import_l7_utils.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();
+  }
+  createButton(html, tile, className, container, fn) {
+    const link = import_l7_utils.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;
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Zoom
+});

package/lib/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/lib/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;
+    }
+  }
+}