@antv/l7-component 2.25.7 → 2.25.10

package/es/interface.d.ts

@@ -0,0 +1,29 @@
+export type ControlEvent = 'show' | 'hide' | 'add' | 'remove' | string;
+export interface IMarkerStyleOption {
+    element?: (...args: any[]) => any;
+    style: {
+        [key: string]: any;
+    } | ((...args: any[]) => any);
+    className: string;
+    field?: string;
+    method?: 'sum' | 'max' | 'min' | 'mean';
+    radius: number;
+    maxZoom: number;
+    minZoom: number;
+    zoom: number;
+}
+export interface IMarkerLayerOption {
+    cluster: boolean;
+    clusterOption: Partial<IMarkerStyleOption>;
+    /**
+     * Default marker options applied to markers added to this layer when not overridden per-marker.
+     * Example: { color: '#ff0000', style: { width: '24px', height: '24px' }, className: 'my-marker' }
+     */
+    markerOption?: Partial<{
+        color?: string;
+        style?: {
+            [key: string]: any;
+        };
+        className?: string;
+    }>;
+}

package/es/interface.js

@@ -0,0 +1 @@
+export {};

package/es/marker-layer.d.ts

@@ -0,0 +1,46 @@
+import type { IMarker, L7Container } from '@antv/l7-core';
+import { EventEmitter } from 'eventemitter3';
+import type { IMarkerLayerOption } from './interface';
+export default class MarkerLayer extends EventEmitter {
+    private markers;
+    private markerLayerOption;
+    private clusterIndex;
+    private points;
+    private clusterMarkers;
+    private mapsService;
+    private scene;
+    private zoom;
+    private bbox;
+    private inited;
+    private containerSize;
+    constructor(option?: Partial<IMarkerLayerOption>);
+    getDefault(): IMarkerLayerOption;
+    addTo(scene: L7Container): this;
+    private setContainerSize;
+    private getContainerSize;
+    addMarker(marker: IMarker): void;
+    removeMarker(marker: IMarker): void;
+    /**
+     * 隐藏 marker 在每个 marker 上单独修改属性而不是在 markerContainer 上修改（在 markerContainer 修改会有用户在场景加载完之前调用失败的问题）
+     */
+    hide(): void;
+    /**
+     * 显示 marker
+     */
+    show(): void;
+    getMarkers(): IMarker[];
+    getOriginMarkers(): IMarker[];
+    addMarkers(): void;
+    clear(): void;
+    destroy(): void;
+    private updateMarkers;
+    private addPoint;
+    private removePoint;
+    private initCluster;
+    private getClusterMarker;
+    private getLeaves;
+    private clusterMarker;
+    private normalMarker;
+    private update;
+    private generateElement;
+}

package/es/marker-layer.js

