fix: 天地图Marker和Popup的bug

packages/component/src/marker.ts

@@ -61,12 +61,12 @@ export default class Marker extends EventEmitter {
     // this.sceneSerive.getSceneContainer().appendChild(element as HTMLElement);
     this.mapsService.getMarkerContainer().appendChild(element as HTMLElement);
     this.registerMarkerEvent(element as HTMLElement);
-    //天地图仅监听zoomchange 不注册camerachane,对于平移,在mapsService中实现
-    // this.mapsService.on('zoomchange', this.updatePositionWhenZoom);
     this.mapsService.on('camerachange', this.update); // 注册高德1.x 的地图事件监听
     this.update();
     this.updateDraggable();
     this.added = true;
+    // @ts-ignore
+    this.mapsService.addZoomListenerWhenAddMarkerOrPopup(this);
     this.emit('added');
     return this;
   }
@@ -76,8 +76,9 @@ export default class Marker extends EventEmitter {
       this.mapsService.off('click', this.onMapClick);
       this.mapsService.off('move', this.update);
       this.mapsService.off('moveend', this.update);
-      // this.mapsService.off('zoomchange', this.update);
       this.mapsService.off('camerachange', this.update);
+      // @ts-ignore
+      this.mapsService.removeZoomListenerWhenRemoveMarkerOrPopup(this);
     }
     this.unRegisterMarkerEvent();
     this.removeAllListeners();
@@ -219,7 +220,7 @@ export default class Marker extends EventEmitter {
     DOM.setTransform(element as HTMLElement, `${anchorTranslate[anchor]}`);
   }
   //天地图在开始缩放时触发 更新目标位置时添加过渡效果
-  private updatePositionWhenZoom(ev: { map: any; center: any; zoom: any; }) {
+  public updatePositionWhenZoom(ev: { map: any; center: any; zoom: any; }) {
     if (!this.mapsService) {
       return;
     }
@@ -375,7 +376,7 @@ export default class Marker extends EventEmitter {
       ) {
         element.style.display = 'none';
       }
-     
+
       element.style.left =  pos.x + offsets[0] + 'px';
       element.style.top = pos.y - offsets[1] + 'px';
       console.log(element.style.left);

packages/component/src/popup/popup.ts

@@ -111,8 +111,6 @@ export default class Popup<O extends IPopupOption = IPopupOption>
     this.mapsService = scene.get<IMapService>(TYPES.IMapService);
     this.sceneService = scene.get<ISceneService>(TYPES.ISceneService);
     this.layerService = scene.get<ILayerService>(TYPES.ILayerService);
-    //天地图仅监听zoomchange 不注册camerachane,对于平移,在mapsService中实现
-    // this.mapsService.on('zoomchange', this.updateWhenZoom);
     this.mapsService.on('camerachange', this.update);
     this.mapsService.on('viewchange', this.update);
     this.scene = scene;
@@ -131,6 +129,8 @@ export default class Popup<O extends IPopupOption = IPopupOption>
     if (title) {
       this.setTitle(title);
     }
+    // @ts-ignore
+    this.mapsService.addZoomListenerWhenAddMarkerOrPopup(this);
     this.emit('open');
     return this;
   }
@@ -154,12 +154,12 @@ export default class Popup<O extends IPopupOption = IPopupOption>
       // TODO: mapbox AMap 事件同步
       this.mapsService.off('camerachange', this.update);
       this.mapsService.off('viewchange', this.update);
-      //天地图的缩放事件
-      // this.mapsService.off('zoomchange', this.updateWhenZoom);
       this.updateCloseOnClick(true);
       this.updateCloseOnEsc(true);
       this.updateFollowCursor(true);
       // @ts-ignore
+      this.mapsService.removeZoomListenerWhenRemoveMarkerOrPopup(this);
+      // @ts-ignore
       delete this.mapsService;
     }
     this.emit('close');
@@ -334,13 +334,15 @@ export default class Popup<O extends IPopupOption = IPopupOption>
     }
     if (this.mapsService) {
       // 防止事件重复监听
-      // this.mapsService.off('zoonanim', this.updateWhenZoom);
       this.mapsService.off('camerachange', this.update);
       this.mapsService.off('viewchange', this.update);
+      // @ts-ignore
+      this.mapsService.removeZoomListenerWhenRemoveMarkerOrPopup(this);
 
-      // this.mapsService.on('zoonanim', this.updateWhenZoom);
       this.mapsService.on('camerachange', this.update);
       this.mapsService.on('viewchange', this.update);
+      // @ts-ignore
+      this.mapsService.addZoomListenerWhenAddMarkerOrPopup(this);
     }
     this.update();
     if (this.popupOption.autoPan) {
@@ -587,7 +589,7 @@ export default class Popup<O extends IPopupOption = IPopupOption>
       this.container.style.removeProperty('width');
     }
   }
-  protected updateWhenZoom = (ev:any) => {
+  protected updatePositionWhenZoom = (ev:any) => {
     this.updatePosition(ev,true);
   }
   protected update = () => {

packages/core/src/services/map/IMapService.ts

@@ -64,7 +64,6 @@ export interface IMapService<RawMap = {}> {
   getMarkerContainer(): HTMLElement;
   getOverlayContainer(): HTMLElement | undefined;
   // MapEvent // 定义事件类型
-
   on(type: string, handler: (...args: any[]) => void): void;
   off(type: string, handler: (...args: any[]) => void): void;
   once(type: string, handler: (...args: any[]) => void): void;
@@ -124,6 +123,7 @@ export interface IMapService<RawMap = {}> {
   getCustomCoordCenter?(): [number, number];
   exportMap(type: 'jpg' | 'png'): string;
 
+
   // 地球模式下的地图方法/属性
   rotateY?(
     option:

packages/maps/src/tdtmap/map.ts

@@ -49,6 +49,13 @@ export default class TdtMapService extends BaseMapService<any> {
     return;
   }
 
+  public addZoomListenerWhenAddMarkerOrPopup(object:any): void {
+    //天地图仅监听zoomchange 不注册camerachane,对于平移,在mapsService中实现
+    this.on('zoomchange', object.updatePositionWhenZoom);
+  }
+  public removeZoomListenerWhenRemoveMarkerOrPopup(object:any): void {
+    this.off('zoomchange', object.updatePositionWhenZoom);
+  }
   public getMarkerContainer(): HTMLElement {
     return this.markerContainer;
   }

packages/maps/src/utils/BaseMapService.ts

@@ -76,6 +76,10 @@ export default abstract class BaseMapService<T>
     this.markerContainer = DOM.create('div', 'l7-marker-container', container);
     this.markerContainer.setAttribute('tabindex', '-1');
   }
+  //需要子类实现 目前只有天地图实现
+  public addZoomListenerWhenAddMarkerOrPopup(object:any): void {}
+  //需要子类实现 目前只有天地图实现
+  public removeZoomListenerWhenRemoveMarkerOrPopup(object:any): void {}
 
   public getMarkerContainer(): HTMLElement {
     return this.markerContainer;