fix(component): 修复popuup 与marker 顺序的问题

fix #498

packages/boundary/src/layer/baseLayer.ts

@@ -90,21 +90,21 @@ export default class BaseLayer extends EventEmitter {
     });
 
     // 气泡图也需要更新
-   if(this.bubbleLayer) {
-    this.bubbleLayer.setData(this.bubbleData, {
-      transforms:
-        data.length === 0
-          ? []
-          : [
-              {
-                type: 'join',
-                sourceField: joinBy[1], // data1 对应字段名
-                targetField: joinBy[0], // data 对应字段名 绑定到的地理数据
-                data,
-              },
-            ],
-    });
-   }
+    if (this.bubbleLayer) {
+      this.bubbleLayer.setData(this.bubbleData, {
+        transforms:
+          data.length === 0
+            ? []
+            : [
+                {
+                  type: 'join',
+                  sourceField: joinBy[1], // data1 对应字段名
+                  targetField: joinBy[0], // data 对应字段名 绑定到的地理数据
+                  data,
+                },
+              ],
+      });
+    }
   }
   protected async fetchData(data: { url: any; type: string }) {
     if (data.type === 'pbf') {

packages/component/src/marker.ts

@@ -4,6 +4,7 @@ import {
   IMarkerOption,
   IPoint,
   IPopup,
+  ISceneService,
   TYPES,
 } from '@antv/l7-core';
 import {
@@ -22,6 +23,7 @@ export default class Marker extends EventEmitter {
   private defaultMarker: boolean;
   private popup: IPopup;
   private mapsService: IMapService<unknown>;
+  private sceneSerive: ISceneService;
   private lngLat: ILngLat;
   private scene: Container;
   private added: boolean = false;
@@ -49,7 +51,9 @@ export default class Marker extends EventEmitter {
     // this.remove();
     this.scene = scene;
     this.mapsService = scene.get<IMapService>(TYPES.IMapService);
+    this.sceneSerive = scene.get<ISceneService>(TYPES.ISceneService);
     const { element, draggable } = this.markerOption;
+    // this.sceneSerive.getSceneContainer().appendChild(element as HTMLElement);
     this.mapsService.getMarkerContainer().appendChild(element as HTMLElement);
     this.registerMarkerEvent(element as HTMLElement);
     this.mapsService.on('camerachange', this.update);

packages/component/src/popup.ts

@@ -197,7 +197,7 @@ export default class Popup extends EventEmitter implements IPopup {
     if (!this.mapsService || !hasPosition || !this.content) {
       return;
     }
-    const popupContainer = this.sceneSerive.getSceneContainer();
+    const popupContainer = this.mapsService.getMarkerContainer();
     if (!this.container && popupContainer) {
       this.container = this.creatDom(
         'div',
@@ -213,11 +213,14 @@ export default class Popup extends EventEmitter implements IPopup {
           .forEach((name) => this.container.classList.add(name));
       }
 
-      // ['mousemove', 'mousedown', 'mouseup', 'click'].forEach((type) => {
-      //   this.container.addEventListener(type, (e) => {
-      //     e.stopPropagation();
-      //   });
-      // });
+      // 高德地图需要阻止事件冒泡 // 测试mapbox 地图不需要添加
+      ['mousemove', 'mousedown', 'mouseup', 'click', 'dblclick'].forEach(
+        (type) => {
+          this.container.addEventListener(type, (e) => {
+            e.stopPropagation();
+          });
+        },
+      );
     }
     if (maxWidth && this.container.style.maxWidth !== maxWidth) {
       this.container.style.maxWidth = maxWidth;

packages/core/src/services/scene/ISceneService.ts

@@ -14,6 +14,7 @@ export interface ISceneService {
   getSceneConfig(): Partial<ISceneConfig>;
   render(): void;
   getSceneContainer(): HTMLDivElement;
+  getMarkerContainer(): HTMLElement;
   exportPng(type?: 'png' | 'jpg'): string;
   destroy(): void;
 }

packages/core/src/services/scene/SceneService.ts

@@ -102,6 +102,8 @@ export default class Scene extends EventEmitter implements ISceneService {
 
   private canvas: HTMLCanvasElement;
 
+  private markerContainer: HTMLElement;
+
   private hooks: {
     init: AsyncParallelHook;
   };
@@ -171,8 +173,12 @@ export default class Scene extends EventEmitter implements ISceneService {
       const $container = createRendererContainer(
         this.configService.getSceneConfig(this.id).id || '',
       );
+      
+      // 添加marker container;
       this.$container = $container;
 
+      // this.addMarkerContainer();
+
       if ($container) {
         this.canvas = DOM.create('canvas', '', $container) as HTMLCanvasElement;
         this.setCanvas();
@@ -261,6 +267,19 @@ export default class Scene extends EventEmitter implements ISceneService {
     return this.configService.getSceneConfig(this.id as string);
   }
 
+  public addMarkerContainer(): void {
+    // @ts-ignore
+    const mapContainer = this.$container.parentElement as HTMLElement;
+    if (mapContainer !== null) {
+      this.markerContainer = DOM.create('div', 'l7-marker-container', mapContainer);
+    }
+  }
+
+  public getMarkerContainer() {
+    return this.markerContainer;
+  }
+
+
   public destroy() {
     if (!this.inited) {
       this.destroyed = true;
@@ -333,4 +352,5 @@ export default class Scene extends EventEmitter implements ISceneService {
   private addSceneEvent(target: IInteractionTarget) {
     this.emit(target.type, target);
   }
+  
 }

stories/District/Layer/country_bubble.tsx

@@ -211,8 +211,8 @@ export default class Country extends React.Component {
         name: '贵州省',
         code: 520000,
         value: 148060.45,
-      }
-    ]
+      },
+    ];
     scene.on('loaded', () => {
       const Layer = new CountryLayer(scene, {
         data: ProvinceData,