@@ -0,0 +1,509 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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";
+const {
+  merge
+} = lodashUtil;
+export default class MarkerLayer extends EventEmitter {
+  constructor(option) {
+    var _this$markerLayerOpti;
+    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;
+  }
+  getDefault() {
+    return {
+      cluster: false,
+      clusterOption: {
+        radius: 80,
+        maxZoom: 20,
+        minZoom: 0,
+        zoom: -99,
+        style: {},
+        className: ''
+      }
+    };
+  }
+
+  // 执行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 更新事件
+    }
+    // 统一由 layer 管理 marker 的位置更新，避免每个 marker 单独注册地图事件
+    this.mapsService.on('camerachange', this.updateMarkers.bind(this));
+    this.mapsService.on('viewchange', this.updateMarkers.bind(this));
+    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;
+  }
+
+  // 设置容器大小
+  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()
+    };
+  }
+
+  // 获取容器尺寸
+  getContainerSize() {
+    return this.containerSize;
+  }
+
+  // 在图层添加单个marker
+  addMarker(marker) {
+    const cluster = this.markerLayerOption.cluster;
+    marker.getMarkerLayerContainerSize = this.getContainerSize.bind(this);
+
+    // apply default markerOption if provided by layer
+    try {
+      const mOpt = this.markerLayerOption.markerOption;
+      if (mOpt && marker && typeof marker.getElement === 'function') {
+        const el = marker.getElement();
+        if (el) {
+          // apply className
+          if (mOpt.className) {
+            // DOM helper available
+            try {
+              DOM.addClass(el, mOpt.className);
+            } catch (e) {
+              el.className = `${el.className || ''} ${mOpt.className}`.trim();
+            }
+          }
+          // apply style properties
+          if (mOpt.style && typeof mOpt.style === 'object') {
+            Object.keys(mOpt.style).forEach(k => {
+              try {
+                // @ts-ignore
+                el.style[k] = mOpt.style[k];
+              } catch (e) {
+                // ignore invalid styles
+              }
+            });
+          }
+          // apply color: try find svg path inside marker element and set fill
+          if (mOpt.color) {
+            try {
+              // querySelector can return SVGPathElement; coerce to any for attribute access
+              const svgPath = el.querySelector ? el.querySelector('path') : null;
+              if (svgPath && typeof svgPath.setAttribute === 'function') {
+                svgPath.setAttribute('fill', mOpt.color);
+              } else {
+                // fallback: set background color
+                el.style.background = mOpt.color;
+              }
+            } catch (e) {
+              // ignore
+            }
+          }
+        }
+      }
+    } catch (err) {
+      // be defensive — don't block marker addition on errors applying defaults
+      void err;
+    }
+    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);
+
+    // if layer has been added to a scene, immediately add marker's element into scene
+    // this ensures addMarker works both before and after addTo(scene)
+    try {
+      if (this.inited && this.scene && typeof marker.addTo === 'function') {
+        // When cluster mode is enabled, defer actual DOM mounting of original markers
+        // to the clustering render pass so that only cluster markers (or the chosen
+        // original marker for single-point clusters) are attached. This prevents
+        // duplicate DOM nodes / missing event handlers caused by pre-mounting originals.
+        if (!this.markerLayerOption.cluster) {
+          marker.addTo(this.scene);
+        }
+      }
+    } catch (e) {
+      // defensive: do not break on addTo errors
+      void e;
+    }
+  }
+  removeMarker(marker) {
+    this.markers.indexOf(marker);
+    const markerIndex = this.markers.indexOf(marker);
+    if (markerIndex > -1) {
+      // remove visual element and unbind handlers
+      try {
+        if (typeof marker.remove === 'function') {
+          marker.remove();
+        }
+      } catch (e) {
+        void e;
+      }
+      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 修改会有用户在场景加载完之前调用失败的问题）
+   */
+  hide() {
+    this.markers.forEach(m => {
+      try {
+        if (typeof m.hide === 'function') {
+          m.hide();
+        } else {
+          m.getElement().style.display = 'none';
+        }
+      } catch (e) {
+        void e;
+      }
+    });
+    this.clusterMarkers.forEach(m => {
+      try {
+        if (typeof m.hide === 'function') {
+          m.hide();
+        } else {
+          m.getElement().style.display = 'none';
+        }
+      } catch (e) {
+        void e;
+      }
+    });
+  }
+
+  /**
+   * 显示 marker
+   */
+  show() {
+    this.markers.forEach(m => {
+      try {
+        if (typeof m.show === 'function') {
+          m.show();
+        } else {
+          m.getElement().style.display = 'block';
+        }
+      } catch (e) {
+        void e;
+      }
+    });
+    this.clusterMarkers.forEach(m => {
+      try {
+        if (typeof m.show === 'function') {
+          m.show();
+        } else {
+          m.getElement().style.display = 'block';
+        }
+      } catch (e) {
+        void e;
+      }
+    });
+  }
+
+  // 返回当下的markers数据，有聚合图时返回聚合的marker列表，否则返回原始maerker列表
+  getMarkers() {
+    const cluster = this.markerLayerOption.cluster;
+    return cluster ? this.clusterMarkers : this.markers;
+  }
+  getOriginMarkers() {
+    return this.markers;
+  }
+
+  // 批量添加marker到scene
+  addMarkers() {
+    this.getMarkers().forEach(marker => {
+      marker.addTo(this.scene);
+    });
+  }
+
+  // 清除图层里的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));
+    this.mapsService.off('camerachange', this.updateMarkers.bind(this));
+    this.mapsService.off('viewchange', this.updateMarkers.bind(this));
+  }
+  updateMarkers() {
+    // update positions for both origin markers and cluster markers
+    try {
+      this.markers.forEach(m => {
+        if (m && typeof m.update === 'function') {
+          m.update();
+        }
+      });
+      this.clusterMarkers.forEach(m => {
+        if (m && typeof m.update === 'function') {
+          m.update();
+        }
+      });
+    } catch (e) {
+      void e;
+    }
+  }
+
+  // 将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);
+    }
+  }
+  removePoint(id) {
+    const targetIndex = this.points.findIndex(point => point.properties.marker_id === id);
+    if (targetIndex > -1) {
+      this.points.splice(targetIndex, 1);
+    }
+    if (this.clusterIndex) {
+      // 在删除点的时候需要更新 cluster 的数据
+      this.clusterIndex.load(this.points);
+    }
+  }
+  initCluster() {
+    if (!this.markerLayerOption.cluster) {
+      return;
+    }
+    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);
+        }
+      }
+      const marker = this.clusterMarker(feature);
+      // attach layer-level re-emission so consumers can listen to cluster marker events
+      try {
+        // IMarker type may not declare EventEmitter methods; cast to any for runtime attach
+        const anyMarker = marker;
+        if (anyMarker && typeof anyMarker.on === 'function') {
+          anyMarker.on('click', ev => {
+            try {
+              this.emit('marker:click', {
+                marker: anyMarker,
+                data: anyMarker.getExtData ? anyMarker.getExtData() : null,
+                lngLat: anyMarker.getLnglat ? anyMarker.getLnglat() : null,
+                originalEvent: ev
+              });
+            } catch (e) {
+              void e;
+            }
+          });
+        }
+      } catch (e) {
+        void e;
+      }
+      this.clusterMarkers.push(marker);
+      marker.addTo(this.scene);
+    });
+  }
+  getLeaves(clusterId, limit = Infinity, offset = 0) {
+    if (!clusterId) {
+      return null;
+    }
+    return this.clusterIndex.getLeaves(clusterId, limit, offset);
+  }
+  clusterMarker(feature) {
+    var _feature$properties3, _feature$properties4;
+    const clusterOption = this.markerLayerOption.clusterOption;
+    const {
+      element = this.generateElement.bind(this)
+    } = clusterOption;
+
+    // determine cluster count
+    let pointCount = (_feature$properties3 = feature.properties) === null || _feature$properties3 === void 0 ? void 0 : _feature$properties3.point_count;
+    if (pointCount === undefined && (_feature$properties4 = feature.properties) !== null && _feature$properties4 !== void 0 && _feature$properties4.cluster_id) {
+      const leaves = this.getLeaves(feature.properties.cluster_id, Infinity, 0) || [];
+      pointCount = leaves.length;
+    }
+
+    // if this cluster effectively contains only one original marker, return the original marker
+    if ((pointCount === 1 || pointCount === '1') && feature.properties) {
+      // try to get the original marker by marker_id from leaves or properties
+      let leaf = null;
+      if (feature.properties.cluster_id) {
+        const leaves = this.getLeaves(feature.properties.cluster_id, 1, 0);
+        leaf = leaves && leaves[0];
+      } else if (feature.properties.marker_id !== undefined) {
+        leaf = feature;
+      }
+      if (leaf && leaf.properties && typeof leaf.properties.marker_id === 'number') {
+        const origin = this.normalMarker(leaf);
+        if (origin) {
+          // ensure aggregated properties are available on the original marker
+          try {
+            if (feature && feature.properties && typeof origin.setExtData === 'function') {
+              origin.setExtData(feature.properties);
+            }
+          } catch (e) {
+            void e;
+          }
+          return origin;
+        }
+      }
+      // fallback: if no marker_id, continue to render cluster element
+    }
+
+    // for real clusters (count > 1) or fallback, create cluster marker element
+    let el;
+    if (typeof element === 'function') {
+      el = element(feature);
+    } else {
+      // element may be a DOM node already
+      el = element;
+    }
+    const marker = new Marker({
+      element: el
+    }).setLnglat({
+      lng: feature.geometry.coordinates[0],
+      lat: feature.geometry.coordinates[1]
+    });
+    // attach aggregated properties to the cluster marker so getExtData() returns useful info
+    if (feature && feature.properties) {
+      // @ts-ignore
+      marker.setExtData(feature.properties);
+    }
+    return marker;
+  }
+  normalMarker(feature) {
+    const marker_id = feature.properties.marker_id;
+    return this.markers[marker_id];
+  }
+  update() {
+    if (!this.mapsService) {
+      return;
+    }
+    // 当图层中无marker时，无需更新
+    if (this.markers.length === 0) {
+      return;
+    }
+    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);
+    }
+  }
+  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;
+  }
+}

