@antv/l7-component 2.23.0 → 2.23.2

package/lib/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/lib/marker-layer.d.ts

@@ -43,6 +43,7 @@ export default class MarkerLayer extends EventEmitter {
     addMarkers(): void;
     clear(): void;
     destroy(): void;
+    private updateMarkers;
     private addPoint;
     private removePoint;
     private initCluster;

package/lib/marker-layer.js

@@ -64,6 +64,9 @@ class MarkerLayer extends _eventemitter.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();
@@ -93,6 +96,54 @@ class MarkerLayer extends _eventemitter.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 {
+              _l7Utils.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) {
@@ -105,11 +156,36 @@ class MarkerLayer extends _eventemitter.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);
@@ -124,11 +200,27 @@ class MarkerLayer extends _eventemitter.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;
+      }
     });
   }
 
@@ -136,11 +228,27 @@ class MarkerLayer extends _eventemitter.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;
+      }
     });
   }
 
@@ -179,6 +287,25 @@ class MarkerLayer extends _eventemitter.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中
@@ -261,6 +388,27 @@ class MarkerLayer extends _eventemitter.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);
     });
@@ -272,16 +420,65 @@ class MarkerLayer extends _eventemitter.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.default({
-      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/lib/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;

package/lib/marker.js

@@ -25,6 +25,7 @@ class Marker extends _eventemitter.EventEmitter {
       lng: 0,
       lat: 0
     });
+    (0, _defineProperty2.default)(this, "visible", true);
     (0, _defineProperty2.default)(this, "onMarkerDragStart", e => {
       const mapContainer = this.mapsService.getContainer();
       if (!mapContainer) {
@@ -111,7 +112,8 @@ class Marker extends _eventemitter.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;
@@ -120,10 +122,7 @@ class Marker extends _eventemitter.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();
@@ -138,6 +137,36 @@ class Marker extends _eventemitter.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)) {
@@ -268,6 +297,9 @@ class Marker extends _eventemitter.EventEmitter {
       lng,
       lat
     } = this.lngLat;
+    if (!this.visible) {
+      return;
+    }
     if (element) {
       element.style.display = 'block';
       element.style.whiteSpace = 'nowrap';
@@ -306,7 +338,6 @@ class Marker extends _eventemitter.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
@@ -347,6 +378,13 @@ class Marker extends _eventemitter.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';
@@ -460,13 +498,9 @@ class Marker extends _eventemitter.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/lib/popup/layerPopup.d.ts

@@ -17,7 +17,7 @@ export type LayerPopupConfigItem = {
 export interface ILayerPopupOption extends IPopupOption {
     config?: LayerPopupConfigItem[];
     items?: LayerPopupConfigItem[];
-    trigger: 'hover' | 'click';
+    trigger: 'hover' | 'click' | 'touchend' | 'touchstart';
 }
 type LayerMapInfo = {
     onMouseMove?: (layer: ILayer, e: any) => void;
@@ -45,6 +45,12 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
         featureId: number;
     };
     protected get layerConfigItems(): LayerPopupConfigItem[];
+    /**
+     * 根据环境获取实际的触发事件
+     * 当 trigger 为 'click' 时，移动端使用 'touchend'，PC 端使用 'click'
+     * @protected
+     */
+    protected getActualTriggerEvent(): "hover" | "click" | "touchstart" | "touchend";
     addTo(scene: L7Container): this;
     remove(): this;
     setOptions(option: Partial<ILayerPopupOption>): this;
@@ -60,7 +66,7 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
      */
     protected unbindLayerEvent(): void;
     protected onLayerMouseMove(layer: ILayer, e: any): void;
-    protected onLayerMouseOut(layer: ILayer, e: any): void;
+    protected onLayerMouseOut(layer: ILayer): void;
     protected onLayerClick: (layer: ILayer, e: any) => void;
     protected onSceneClick: () => void;
     protected onSourceUpdate(): void;

package/lib/popup/layerPopup.js

@@ -78,6 +78,21 @@ class LayerPopup extends _popup.default {
     } = this.popupOption;
     return (_ref = config !== null && config !== void 0 ? config : items) !== null && _ref !== void 0 ? _ref : [];
   }
+
+  /**
+   * 根据环境获取实际的触发事件
+   * 当 trigger 为 'click' 时，移动端使用 'touchend'，PC 端使用 'click'
+   * @protected
+   */
+  getActualTriggerEvent() {
+    const {
+      trigger
+    } = this.popupOption;
+    if (trigger === 'click') {
+      return (0, _l7Utils.isPC)() ? 'click' : 'touchend';
+    }
+    return trigger;
+  }
   addTo(scene) {
     super.addTo(scene);
     this.bindLayerEvent();
@@ -105,7 +120,7 @@ class LayerPopup extends _popup.default {
     return this;
   }
   getDefault(option) {
-    const isHoverTrigger = option.trigger !== 'click';
+    const isHoverTrigger = option.trigger === 'hover';
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, super.getDefault(option)), {}, {
       trigger: 'hover',
       followCursor: isHoverTrigger,
@@ -130,6 +145,7 @@ class LayerPopup extends _popup.default {
       trigger,
       closeOnClick
     } = this.popupOption;
+    const actualTrigger = this.getActualTriggerEvent();
     this.layerConfigItems.forEach(configItem => {
       var _layer$getSource;
       const layer = this.getLayerByConfig(configItem);
@@ -148,10 +164,10 @@ class LayerPopup extends _popup.default {
         var _this$mapsService;
         const onLayerClick = this.onLayerClick.bind(this, layer);
         layerInfo.onClick = onLayerClick;
-        layer === null || layer === void 0 || layer.on('click', onLayerClick);
+        layer === null || layer === void 0 || layer.on(actualTrigger, onLayerClick);
         const mapContainer = (_this$mapsService = this.mapsService) === null || _this$mapsService === void 0 ? void 0 : _this$mapsService.getMapContainer();
         if (mapContainer && closeOnClick) {
-          mapContainer.addEventListener('click', this.onSceneClick);
+          mapContainer.addEventListener(actualTrigger, this.onSceneClick);
         }
       }
       const source = layer === null || layer === void 0 || (_layer$getSource = layer.getSource) === null || _layer$getSource === void 0 ? void 0 : _layer$getSource.call(layer);
@@ -167,6 +183,7 @@ class LayerPopup extends _popup.default {
    * @protected
    */
   unbindLayerEvent() {
+    const actualTrigger = this.getActualTriggerEvent();
     this.layerConfigItems.forEach(configItem => {
       var _this$mapsService2;
       const layer = this.getLayerByConfig(configItem);
@@ -187,7 +204,7 @@ class LayerPopup extends _popup.default {
         layer.off('mouseout', onMouseOut);
       }
       if (onClick) {
-        layer.off('click', onClick);
+        layer.off(actualTrigger, onClick);
       }
       if (onSourceUpdate) {
         var _layer$getSource2;
@@ -195,7 +212,7 @@ class LayerPopup extends _popup.default {
       }
       const mapContainer = (_this$mapsService2 = this.mapsService) === null || _this$mapsService2 === void 0 ? void 0 : _this$mapsService2.getMapContainer();
       if (mapContainer) {
-        mapContainer.removeEventListener('click', this.onSceneClick);
+        mapContainer.removeEventListener(actualTrigger, this.onSceneClick);
       }
     });
   }
@@ -214,9 +231,7 @@ class LayerPopup extends _popup.default {
       this.show();
     }
   }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onLayerMouseOut(layer, e) {
+  onLayerMouseOut(layer) {
     this.setDisplayFeatureInfo(undefined);
     if (this.isShow) {
       this.hide();

package/lib/popup/popup.js

@@ -442,7 +442,6 @@ class Popup extends _eventemitter.EventEmitter {
   isOpen() {
     return !!this.mapsService;
   }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   getDefault(option) {
     // tslint:disable-next-line:no-object-literal-type-assertion
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-component",
-  "version": "2.23.0",
+  "version": "2.23.2",
   "description": "Component for L7",
   "license": "MIT",
   "author": "https://github.com/orgs/antvis/people",
@@ -16,13 +16,13 @@
     "@babel/runtime": "^7.7.7",
     "eventemitter3": "^4.0.0",
     "supercluster": "^7.0.0",
-    "@antv/l7-core": "2.23.0",
-    "@antv/l7-layers": "2.23.0",
-    "@antv/l7-utils": "2.23.0"
+    "@antv/l7-core": "2.23.2",
+    "@antv/l7-layers": "2.23.2",
+    "@antv/l7-utils": "2.23.2"
   },
   "devDependencies": {
     "less": "^4.1.3",
-    "@antv/l7-test-utils": "^2.23.0"
+    "@antv/l7-test-utils": "^2.23.2"
   },
   "publishConfig": {
     "access": "public",