@antv/l7-component 2.23.1 → 2.23.3-beta.0

package/es/interface.d.ts

@@ -15,4 +15,15 @@ export interface IMarkerStyleOption {
 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/marker-layer.d.ts

@@ -14,17 +14,7 @@ export default class MarkerLayer extends EventEmitter {
     private inited;
     private containerSize;
     constructor(option?: Partial<IMarkerLayerOption>);
-    getDefault(): {
-        cluster: boolean;
-        clusterOption: {
-            radius: number;
-            maxZoom: number;
-            minZoom: number;
-            zoom: number;
-            style: {};
-            className: string;
-        };
-    };
+    getDefault(): IMarkerLayerOption;
     addTo(scene: L7Container): this;
     private setContainerSize;
     private getContainerSize;
@@ -43,6 +33,7 @@ export default class MarkerLayer extends EventEmitter {
     addMarkers(): void;
     clear(): void;
     destroy(): void;
+    private updateMarkers;
     private addPoint;
     private removePoint;
     private initCluster;

package/es/marker-layer.js

@@ -56,6 +56,9 @@ export default class MarkerLayer extends EventEmitter {
       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();
@@ -85,6 +88,54 @@ export default class MarkerLayer extends EventEmitter {
   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) {
@@ -97,11 +148,36 @@ export default class MarkerLayer extends EventEmitter {
       }
     }
     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);
@@ -116,11 +192,27 @@ export default class MarkerLayer extends EventEmitter {
    * 隐藏 marker 在每个 marker 上单独修改属性而不是在 markerContainer 上修改（在 markerContainer 修改会有用户在场景加载完之前调用失败的问题）
    */
   hide() {
-    this.markers.map(m => {
-      m.getElement().style.opacity = '0';
+    this.markers.forEach(m => {
+      try {
+        if (typeof m.hide === 'function') {
+          m.hide();
+        } else {
+          m.getElement().style.opacity = '0';
+        }
+      } catch (e) {
+        void e;
+      }
     });
-    this.clusterMarkers.map(m => {
-      m.getElement().style.opacity = '0';
+    this.clusterMarkers.forEach(m => {
+      try {
+        if (typeof m.hide === 'function') {
+          m.hide();
+        } else {
+          m.getElement().style.opacity = '0';
+        }
+      } catch (e) {
+        void e;
+      }
     });
   }
 
@@ -128,11 +220,27 @@ export default class MarkerLayer extends EventEmitter {
    * 显示 marker
    */
   show() {
-    this.markers.map(m => {
-      m.getElement().style.opacity = '1';
+    this.markers.forEach(m => {
+      try {
+        if (typeof m.show === 'function') {
+          m.show();
+        } else {
+          m.getElement().style.opacity = '1';
+        }
+      } catch (e) {
+        void e;
+      }
     });
-    this.clusterMarkers.map(m => {
-      m.getElement().style.opacity = '1';
+    this.clusterMarkers.forEach(m => {
+      try {
+        if (typeof m.show === 'function') {
+          m.show();
+        } else {
+          m.getElement().style.opacity = '1';
+        }
+      } catch (e) {
+        void e;
+      }
     });
   }
 
@@ -171,6 +279,25 @@ export default class MarkerLayer extends EventEmitter {
     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中
@@ -253,6 +380,27 @@ export default class MarkerLayer extends EventEmitter {
         }
       }
       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);
     });
@@ -264,16 +412,65 @@ export default class MarkerLayer extends EventEmitter {
     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: element(feature)
+      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) {

package/es/marker.d.ts

@@ -9,6 +9,7 @@ export default class Marker extends EventEmitter {
     private scene;
     private added;
     private preLngLat;
+    private visible;
     getMarkerLayerContainerSize(): IMarkerContainerAndBounds | void;
     constructor(option?: Partial<IMarkerOption>);
     getDefault(): {
@@ -21,6 +22,14 @@ export default class Marker extends EventEmitter {
     };
     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;
@@ -35,7 +44,7 @@ export default class Marker extends EventEmitter {
     getDraggable(): boolean;
     getExtData(): any;
     setExtData(data: any): void;
-    private update;
+    update(): void;
     private updatePositionWhenZoom;
     private onMapClick;
     private getCurrentContainerSize;
@@ -54,6 +63,4 @@ export default class Marker extends EventEmitter {
      */
     private touchStartTime;
     private polyfillEvent;
-    private addDragHandler;
-    private onUp;
 }

package/es/marker.js

@@ -19,6 +19,7 @@ export default class Marker extends EventEmitter {
       lng: 0,
       lat: 0
     });
+    _defineProperty(this, "visible", true);
     _defineProperty(this, "onMarkerDragStart", e => {
       const mapContainer = this.mapsService.getContainer();
       if (!mapContainer) {
@@ -105,7 +106,8 @@ export default class Marker extends EventEmitter {
     } = this.markerOption;
     this.mapsService.getMarkerContainer().appendChild(element);
     this.registerMarkerEvent(element);
-    this.mapsService.on('camerachange', this.update); // 注册高德1.x 的地图事件监听
+    // marker 不再在自身注册地图相机事件，以避免为每个 marker 注册大量底层 map 监听器。
+    // 由 MarkerLayer 在 addTo 时统一注册并在相机变化时调用每个 marker.update()。
     this.update();
     this.updateDraggable();
     this.added = true;
@@ -114,10 +116,7 @@ export default class Marker extends EventEmitter {
   }
   remove() {
     if (this.mapsService) {
-      this.mapsService.off('click', this.onMapClick);
-      this.mapsService.off('move', this.update);
-      this.mapsService.off('moveend', this.update);
-      this.mapsService.off('camerachange', this.update);
+      // 不再负责移除地图级别的 update 监听（由 MarkerLayer 管理），移除地图事件请统一通过 layer
     }
     this.unRegisterMarkerEvent();
     this.removeAllListeners();
@@ -132,6 +131,36 @@ export default class Marker extends EventEmitter {
     }
     return this;
   }
+
+  /**
+   * Hide the marker visually but keep it in the layer's data structures.
+   */
+  hide() {
+    const {
+      element
+    } = this.markerOption;
+    if (element) {
+      element.style.display = 'none';
+    }
+    this.visible = false;
+    return this;
+  }
+
+  /**
+   * Show the marker if it was hidden.
+   */
+  show() {
+    const {
+      element
+    } = this.markerOption;
+    if (element) {
+      element.style.display = 'block';
+    }
+    this.visible = true;
+    // re-position after showing
+    this.update();
+    return this;
+  }
   setLnglat(lngLat) {
     this.lngLat = lngLat;
     if (Array.isArray(lngLat)) {
@@ -262,6 +291,9 @@ export default class Marker extends EventEmitter {
       lng,
       lat
     } = this.lngLat;
+    if (!this.visible) {
+      return;
+    }
     if (element) {
       element.style.display = 'block';
       element.style.whiteSpace = 'nowrap';
@@ -300,7 +332,6 @@ export default class Marker extends EventEmitter {
       element.style.transition = 'left 0.25s cubic-bezier(0,0,0.25,1), top 0.25s cubic-bezier(0,0,0.25,1)';
     }
   }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   onMapClick(e) {
     const {
       element
@@ -341,6 +372,13 @@ export default class Marker extends EventEmitter {
       lat
     } = this.lngLat;
     const pos = this.mapsService.lngLatToContainer([lng, lat]);
+    if (!this.visible) {
+      // remain hidden until show() is called
+      if (element) {
+        element.style.display = 'none';
+      }
+      return;
+    }
     if (element) {
       element.style.display = 'block';
       element.style.whiteSpace = 'nowrap';
@@ -454,14 +492,4 @@ export default class Marker extends EventEmitter {
       }
     }
   }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  addDragHandler(e) {
-    return null;
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onUp(e) {
-    throw new Error('Method not implemented.');
-  }
 }

package/es/popup/layerPopup.d.ts

@@ -17,7 +17,7 @@ export type LayerPopupConfigItem = {
 export interface ILayerPopupOption extends IPopupOption {
     config?: LayerPopupConfigItem[];
     items?: LayerPopupConfigItem[];
-    trigger: 'hover' | 'click' | 'touchend' | 'touchstart';
+    trigger?: 'hover' | 'click' | 'touchend' | 'touchstart';
 }
 type LayerMapInfo = {
     onMouseMove?: (layer: ILayer, e: any) => void;
@@ -50,7 +50,7 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
      * 当 trigger 为 'click' 时，移动端使用 'touchend'，PC 端使用 'click'
      * @protected
      */
-    protected getActualTriggerEvent(): "hover" | "click" | "touchstart" | "touchend";
+    protected getActualTriggerEvent(): 'hover' | 'click' | 'touchend' | 'touchstart';
     addTo(scene: L7Container): this;
     remove(): this;
     setOptions(option: Partial<ILayerPopupOption>): this;

package/es/popup/layerPopup.js

@@ -79,9 +79,8 @@ export default class LayerPopup extends Popup {
    * @protected
    */
   getActualTriggerEvent() {
-    const {
-      trigger
-    } = this.popupOption;
+    var _this$popupOption$tri;
+    const trigger = (_this$popupOption$tri = this.popupOption.trigger) !== null && _this$popupOption$tri !== void 0 ? _this$popupOption$tri : 'hover';
     if (trigger === 'click') {
       return isPC() ? 'click' : 'touchend';
     }
@@ -114,9 +113,12 @@ export default class LayerPopup extends Popup {
     return this;
   }
   getDefault(option) {
-    const isHoverTrigger = option.trigger === 'hover';
+    var _option$trigger;
+    // trigger 默认值为 'hover'
+    const trigger = (_option$trigger = option.trigger) !== null && _option$trigger !== void 0 ? _option$trigger : 'hover';
+    const isHoverTrigger = trigger === 'hover';
     return _objectSpread(_objectSpread({}, super.getDefault(option)), {}, {
-      trigger: 'hover',
+      trigger,
       followCursor: isHoverTrigger,
       lngLat: {
         lng: 0,

package/es/popup/popup.d.ts

@@ -48,6 +48,11 @@ export default class Popup<O extends IPopupOption = IPopupOption> extends EventE
      * @protected
      */
     protected isShow: boolean;
+    /**
+     * RAF 节流 ID
+     * @protected
+     */
+    protected rafId: number | null;
     protected get lngLat(): ILngLat;
     protected set lngLat(newLngLat: ILngLat);
     constructor(cfg?: Partial<O>);

package/es/popup/popup.js

@@ -61,6 +61,11 @@ export default class Popup extends EventEmitter {
      * @protected
      */
     _defineProperty(this, "isShow", true);
+    /**
+     * RAF 节流 ID
+     * @protected
+     */
+    _defineProperty(this, "rafId", null);
     _defineProperty(this, "onMouseMove", e => {
       var _container$getBoundin;
       const container = this.mapsService.getMapContainer();
@@ -170,7 +175,14 @@ export default class Popup extends EventEmitter {
       this.updatePosition(ev, true);
     });
     _defineProperty(this, "update", () => {
-      this.updatePosition(null, false);
+      // 使用 RAF 节流，避免高频事件导致的性能问题
+      if (this.rafId !== null) {
+        return;
+      }
+      this.rafId = requestAnimationFrame(() => {
+        this.rafId = null;
+        this.updatePosition(null, false);
+      });
     });
     this.popupOption = _objectSpread(_objectSpread({}, this.getDefault(cfg !== null && cfg !== void 0 ? cfg : {})), cfg);
     const {
@@ -219,6 +231,12 @@ export default class Popup extends EventEmitter {
     if (!(this !== null && this !== void 0 && this.isOpen())) {
       return;
     }
+
+    // 取消未执行的 RAF
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
     if (this.content) {
       DOM.remove(this.content);
     }

package/es/utils/eventManager.d.ts

@@ -0,0 +1,42 @@
+import type { IMapService } from '@antv/l7-core';
+type EventHandler = (...args: any[]) => void;
+/**
+ * 事件管理器，用于统一管理事件绑定和解绑
+ * 解决组件销毁时事件未正确清理导致的内存泄漏问题
+ */
+export declare class EventManager {
+    private bindings;
+    /**
+     * 绑定事件
+     * @param target 事件目标对象
+     * @param event 事件名称
+     * @param handler 事件处理函数
+     */
+    on(target: IMapService, event: string, handler: EventHandler): this;
+    on(target: HTMLElement, event: string, handler: EventHandler): this;
+    on(target: Window, event: string, handler: EventHandler): this;
+    on(target: Document, event: string, handler: EventHandler): this;
+    /**
+     * 解绑指定事件
+     * @param target 事件目标对象
+     * @param event 事件名称
+     * @param handler 事件处理函数
+     */
+    off(target: IMapService, event: string, handler: EventHandler): this;
+    off(target: HTMLElement, event: string, handler: EventHandler): this;
+    off(target: Window, event: string, handler: EventHandler): this;
+    off(target: Document, event: string, handler: EventHandler): this;
+    /**
+     * 清除所有绑定的事件
+     */
+    clear(): void;
+    /**
+     * 获取当前绑定的事件数量
+     */
+    size(): number;
+    /**
+     * 判断目标是否为 MapService
+     */
+    private isMapService;
+}
+export default EventManager;