package/es/marker.d.ts

@@ -0,0 +1,66 @@
+import type { ILngLat, IMarkerContainerAndBounds, IMarkerOption, IPoint, IPopup, L7Container } from '@antv/l7-core';
+import { anchorType } from '@antv/l7-utils';
+import { EventEmitter } from 'eventemitter3';
+export default class Marker extends EventEmitter {
+    private markerOption;
+    private popup;
+    private mapsService;
+    private lngLat;
+    private scene;
+    private added;
+    private preLngLat;
+    private visible;
+    getMarkerLayerContainerSize(): IMarkerContainerAndBounds | void;
+    constructor(option?: Partial<IMarkerOption>);
+    getDefault(): {
+        element: undefined;
+        anchor: anchorType;
+        offsets: number[];
+        color: string;
+        draggable: boolean;
+        overflowHide: boolean;
+    };
+    addTo(scene: L7Container): this;
+    remove(): this;
+    /**
+     * Hide the marker visually but keep it in the layer's data structures.
+     */
+    hide(): this;
+    /**
+     * Show the marker if it was hidden.
+     */
+    show(): 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;
+    getDraggable(): boolean;
+    getExtData(): any;
+    setExtData(data: any): void;
+    update(): void;
+    private updatePositionWhenZoom;
+    private onMapClick;
+    private getCurrentContainerSize;
+    private updateDraggable;
+    private onMarkerDragStart;
+    private onMarkerDragMove;
+    private onMarkerDragEnd;
+    private updatePosition;
+    private init;
+    private registerMarkerEvent;
+    private unRegisterMarkerEvent;
+    private eventHandle;
+    /**
+     * 高德 2.x 使用了 fastClick.js 避免延迟，导致 IOS 移动端的 click 事件不会正常触发，需要手动触发
+     * @param e
+     */
+    private touchStartTime;
+    private polyfillEvent;
+}