@antv/l7-component 2.21.1 → 2.21.2

package/es/marker-layer.js

@@ -1,363 +1,312 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/esm/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, Satistics, bindAll, boundsContains, lodashUtil, padBounds } from '@antv/l7-utils';
 import { EventEmitter } from 'eventemitter3';
 // @ts-ignore
 // tslint:disable-next-line:no-submodule-imports
 import Supercluster from 'supercluster/dist/supercluster';
 import Marker from "./marker";
-var merge = lodashUtil.merge;
-var MarkerLayer = /*#__PURE__*/function (_EventEmitter) {
-  _inherits(MarkerLayer, _EventEmitter);
-  var _super = _createSuper(MarkerLayer);
-  // 聚合后的marker列表
-
-  function MarkerLayer(option) {
+const {
+  merge
+} = lodashUtil;
+export default class MarkerLayer extends EventEmitter {
+  constructor(option) {
     var _this$markerLayerOpti;
-    var _this;
-    _classCallCheck(this, MarkerLayer);
-    _this = _super.call(this);
-    _defineProperty(_assertThisInitialized(_this), "markers", []);
-    _defineProperty(_assertThisInitialized(_this), "points", []);
-    _defineProperty(_assertThisInitialized(_this), "clusterMarkers", []);
-    _this.markerLayerOption = merge(_this.getDefault(), option);
-    bindAll(['update'], _assertThisInitialized(_this));
-    _this.zoom = ((_this$markerLayerOpti = _this.markerLayerOption.clusterOption) === null || _this$markerLayerOpti === void 0 ? void 0 : _this$markerLayerOpti.zoom) || -99;
-    return _this;
+    super();
+    _defineProperty(this, "markers", []);
+    // 原始的marker列表
+    _defineProperty(this, "markerLayerOption", void 0);
+    _defineProperty(this, "clusterIndex", void 0);
+    _defineProperty(this, "points", []);
+    _defineProperty(this, "clusterMarkers", []);
+    // 聚合后的marker列表
+    _defineProperty(this, "mapsService", void 0);
+    _defineProperty(this, "scene", void 0);
+    _defineProperty(this, "zoom", void 0);
+    _defineProperty(this, "bbox", void 0);
+    _defineProperty(this, "inited", void 0);
+    _defineProperty(this, "containerSize", void 0);
+    this.markerLayerOption = merge(this.getDefault(), option);
+    bindAll(['update'], this);
+    this.zoom = ((_this$markerLayerOpti = this.markerLayerOption.clusterOption) === null || _this$markerLayerOpti === void 0 ? void 0 : _this$markerLayerOpti.zoom) || -99;
   }
-  _createClass(MarkerLayer, [{
-    key: "getDefault",
-    value: function getDefault() {
-      return {
-        cluster: false,
-        clusterOption: {
-          radius: 80,
-          maxZoom: 20,
-          minZoom: 0,
-          zoom: -99,
-          style: {},
-          className: ''
-        }
-      };
-    }
-
-    // 执行scene.addMarkerLayer时调用
-  }, {
-    key: "addTo",
-    value: function addTo(scene) {
-      // this.remove();
-      this.scene = scene;
-      this.mapsService = scene.mapService;
-      if (this.markerLayerOption.cluster) {
-        this.initCluster();
-        this.update();
-        // 地图视野变化时，重新计算视野内的聚合点。
-        this.mapsService.on('camerachange', this.update); // amap1.x 更新事件
-        this.mapsService.on('viewchange', this.update); // amap2.0 更新事件
+  getDefault() {
+    return {
+      cluster: false,
+      clusterOption: {
+        radius: 80,
+        maxZoom: 20,
+        minZoom: 0,
+        zoom: -99,
+        style: {},
+        className: ''
       }
-      this.mapsService.on('camerachange', this.setContainerSize.bind(this)); // amap1.x 更新事件
-      this.mapsService.on('viewchange', this.setContainerSize.bind(this)); // amap2.0 更新事件
-      this.addMarkers();
-      this.inited = true;
-      return this;
-    }
+    };
+  }
 
-    // 设置容器大小
-  }, {
-    key: "setContainerSize",
-    value: function setContainerSize() {
-      if (!this.mapsService) {
-        return;
-      }
-      var container = this.mapsService.getContainer();
-      this.containerSize = {
-        containerWidth: (container === null || container === void 0 ? void 0 : container.scrollWidth) || 0,
-        containerHeight: (container === null || container === void 0 ? void 0 : container.scrollHeight) || 0,
-        bounds: this.mapsService.getBounds()
-      };
+  // 执行scene.addMarkerLayer时调用
+  addTo(scene) {
+    // this.remove();
+    this.scene = scene;
+    this.mapsService = scene.mapService;
+    if (this.markerLayerOption.cluster) {
+      this.initCluster();
+      this.update();
+      // 地图视野变化时，重新计算视野内的聚合点。
+      this.mapsService.on('camerachange', this.update); // amap1.x 更新事件
+      this.mapsService.on('viewchange', this.update); // amap2.0 更新事件
     }
+    this.mapsService.on('camerachange', this.setContainerSize.bind(this)); // amap1.x 更新事件
+    this.mapsService.on('viewchange', this.setContainerSize.bind(this)); // amap2.0 更新事件
+    this.addMarkers();
+    this.inited = true;
+    return this;
+  }
 
-    // 获取容器尺寸
-  }, {
-    key: "getContainerSize",
-    value: function getContainerSize() {
-      return this.containerSize;
+  // 设置容器大小
+  setContainerSize() {
+    if (!this.mapsService) {
+      return;
     }
+    const container = this.mapsService.getContainer();
+    this.containerSize = {
+      containerWidth: (container === null || container === void 0 ? void 0 : container.scrollWidth) || 0,
+      containerHeight: (container === null || container === void 0 ? void 0 : container.scrollHeight) || 0,
+      bounds: this.mapsService.getBounds()
+    };
+  }
 
-    // 在图层添加单个marker
-  }, {
-    key: "addMarker",
-    value: function addMarker(marker) {
-      var cluster = this.markerLayerOption.cluster;
-      marker.getMarkerLayerContainerSize = this.getContainerSize.bind(this);
-      if (cluster) {
-        this.addPoint(marker, this.markers.length);
-        if (this.mapsService) {
-          // 在新增 marker 的时候需要更新聚合信息（哪怕此时的 zoom 没有发生变化）
-          var zoom = this.mapsService.getZoom();
-          var bbox = this.mapsService.getBounds();
-          this.bbox = padBounds(bbox, 0.5);
-          this.zoom = Math.floor(zoom);
-          this.getClusterMarker(this.bbox, this.zoom);
-        }
+  // 获取容器尺寸
+  getContainerSize() {
+    return this.containerSize;
+  }
+
+  // 在图层添加单个marker
+  addMarker(marker) {
+    const cluster = this.markerLayerOption.cluster;
+    marker.getMarkerLayerContainerSize = this.getContainerSize.bind(this);
+    if (cluster) {
+      this.addPoint(marker, this.markers.length);
+      if (this.mapsService) {
+        // 在新增 marker 的时候需要更新聚合信息（哪怕此时的 zoom 没有发生变化）
+        const zoom = this.mapsService.getZoom();
+        const bbox = this.mapsService.getBounds();
+        this.bbox = padBounds(bbox, 0.5);
+        this.zoom = Math.floor(zoom);
+        this.getClusterMarker(this.bbox, this.zoom);
       }
-      this.markers.push(marker);
     }
-  }, {
-    key: "removeMarker",
-    value: function removeMarker(marker) {
-      this.markers.indexOf(marker);
-      var markerIndex = this.markers.indexOf(marker);
-      if (markerIndex > -1) {
-        this.markers.splice(markerIndex, 1);
-        if (this.markerLayerOption.cluster) {
-          this.removePoint(markerIndex);
-          if (this.mapsService) {
-            this.getClusterMarker(this.bbox, this.zoom);
-          }
+    this.markers.push(marker);
+  }
+  removeMarker(marker) {
+    this.markers.indexOf(marker);
+    const markerIndex = this.markers.indexOf(marker);
+    if (markerIndex > -1) {
+      this.markers.splice(markerIndex, 1);
+      if (this.markerLayerOption.cluster) {
+        this.removePoint(markerIndex);
+        if (this.mapsService) {
+          this.getClusterMarker(this.bbox, this.zoom);
         }
       }
     }
+  }
 
-    /**
-     * 隐藏 marker 在每个 marker 上单独修改属性而不是在 markerContainer 上修改（在 markerContainer 修改会有用户在场景加载完之前调用失败的问题）
-     */
-  }, {
-    key: "hide",
-    value: function hide() {
-      this.markers.map(function (m) {
-        m.getElement().style.opacity = '0';
-      });
-      this.clusterMarkers.map(function (m) {
-        m.getElement().style.opacity = '0';
-      });
-    }
+  /**
+   * 隐藏 marker 在每个 marker 上单独修改属性而不是在 markerContainer 上修改（在 markerContainer 修改会有用户在场景加载完之前调用失败的问题）
+   */
+  hide() {
+    this.markers.map(m => {
+      m.getElement().style.opacity = '0';
+    });
+    this.clusterMarkers.map(m => {
+      m.getElement().style.opacity = '0';
+    });
+  }
 
-    /**
-     * 显示 marker
-     */
-  }, {
-    key: "show",
-    value: function show() {
-      this.markers.map(function (m) {
-        m.getElement().style.opacity = '1';
-      });
-      this.clusterMarkers.map(function (m) {
-        m.getElement().style.opacity = '1';
-      });
-    }
+  /**
+   * 显示 marker
+   */
+  show() {
+    this.markers.map(m => {
+      m.getElement().style.opacity = '1';
+    });
+    this.clusterMarkers.map(m => {
+      m.getElement().style.opacity = '1';
+    });
+  }
 
-    // 返回当下的markers数据，有聚合图时返回聚合的marker列表，否则返回原始maerker列表
-  }, {
-    key: "getMarkers",
-    value: function getMarkers() {
-      var cluster = this.markerLayerOption.cluster;
-      return cluster ? this.clusterMarkers : this.markers;
-    }
-  }, {
-    key: "getOriginMarkers",
-    value: function getOriginMarkers() {
-      return this.markers;
-    }
+  // 返回当下的markers数据，有聚合图时返回聚合的marker列表，否则返回原始maerker列表
+  getMarkers() {
+    const cluster = this.markerLayerOption.cluster;
+    return cluster ? this.clusterMarkers : this.markers;
+  }
+  getOriginMarkers() {
+    return this.markers;
+  }
 
-    // 批量添加marker到scene
-  }, {
-    key: "addMarkers",
-    value: function addMarkers() {
-      var _this2 = this;
-      this.getMarkers().forEach(function (marker) {
-        marker.addTo(_this2.scene);
-      });
-    }
+  // 批量添加marker到scene
+  addMarkers() {
+    this.getMarkers().forEach(marker => {
+      marker.addTo(this.scene);
+    });
+  }
 
-    // 清除图层里的marker
-  }, {
-    key: "clear",
-    value: function clear() {
-      this.markers.forEach(function (marker) {
-        marker.remove();
-      });
-      this.clusterMarkers.forEach(function (clusterMarker) {
-        clusterMarker.remove();
-      });
-      this.markers = [];
-      this.points = [];
-      this.clusterMarkers = [];
-    }
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      this.clear();
-      this.removeAllListeners();
-      this.mapsService.off('camerachange', this.update);
-      this.mapsService.off('viewchange', this.update);
-      this.mapsService.off('camerachange', this.setContainerSize.bind(this));
-      this.mapsService.off('viewchange', this.setContainerSize.bind(this));
-    }
+  // 清除图层里的marker
+  clear() {
+    this.markers.forEach(marker => {
+      marker.remove();
+    });
+    this.clusterMarkers.forEach(clusterMarker => {
+      clusterMarker.remove();
+    });
+    this.markers = [];
+    this.points = [];
+    this.clusterMarkers = [];
+  }
+  destroy() {
+    this.clear();
+    this.removeAllListeners();
+    this.mapsService.off('camerachange', this.update);
+    this.mapsService.off('viewchange', this.update);
+    this.mapsService.off('camerachange', this.setContainerSize.bind(this));
+    this.mapsService.off('viewchange', this.setContainerSize.bind(this));
+  }
 
-    // 将marker数据保存在point中
-  }, {
-    key: "addPoint",
-    value: function addPoint(marker, id) {
-      var _marker$getLnglat = marker.getLnglat(),
-        lng = _marker$getLnglat.lng,
-        lat = _marker$getLnglat.lat;
-      var feature = {
-        geometry: {
-          type: 'Point',
-          coordinates: [lng, lat]
-        },
-        properties: _objectSpread(_objectSpread({}, marker.getExtData()), {}, {
-          marker_id: id
-        })
-      };
-      this.points.push(feature);
-      if (this.clusterIndex) {
-        // 在新增点的时候需要更新 cluster 的数据
-        this.clusterIndex.load(this.points);
-      }
+  // 将marker数据保存在point中
+  addPoint(marker, id) {
+    const {
+      lng,
+      lat
+    } = marker.getLnglat();
+    const feature = {
+      geometry: {
+        type: 'Point',
+        coordinates: [lng, lat]
+      },
+      properties: _objectSpread(_objectSpread({}, marker.getExtData()), {}, {
+        marker_id: id
+      })
+    };
+    this.points.push(feature);
+    if (this.clusterIndex) {
+      // 在新增点的时候需要更新 cluster 的数据
+      this.clusterIndex.load(this.points);
     }
-  }, {
-    key: "removePoint",
-    value: function removePoint(id) {
-      var targetIndex = this.points.findIndex(function (point) {
-        return point.properties.marker_id === id;
-      });
-      if (targetIndex > -1) {
-        this.points.splice(targetIndex, 1);
-      }
-      if (this.clusterIndex) {
-        // 在删除点的时候需要更新 cluster 的数据
-        this.clusterIndex.load(this.points);
-      }
+  }
+  removePoint(id) {
+    const targetIndex = this.points.findIndex(point => point.properties.marker_id === id);
+    if (targetIndex > -1) {
+      this.points.splice(targetIndex, 1);
     }
-  }, {
-    key: "initCluster",
-    value: function initCluster() {
-      if (!this.markerLayerOption.cluster) {
-        return;
-      }
-      var _this$markerLayerOpti2 = this.markerLayerOption.clusterOption,
-        radius = _this$markerLayerOpti2.radius,
-        _this$markerLayerOpti3 = _this$markerLayerOpti2.minZoom,
-        minZoom = _this$markerLayerOpti3 === void 0 ? 0 : _this$markerLayerOpti3,
-        maxZoom = _this$markerLayerOpti2.maxZoom;
-      this.clusterIndex = new Supercluster({
-        radius: radius,
-        minZoom: minZoom,
-        maxZoom: maxZoom
-      });
-      // @ts-ignore
+    if (this.clusterIndex) {
+      // 在删除点的时候需要更新 cluster 的数据
       this.clusterIndex.load(this.points);
     }
-  }, {
-    key: "getClusterMarker",
-    value: function getClusterMarker(viewBounds, zoom) {
-      var _this3 = this;
-      var viewBBox = viewBounds[0].concat(viewBounds[1]);
-      var clusterPoint = this.clusterIndex.getClusters(viewBBox, zoom);
-      this.clusterMarkers.forEach(function (marker) {
-        marker.remove();
-      });
-      this.clusterMarkers = [];
-      clusterPoint.forEach(function (feature) {
-        var _feature$properties;
-        var _this3$markerLayerOpt = _this3.markerLayerOption.clusterOption,
-          field = _this3$markerLayerOpt.field,
-          method = _this3$markerLayerOpt.method;
-        // 处理聚合数据
-        if ((_feature$properties = feature.properties) !== null && _feature$properties !== void 0 && _feature$properties.cluster_id) {
-          var _feature$properties2;
-          var clusterData = _this3.getLeaves((_feature$properties2 = feature.properties) === null || _feature$properties2 === void 0 ? void 0 : _feature$properties2.cluster_id);
-          feature.properties.clusterData = clusterData;
-          if (field && method) {
-            var columnData = clusterData === null || clusterData === void 0 ? void 0 : clusterData.map(function (item) {
-              var data = _defineProperty({}, field, item.properties[field]);
-              return data;
-            });
-            var column = Satistics.getColumn(columnData, field);
-            var stat = Satistics.getSatByColumn(method, column);
-            var fieldName = 'point_' + method;
-            feature.properties[fieldName] = stat.toFixed(2);
-          }
-        }
-        var marker = _this3.clusterMarker(feature);
-        _this3.clusterMarkers.push(marker);
-        marker.addTo(_this3.scene);
-      });
+  }
+  initCluster() {
+    if (!this.markerLayerOption.cluster) {
+      return;
     }
-  }, {
-    key: "getLeaves",
-    value: function getLeaves(clusterId) {
-      var limit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Infinity;
-      var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-      if (!clusterId) {
-        return null;
+    const {
+      radius,
+      minZoom = 0,
+      maxZoom
+    } = this.markerLayerOption.clusterOption;
+    this.clusterIndex = new Supercluster({
+      radius,
+      minZoom,
+      maxZoom
+    });
+    // @ts-ignore
+    this.clusterIndex.load(this.points);
+  }
+  getClusterMarker(viewBounds, zoom) {
+    const viewBBox = viewBounds[0].concat(viewBounds[1]);
+    const clusterPoint = this.clusterIndex.getClusters(viewBBox, zoom);
+    this.clusterMarkers.forEach(marker => {
+      marker.remove();
+    });
+    this.clusterMarkers = [];
+    clusterPoint.forEach(feature => {
+      var _feature$properties;
+      const {
+        field,
+        method
+      } = this.markerLayerOption.clusterOption;
+      // 处理聚合数据
+      if ((_feature$properties = feature.properties) !== null && _feature$properties !== void 0 && _feature$properties.cluster_id) {
+        var _feature$properties2;
+        const clusterData = this.getLeaves((_feature$properties2 = feature.properties) === null || _feature$properties2 === void 0 ? void 0 : _feature$properties2.cluster_id);
+        feature.properties.clusterData = clusterData;
+        if (field && method) {
+          const columnData = clusterData === null || clusterData === void 0 ? void 0 : clusterData.map(item => {
+            const data = {
+              [field]: item.properties[field]
+            };
+            return data;
+          });
+          const column = Satistics.getColumn(columnData, field);
+          const stat = Satistics.getSatByColumn(method, column);
+          const fieldName = 'point_' + method;
+          feature.properties[fieldName] = stat.toFixed(2);
+        }
       }
-      return this.clusterIndex.getLeaves(clusterId, limit, offset);
+      const marker = this.clusterMarker(feature);
+      this.clusterMarkers.push(marker);
+      marker.addTo(this.scene);
+    });
+  }
+  getLeaves(clusterId, limit = Infinity, offset = 0) {
+    if (!clusterId) {
+      return null;
     }
-  }, {
-    key: "clusterMarker",
-    value: function clusterMarker(feature) {
-      var clusterOption = this.markerLayerOption.clusterOption;
-      var _ref = clusterOption,
-        _ref$element = _ref.element,
-        element = _ref$element === void 0 ? this.generateElement.bind(this) : _ref$element;
-      var marker = new Marker({
-        element: element(feature)
-      }).setLnglat({
-        lng: feature.geometry.coordinates[0],
-        lat: feature.geometry.coordinates[1]
-      });
-      return marker;
+    return this.clusterIndex.getLeaves(clusterId, limit, offset);
+  }
+  clusterMarker(feature) {
+    const clusterOption = this.markerLayerOption.clusterOption;
+    const {
+      element = this.generateElement.bind(this)
+    } = clusterOption;
+    const marker = new Marker({
+      element: element(feature)
+    }).setLnglat({
+      lng: feature.geometry.coordinates[0],
+      lat: feature.geometry.coordinates[1]
+    });
+    return marker;
+  }
+  normalMarker(feature) {
+    const marker_id = feature.properties.marker_id;
+    return this.markers[marker_id];
+  }
+  update() {
+    if (!this.mapsService) {
+      return;
     }
-  }, {
-    key: "normalMarker",
-    value: function normalMarker(feature) {
-      var marker_id = feature.properties.marker_id;
-      return this.markers[marker_id];
+    // 当图层中无marker时，无需更新
+    if (this.markers.length === 0) {
+      return;
     }
-  }, {
-    key: "update",
-    value: function update() {
-      if (!this.mapsService) {
-        return;
-      }
-      // 当图层中无marker时，无需更新
-      if (this.markers.length === 0) {
-        return;
-      }
-      var zoom = this.mapsService.getZoom();
-      var bbox = this.mapsService.getBounds();
-      if (!this.bbox || Math.abs(zoom - this.zoom) >= 1 || !boundsContains(this.bbox, bbox)) {
-        this.bbox = padBounds(bbox, 0.5);
-        this.zoom = Math.floor(zoom);
-        this.getClusterMarker(this.bbox, this.zoom);
-      }
+    const zoom = this.mapsService.getZoom();
+    const bbox = this.mapsService.getBounds();
+    if (!this.bbox || Math.abs(zoom - this.zoom) >= 1 || !boundsContains(this.bbox, bbox)) {
+      this.bbox = padBounds(bbox, 0.5);
+      this.zoom = Math.floor(zoom);
+      this.getClusterMarker(this.bbox, this.zoom);
     }
-  }, {
-    key: "generateElement",
-    value: function generateElement(feature) {
-      var el = DOM.create('div', 'l7-marker-cluster');
-      var label = DOM.create('div', '', el);
-      var span = DOM.create('span', '', label);
-      var _this$markerLayerOpti4 = this.markerLayerOption.clusterOption,
-        field = _this$markerLayerOpti4.field,
-        method = _this$markerLayerOpti4.method;
-      feature.properties.point_count = feature.properties.point_count || 1;
-      var text = field && method ? feature.properties['point_' + method] || feature.properties[field] : feature.properties.point_count;
-      span.textContent = text;
-      return el;
-    }
-  }]);
-  return MarkerLayer;
-}(EventEmitter);
-export { MarkerLayer as default };
+  }
+  generateElement(feature) {
+    const el = DOM.create('div', 'l7-marker-cluster');
+    const label = DOM.create('div', '', el);
+    const span = DOM.create('span', '', label);
+    const {
+      field,
+      method
+    } = this.markerLayerOption.clusterOption;
+    feature.properties.point_count = feature.properties.point_count || 1;
+    const text = field && method ? feature.properties['point_' + method] || feature.properties[field] : feature.properties.point_count;
+    span.textContent = text;
+    return el;
+  }
+}