@antv/l7-component 2.9.32 → 2.9.34

package/lib/control/layer.js

@@ -1,269 +1,362 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/control/layer.ts
-var layer_exports = {};
-__export(layer_exports, {
-  default: () => Layers
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(layer_exports);
-var import_l7_core = require("@antv/l7-core");
-var import_l7_utils = require("@antv/l7-utils");
-var import_BaseControl = __toESM(require("./BaseControl"));
-var Layers = class extends import_BaseControl.default {
-  constructor(cfg) {
-    super(cfg);
-    this.layerControlInputs = [];
-    this.layers = [];
-    this.lastZIndex = 0;
-    this.handlingClick = false;
-    this.initLayers();
-    (0, import_l7_utils.bindAll)([
-      "checkDisabledLayers",
-      "onLayerChange",
-      "collapse",
-      "extend",
-      "expand",
-      "onInputClick"
-    ], this);
-  }
-  getDefault() {
-    return {
-      collapsed: true,
-      position: import_l7_core.PositionType.TOPRIGHT,
-      autoZIndex: true,
-      hideSingleBase: false,
-      sortLayers: false,
-      name: "layers"
-    };
-  }
-  onAdd() {
-    this.initLayout();
-    this.update();
-    this.mapsService.on("zoomend", this.checkDisabledLayers);
-    this.layers.forEach((layerItem) => {
-      layerItem.layer.on("remove", this.onLayerChange);
-      layerItem.layer.on("add", this.onLayerChange);
-    });
-    return this.container;
-  }
-  addVisualLayer(layer, name) {
-    this.addLayer(layer, name, true);
-    return this.mapsService ? this.update() : this;
+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;
   }
-  expand() {
-    const { height } = this.renderService.getViewportSize();
-    import_l7_utils.DOM.addClass(this.container, "l7-control-layers-expanded");
-    this.form.style.height = "null";
-    const acceptableHeight = height - (this.container.offsetTop + 50);
-    if (acceptableHeight < this.form.clientHeight) {
-      import_l7_utils.DOM.addClass(this.form, "l7-control-layers-scrollbar");
-      this.form.style.height = acceptableHeight + "px";
-    } else {
-      import_l7_utils.DOM.removeClass(this.form, "l7-control-layers-scrollbar");
+
+  (0, _createClass2.default)(Layers, [{
+    key: "getDefault",
+    value: function getDefault() {
+      return {
+        collapsed: true,
+        position: _l7Core.PositionType.TOPRIGHT,
+        autoZIndex: true,
+        hideSingleBase: false,
+        sortLayers: false,
+        name: 'layers'
+      };
     }
-    this.checkDisabledLayers();
-    return this;
-  }
-  collapse() {
-    import_l7_utils.DOM.removeClass(this.container, "l7-control-layers-expanded");
-    return this;
-  }
-  onRemove() {
-    if (!this.mapsService) {
-      return;
+  }, {
+    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;
     }
-    this.mapsService.off("click", this.collapse);
-    this.layers.forEach((layerItem) => {
-      layerItem.layer.off("remove", this.onLayerChange);
-      layerItem.layer.off("add", this.onLayerChange);
-    });
-  }
-  initLayout() {
-    const className = "l7-control-layers";
-    const container = this.container = import_l7_utils.DOM.create("div", className);
-    const { collapsed } = this.controlOption;
-    container.setAttribute("aria-haspopup", "true");
-    const form = this.form = import_l7_utils.DOM.create("form", className + "-list");
-    if (collapsed) {
-      this.mapsService.on("click", this.collapse);
-      container.addEventListener("mouseenter", this.expand);
-      container.addEventListener("mouseleave", this.collapse);
+  }, {
+    key: "addVisualLayer",
+    value: function addVisualLayer(layer, name) {
+      this.addLayer(layer, name, true);
+      return this.mapsService ? this.update() : this;
     }
-    this.layersLink = import_l7_utils.DOM.create("a", className + "-toggle", container);
-    const link = this.layersLink;
-    link.title = "Layers";
-    if (!collapsed) {
-      this.expand();
+  }, {
+    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;
     }
-    this.baseLayersList = import_l7_utils.DOM.create("div", className + "-base", form);
-    this.separator = import_l7_utils.DOM.create("div", className + "-separator", form);
-    this.overlaysList = import_l7_utils.DOM.create("div", className + "-overlays", form);
-    container.appendChild(form);
-  }
-  initLayers() {
-    const { baseLayers = {}, overlayers = {} } = this.controlOption;
-    Object.keys(baseLayers).forEach((name) => {
-      this.addLayer(baseLayers[name], name, false);
-    });
-    Object.keys(overlayers).forEach((name) => {
-      this.addLayer(overlayers[name], name, true);
-    });
-  }
-  update() {
-    if (!this.container) {
+  }, {
+    key: "collapse",
+    value: function collapse() {
+      _l7Utils.DOM.removeClass(this.container, 'l7-control-layers-expanded');
+
       return this;
     }
-    import_l7_utils.DOM.empty(this.baseLayersList);
-    import_l7_utils.DOM.empty(this.overlaysList);
-    this.layerControlInputs = [];
-    let baseLayersPresent;
-    let overlaysPresent;
-    let i;
-    let obj;
-    let 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;
+  }, {
+    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);
+      });
     }
-    if (this.controlOption.hideSingleBase) {
-      baseLayersPresent = baseLayersPresent && baseLayersCount > 1;
-      this.baseLayersList.style.display = baseLayersPresent ? "" : "none";
+  }, {
+    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);
     }
-    this.separator.style.display = overlaysPresent && baseLayersPresent ? "" : "none";
-    return this;
-  }
-  checkDisabledLayers() {
-    const inputs = this.layerControlInputs;
-    let input;
-    let layer;
-    const zoom = this.mapsService.getZoom();
-    for (let i = inputs.length - 1; i >= 0; i--) {
-      input = inputs[i];
-      layer = this.layerService.getLayer(input.layerId);
-      if (layer && layer.inited) {
-        const minZoom = layer.getMinZoom();
-        const maxZoom = layer.getMaxZoom();
-        input.disabled = zoom < minZoom || zoom > maxZoom;
+  }, {
+    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;
     }
-  }
-  addLayer(layer, name, overlay) {
-    if (this.mapsService) {
-      layer.on("add", this.onLayerChange);
-      layer.on("remove", this.onLayerChange);
+  }, {
+    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;
+        }
+      }
     }
-    this.layers.push({
-      layer,
-      name,
-      overlay
-    });
-    const { sortLayers, sortFunction, autoZIndex } = this.controlOption;
-    if (sortLayers) {
-      this.layers.sort((a, b) => {
-        return sortFunction(a.layer, b.layer, a.name, b.name);
+  }, {
+    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();
     }
-    if (autoZIndex && layer.setZIndex) {
-      this.lastZIndex++;
-      layer.setZIndex(this.lastZIndex);
-    }
-    this.expandIfNotCollapsed();
-  }
-  expandIfNotCollapsed() {
-    if (this.mapsService && !this.controlOption.collapsed) {
-      this.expand();
+  }, {
+    key: "expandIfNotCollapsed",
+    value: function expandIfNotCollapsed() {
+      if (this.mapsService && !this.controlOption.collapsed) {
+        this.expand();
+      }
+
+      return this;
     }
-    return this;
-  }
-  onLayerChange(e) {
-    if (!this.handlingClick) {
-      this.update();
+  }, {
+    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);
+      }
     }
-    const obj = this.layerService.getLayer(e.target.layerId);
-    const type = (obj == null ? 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;
     }
-  }
-  createRadioElement(name, checked) {
-    const radioHtml = '<input type="radio" class="l7-control-layers-selector" name="' + name + '"' + (checked ? ' checked="checked"' : "") + "/>";
-    const radioFragment = document.createElement("div");
-    radioFragment.innerHTML = radioHtml;
-    return radioFragment.firstChild;
-  }
-  addItem(obj) {
-    const label = document.createElement("label");
-    const layer = this.layerService.getLayer(obj.layer.id);
-    const checked = layer && layer.inited && obj.layer.isVisible();
-    let 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);
+  }, {
+    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;
     }
-    this.layerControlInputs.push(input);
-    input.layerId = obj.layer.id;
-    input.addEventListener("click", this.onInputClick);
-    const name = document.createElement("span");
-    name.innerHTML = " " + obj.name;
-    const holder = document.createElement("div");
-    label.appendChild(holder);
-    holder.appendChild(input);
-    holder.appendChild(name);
-    const container = obj.overlay ? this.overlaysList : this.baseLayersList;
-    container.appendChild(label);
-    this.checkDisabledLayers();
-    return label;
-  }
-  onInputClick() {
-    const inputs = this.layerControlInputs;
-    let input;
-    let layer;
-    const addedLayers = [];
-    const removedLayers = [];
-    this.handlingClick = true;
-    for (let 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);
+  }, {
+    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;
     }
-    removedLayers.forEach((l) => {
-      l.hide();
-    });
-    addedLayers.forEach((l) => {
-      l.show();
-    });
-    this.handlingClick = false;
-  }
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});
+  }]);
+  return Layers;
+}(_BaseControl.default);
+
+exports.default = Layers;