fix: 天地图Marker和Popup的bug

packages/component/src/marker.ts

@@ -38,7 +38,7 @@ export default class Marker extends EventEmitter {
       ...this.getDefault(),
       ...option,
     };
-    bindAll(['update', 'onMove', 'onMapClick', 'updatePositionWhenZoom'], this);
+    bindAll(['update', 'onMove', 'onMapClick'], this);
     this.init();
   }
 
@@ -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.onAddMarkerOrPopup(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.onRemoveMarkerOrPopup(this);
     }
     this.unRegisterMarkerEvent();
     this.removeAllListeners();
@@ -218,54 +219,6 @@ export default class Marker extends EventEmitter {
     this.updatePosition();
     DOM.setTransform(element as HTMLElement, `${anchorTranslate[anchor]}`);
   }
-  //天地图在开始缩放时触发 更新目标位置时添加过渡效果
-  private updatePositionWhenZoom(ev: { map: any; center: any; zoom: any }) {
-    if (!this.mapsService) {
-      return;
-    }
-    const { element, offsets } = this.markerOption;
-    const { lng, lat } = this.lngLat;
-    if (element) {
-      element.style.display = 'block';
-      element.style.whiteSpace = 'nowrap';
-      const { containerHeight, containerWidth, bounds } =
-        this.getMarkerLayerContainerSize() || this.getCurrentContainerSize();
-      if (!bounds) {
-        return;
-      }
-      const map = ev.map;
-      const center = ev.center;
-      const zoom = ev.zoom;
-      const projectedCenter = map.DE(this.lngLat, zoom, center);
-      projectedCenter.x = Math.round(projectedCenter.x + offsets[0]);
-      projectedCenter.y = Math.round(projectedCenter.y - offsets[1]);
-      // 当前可视区域包含跨日界线
-      if (Math.abs(bounds[0][0]) > 180 || Math.abs(bounds[1][0]) > 180) {
-        if (projectedCenter.x > containerWidth) {
-          // 日界线右侧点左移
-          const newPos = this.mapsService.lngLatToContainer([lng - 360, lat]);
-          projectedCenter.x = newPos.x;
-        }
-        if (projectedCenter.x < 0) {
-          // 日界线左侧点右移
-          const newPos = this.mapsService.lngLatToContainer([lng + 360, lat]);
-          projectedCenter.x = newPos.x;
-        }
-      }
-      if (
-        projectedCenter.x > containerWidth ||
-        projectedCenter.x < 0 ||
-        projectedCenter.y > containerHeight ||
-        projectedCenter.y < 0
-      ) {
-        element.style.display = 'none';
-      }
-      element.style.left = projectedCenter.x + 'px';
-      element.style.top = projectedCenter.y + 'px';
-      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
   private onMapClick(e: MouseEvent) {
     const { element } = this.markerOption;
@@ -343,7 +296,8 @@ export default class Marker extends EventEmitter {
     }
     const { element, offsets } = this.markerOption;
     const { lng, lat } = this.lngLat;
-    const pos = this.mapsService.lngLatToContainer([lng, lat]);
+    //@ts-ignore
+    const pos = this.mapsService.lngLatToContainer([lng, lat],true);
     if (element) {
       element.style.display = 'block';
       element.style.whiteSpace = 'nowrap';
@@ -357,26 +311,30 @@ export default class Marker extends EventEmitter {
       if (Math.abs(bounds[0][0]) > 180 || Math.abs(bounds[1][0]) > 180) {
         if (pos.x > containerWidth) {
           // 日界线右侧点左移
-          const newPos = this.mapsService.lngLatToContainer([lng - 360, lat]);
+          //@ts-ignore
+          const newPos = this.mapsService.lngLatToContainer([lng - 360, lat],true);
           pos.x = newPos.x;
         }
         if (pos.x < 0) {
           // 日界线左侧点右移
-          const newPos = this.mapsService.lngLatToContainer([lng + 360, lat]);
+          //@ts-ignore
+          const newPos = this.mapsService.lngLatToContainer([lng + 360, lat],true);
           pos.x = newPos.x;
         }
       }
-      // 不在当前可视区域内隐藏点
+      // 不在当前可视区域内隐藏点 (天地图不处理 因为天地图平移的是父容器,为了避免平移时频繁更新位置,这里就不处理display了)
       if (
+        this.mapsService.getType() !== 'tdtmap'
+        && (
         pos.x > containerWidth ||
         pos.x < 0 ||
         pos.y > containerHeight ||
-        pos.y < 0
+        pos.y < 0)
       ) {
         element.style.display = 'none';
       }
 
-      element.style.left = pos.x + offsets[0] + 'px';
+      element.style.left =  pos.x + offsets[0] + 'px';
       element.style.top = pos.y - offsets[1] + 'px';
     }
   }

packages/component/src/popup/popup.ts

@@ -109,8 +109,6 @@ export default class Popup<O extends IPopupOption = IPopupOption>
     this.mapsService = scene.mapService;
     this.sceneService = scene.sceneService;
     this.layerService = scene.layerService;
-    //天地图仅监听zoomchange 不注册camerachane,对于平移,在mapsService中实现
-    // this.mapsService.on('zoomchange', this.updateWhenZoom);
     this.mapsService.on('camerachange', this.update);
     this.mapsService.on('viewchange', this.update);
     this.scene = scene;
@@ -129,6 +127,8 @@ export default class Popup<O extends IPopupOption = IPopupOption>
     if (title) {
       this.setTitle(title);
     }
+    // @ts-ignore
+    this.mapsService.onAddMarkerOrPopup(this);
     this.emit('open');
     return this;
   }
@@ -152,12 +152,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.onAddMarkerOrPopup(this);
+      // @ts-ignore
       delete this.mapsService;
     }
     this.emit('close');
@@ -332,13 +332,13 @@ 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);
+      // this.mapsService.onRemoveMarkerOrPopup(this);
 
