feat: markers 添加容器、修复聚合失效、事件透传、markerlayer 增加 hide/show 事件

packages/component/src/markerlayer.ts

@@ -77,7 +77,8 @@ export default class MarkerLayer extends EventEmitter {
       this.initCluster();
       this.update();
       // 地图视野变化时，重新计算视野内的聚合点。
-      this.mapsService.on('camerachange', this.update);
+      this.mapsService.on('camerachange', this.update); // amap1.x 更新事件
+      this.mapsService.on('viewchange', this.update); // amap2.0 更新事件
     }
     this.addMarkers();
     return this;
@@ -98,6 +99,24 @@ export default class MarkerLayer extends EventEmitter {
     }
   }
 
+  /**
+   * 隐藏 marker 在每个 marker 上单独修改属性而不是在 markerContainer 上修改（在 markerContainer 修改会有用户在场景加载完之前调用失败的问题）
+   */
+  public hide() {
+    this.markers.map((m) => {
+      m.getElement().style.opacity = '0';
+    });
+  }
+
+  /**
+   * 显示 marker
+   */
+  public show() {
+    this.markers.map((m) => {
+      m.getElement().style.opacity = '1';
+    });
+  }
+
   public getMarkers() {
     const cluster = this.markerLayerOption.cluster;
     return cluster ? this.clusterMarkers : this.markers;

packages/core/src/services/interaction/PickingService.ts

@@ -321,7 +321,29 @@ export default class PickingService implements IPickingService {
       featureId: number | null;
     },
   ) {
-    layer.emit(target.type, target);
+    // 判断是否发生事件冲突
+    if (this.isEventCrash(target)) {
+      layer.emit(target.type, target);
+    }
+  }
+
+  /**
+   * 检测触发事件是否是在 marker/popup 上发生，若是则会发生冲突（发生冲突时 marker/popup 事件优先）
+   * @param obj
+   * @returns
+   */
+  private isEventCrash(obj: any) {
+    let notCrash = true;
+    obj.target.path.map((p: HTMLElement) => {
+       if(p.classList) {
+        p.classList.forEach((n: any) => {
+          if (n === 'l7-marker' || n === 'l7-popup') {
+            notCrash = false;
+          }
+        });
+       }
+    });
+    return notCrash;
   }
 
   /**

packages/maps/src/amap2/map.ts

@@ -152,7 +152,12 @@ export default class AMapService
       //   'amap-maps',
       // )[0] as HTMLElement;
       // this.markerContainer = DOM.create('div', 'l7-marker-container2', amap);
-      this.markerContainer = mapContainer;
+      this.markerContainer = DOM.create(
+        'div',
+        'l7-marker-container2',
+        mapContainer,
+      );
+      // this.markerContainer = mapContainer;
     }
   }
   public getMarkerContainer(): HTMLElement {

stories/Map/components/amap2demo_clustermarker.tsx

@@ -0,0 +1,65 @@
+//@ts-ignore
+import { MarkerLayer, Marker, Scene } from '@antv/l7';
+import { GaodeMap, GaodeMapV1 } from '@antv/l7-maps';
+import * as React from 'react';
+export default class Amap2demo_clustermarker extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    // this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [110.19382669582967, 30.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
+    });
+
+    scene.on('loaded', () => {
+      addMarkers();
+      scene.render();
+    });
+    function addMarkers() {
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
+      )
+        .then((res) => res.json())
+        .then((nodes) => {
+          const markerLayer = new MarkerLayer({
+            cluster: true,
+          });
+          for (let i = 0; i < nodes.features.length; i++) {
+            const { coordinates } = nodes.features[i].geometry;
+            const marker = new Marker().setLnglat({
+              lng: coordinates[0],
+              lat: coordinates[1],
+            });
+            markerLayer.addMarker(marker);
+          }
+          scene.addMarkerLayer(markerLayer);
+        });
+    }
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      </>
+    );
+  }
+}

stories/Map/components/amap2demo_markerlayer.tsx

@@ -58,7 +58,20 @@ export default class Amap2demo_markerlayer extends React.Component {
       markerLayer.addMarker(marker);
     }
     scene.addMarkerLayer(markerLayer);
+    // scene.on('loaded', () => {
+    //   markerLayer.hide()
+    // })
 
+    let f = 0;
+    setInterval(() => {
+      if (f === 0) {
+        markerLayer.hide();
+        f = 1;
+      } else {
+        markerLayer.show();
+        f = 0;
+      }
+    }, 800);
     this.scene = scene;
   }
 

stories/Map/map.stories.tsx

@@ -42,6 +42,7 @@ import Amap2demo_citybuilding from "./components/amap2demo_citybuilding"
 import Amap2demo_drilldown from "./components/amap2demo_drilldown"
 
 import Amap2demo_markerlayer from "./components/amap2demo_markerlayer"
+import Amap2demo_clustermarker from './components/amap2demo_clustermarker';
 
 import Amap2demo_instance from "./components/amap2demo_instance"
 
@@ -92,6 +93,7 @@ storiesOf('地图方法', module)
         .add('高德地图2.0 点击下钻', () => <Amap2demo_drilldown />)
 
         .add('高德地图2.0 Marker图层', () => <Amap2demo_markerlayer />)
+        .add('高德地图2.0 clusterMarker图层', () => <Amap2demo_clustermarker />)
 
         .add('高德地图2.0 instance实例', () => <Amap2demo_instance />)
 

stories/React/components/Scene.tsx

@@ -25,9 +25,16 @@ export default React.memo(function Map() {
     fetchData();
   }, []);
   const popupClick = (e: any) => {
-    e.stopPropagation();
+    console.log(e);
+    // e.stopPropagation();
     alert('11333');
   };
+
+  const markerClick = (e: any) => {
+    console.log(e);
+    // e.stopPropagation();
+    alert('marker');
+  };
   return (
     <>
       <AMapScene
@@ -50,12 +57,20 @@ export default React.memo(function Map() {
             closeOnClick: false,
             stopPropagation: false,
           }}
-          lnglat={[110.1938, 30.25] as number[]}
+          lnglat={[115, 30.25] as number[]}
         >
           <p onClick={popupClick}>122224</p>
         </Popup>
-        <Marker lnglat={[100.1938, 30.25] as number[]}>
-          <p onClick={popupClick}>tes</p>
+        <Marker lnglat={[100.1938, 27.25] as number[]}>
+          <div
+            style={{
+              border: '1px solid #fff',
+              background: '#FFF',
+              fontSize: '24px',
+            }}
+          >
+            <p onClick={markerClick}>tes</p>
+          </div>
         </Marker>
         <PolygonLayer
           key={'2'}
@@ -86,7 +101,7 @@ export default React.memo(function Map() {
           <LayerEvent
             type="click"
             handler={(e) => {
-              console.log(e);
+              console.log('LayerEvent', e);
             }}
           />
         </PolygonLayer>