Merge pull request #502 from antvis/fix_issues_行政区划

Fix issues 行政区划

package.json

@@ -7,7 +7,7 @@
   },
   "devDependencies": {
     "@antv/g2": "^3.5.9",
-    "@antv/gatsby-theme-antv": "^0.11.5",
+    "@antv/gatsby-theme-antv": "0.10.59",
     "@babel/cli": "^7.6.4",
     "@babel/core": "^7.6.4",
     "@babel/plugin-proposal-decorators": "^7.6.0",

packages/boundary/src/layer/baseLayer.ts

@@ -36,6 +36,7 @@ export default class BaseLayer extends EventEmitter {
   protected options: IDistrictLayerOption;
   protected layers: ILayer[] = [];
   protected fillData: any;
+  protected bubbleData: any;
   private popup: IPopup;
 
   constructor(scene: Scene, option: Partial<IDistrictLayerOption> = {}) {
@@ -87,6 +88,23 @@ 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,
+                },
+              ],
+      });
+    }
   }
   protected async fetchData(data: { url: any; type: string }) {
     if (data.type === 'pbf') {
@@ -215,6 +233,8 @@ export default class BaseLayer extends EventEmitter {
           center: [feature.properties.x, feature.properties.y],
         };
       });
+
+      this.bubbleData = labeldata;
       this.addBubbleLayer(labeldata);
     }
     if (popup.enable) {

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

@@ -195,6 +195,24 @@ export default class Country extends React.Component {
         value: null,
       },
     ];
+
+    const ProvinceData2 = [
+      {
+        name: '云南省',
+        code: 530000,
+        value: 178810.12,
+      },
+      {
+        name: '黑龙江省',
+        code: 230000,
+        value: 163610.62,
+      },
+      {
+        name: '贵州省',
+        code: 520000,
+        value: 148060.45,
+      },
+    ];
     scene.on('loaded', () => {
       const Layer = new CountryLayer(scene, {
         data: ProvinceData,
@@ -204,7 +222,7 @@ export default class Country extends React.Component {
           enable: true,
           size: {
             field: 'value',
-            values: [3, 20],
+            values: [8, 20],
           },
         },
         popup: {
@@ -214,6 +232,10 @@ export default class Country extends React.Component {
           },
         },
       });
+
+      setTimeout(() => {
+        Layer.updateData(ProvinceData2);
+      }, 2000);
     });
     this.scene = scene;
   }