-      // this.mapsService.on('zoonanim', this.updateWhenZoom);
       this.mapsService.on('camerachange', this.update);
       this.mapsService.on('viewchange', this.update);
+      // this.mapsService.onAddMarkerOrPopup(this);
     }
     this.update();
     if (this.popupOption.autoPan) {
@@ -385,26 +385,12 @@ export default class Popup<O extends IPopupOption = IPopupOption>
       return;
     }
     const { lng, lat } = this.lngLat;
-    const { x, y } = this.mapsService.lngLatToContainer([lng, lat]);
+    //@ts-ignore
+    const { x, y } = this.mapsService.lngLatToContainer([lng, lat],true);
 
     this.setPopupPosition(x, y);
   };
-  //zoom时计算PopUp的位置并更新
-  protected updateLngLatPositionWhenZoom = (ev: any) => {
-    if (!this.mapsService || this.popupOption.followCursor) {
-      return;
-    }
-    const map = ev.map;
-    const viewHalf = map.getSize();
-    viewHalf.x = viewHalf.x / 2;
-    viewHalf.y = viewHalf.y / 2;
-    const center = ev.center;
-    const zoom = ev.zoom;
-    const projectedCenter = map.DE(this.lngLat, zoom, center);
-    projectedCenter.x = Math.round(projectedCenter.x);
-    projectedCenter.y = Math.round(projectedCenter.y);
-    this.setPopupPosition(projectedCenter.x, projectedCenter.y, true);
-  };
+
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   protected getDefault(option: Partial<O>): O {
     // tslint:disable-next-line:no-object-literal-type-assertion
@@ -528,8 +514,7 @@ export default class Popup<O extends IPopupOption = IPopupOption>
     }
     this.hide();
   };
-  //更新位置 支持zoom时更新
-  private updatePosition = (ev: any, zoom: Boolean = true) => {
+  private updatePosition = () => {
     const hasPosition = !!this.lngLat;
     const { className, style, maxWidth, anchor, stopPropagation } =
       this.popupOption;
@@ -565,11 +550,7 @@ export default class Popup<O extends IPopupOption = IPopupOption>
 
       this.container.style.whiteSpace = 'nowrap';
     }
-    if (zoom) {
-      this.updateLngLatPositionWhenZoom(ev);
-    } else {
-      this.updateLngLatPosition();
-    }
+    this.updateLngLatPosition();
     DOM.setTransform(this.container, `${anchorTranslate[anchor]}`);
     applyAnchorClass(this.container, anchor, 'popup');
 
@@ -581,12 +562,10 @@ export default class Popup<O extends IPopupOption = IPopupOption>
     } else {
       this.container.style.removeProperty('width');
     }
-  };
-  protected updateWhenZoom = (ev: any) => {
-    this.updatePosition(ev, true);
-  };
+  }
+
   protected update = () => {
-    this.updatePosition(null, false);
+    this.updatePosition();
   };
   /**
    * 设置 Popup 相对于地图容器的 Position

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,10 @@ export interface IMapService<RawMap = {}> {
   // lngLatToCoords?(lnglatArray: any): any;
   getCustomCoordCenter?(): [number, number];
   exportMap(type: 'jpg' | 'png'): string;
+  // 添加marker或popup时触发
+  onAddMarkerOrPopup(object:any): void;
+  // 添加marker或popup时触发
+  onRemoveMarkerOrPopup(object:any): void;
 
   // 地球模式下的地图方法/属性
   rotateY?(