@antv/l7-component 2.17.12 → 2.18.2

package/es/marker-layer.js

@@ -1,343 +0,0 @@
-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 { TYPES } from '@antv/l7-core';
-import { bindAll, boundsContains, DOM, padBounds, Satistics } from '@antv/l7-utils';
-import { EventEmitter } from 'eventemitter3';
-import { merge } from 'lodash';
-// @ts-ignore
-// tslint:disable-next-line:no-submodule-imports
-import Supercluster from 'supercluster/dist/supercluster';
-import Marker from "./marker";
-var MarkerLayer = /*#__PURE__*/function (_EventEmitter) {
-  _inherits(MarkerLayer, _EventEmitter);
-  var _super = _createSuper(MarkerLayer);
-  // 聚合后的marker列表
-
-  function MarkerLayer(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;
-  }
-  _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.get(TYPES.IMapService);
-      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: "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()
-      };
-    }
-
-    // 获取容器尺寸
-  }, {
-    key: "getContainerSize",
-    value: function getContainerSize() {
-      return this.containerSize;
-    }
-
-    // 在图层添加单个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);
-        }
-      }
-      this.markers.push(marker);
-      // if(this.inited) {
-      //   marker.addTo(this.scene);
-      // }
-    }
-  }, {
-    key: "removeMarker",
-    value: function removeMarker(marker) {
-      this.markers.indexOf(marker);
-      var markerIndex = this.markers.indexOf(marker);
-      if (markerIndex > -1) {
-        this.markers.splice(markerIndex, 1);
-      }
-    }
-
-    /**
-     * 隐藏 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
-     */
-  }, {
-    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';
-      });
-    }
-
-    // 返回当下的markers数据，有聚合图时返回聚合的marker列表，否则返回原始maerker列表
-  }, {
-    key: "getMarkers",
-    value: function getMarkers() {
-      var cluster = this.markerLayerOption.cluster;
-      return cluster ? this.clusterMarkers : this.markers;
-    }
-
-    // 批量添加marker到scene
-  }, {
-    key: "addMarkers",
-    value: function addMarkers() {
-      var _this2 = this;
-      this.getMarkers().forEach(function (marker) {
-        marker.addTo(_this2.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数据保存在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);
-      }
-    }
-  }, {
-    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
-      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);
-      });
-    }
-  }, {
-    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;
-      }
-      return this.clusterIndex.getLeaves(clusterId, limit, offset);
-    }
-  }, {
-    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;
-    }
-  }, {
-    key: "normalMarker",
-    value: function normalMarker(feature) {
-      var marker_id = feature.properties.marker_id;
-      return this.markers[marker_id];
-    }
-  }, {
-    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);
-      }
-    }
-  }, {
-    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 };

package/es/marker.d.ts

@@ -1,55 +0,0 @@
-import { ILngLat, IMarkerContainerAndBounds, IMarkerOption, IPoint, IPopup } from '@antv/l7-core';
-import { anchorType } from '@antv/l7-utils';
-import { EventEmitter } from 'eventemitter3';
-import { Container } from 'inversify';
-export default class Marker extends EventEmitter {
-    private markerOption;
-    private defaultMarker;
-    private popup;
-    private mapsService;
-    private sceneSerive;
-    private lngLat;
-    private scene;
-    private added;
-    getMarkerLayerContainerSize(): IMarkerContainerAndBounds | void;
-    constructor(option?: Partial<IMarkerOption>);
-    getDefault(): {
-        element: undefined;
-        anchor: anchorType;
-        offsets: number[];
-        color: string;
-        draggable: boolean;
-    };
-    addTo(scene: Container): this;
-    remove(): this;
-    setLnglat(lngLat: ILngLat | IPoint): this;
-    getLnglat(): ILngLat;
-    getElement(): HTMLElement;
-    setElement(el: HTMLElement): this;
-    openPopup(): this;
-    closePopup(): this;
-    setPopup(popup: IPopup): this;
-    togglePopup(): this;
-    getPopup(): IPopup;
-    getOffset(): number[];
-    setDraggable(draggable: boolean): void;
-    isDraggable(): boolean;
-    getExtData(): any;
-    setExtData(data: any): void;
-    private update;
-    private onMapClick;
-    private getCurrentContainerSize;
-    private updatePosition;
-    private init;
-    private registerMarkerEvent;
-    private unRegisterMarkerEvent;
-    private eventHandle;
-    /**
-     * 高德 2.x 使用了 fastClick.js 避免延迟，导致 IOS 移动端的 click 事件不会正常触发，需要手动触发
-     * @param e
-     */
-    private touchStartTime;
-    private polyfillEvent;
-    private addDragHandler;
-    private onUp;
-}