diff --git a/packages/component/src/markerlayer.ts b/packages/component/src/markerlayer.ts
index 1740f4c1e3..2d4dae08cf 100644
--- a/packages/component/src/markerlayer.ts
+++ b/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;
diff --git a/packages/core/src/services/interaction/PickingService.ts b/packages/core/src/services/interaction/PickingService.ts
index 784bdbed66..a9eff49243 100644
--- a/packages/core/src/services/interaction/PickingService.ts
+++ b/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;
}
/**
diff --git a/packages/maps/src/amap2/map.ts b/packages/maps/src/amap2/map.ts
index ea854169c7..6d170c1e52 100644
--- a/packages/maps/src/amap2/map.ts
+++ b/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 {
diff --git a/stories/Map/components/amap2demo_clustermarker.tsx b/stories/Map/components/amap2demo_clustermarker.tsx
new file mode 100644
index 0000000000..ecfd412c98
--- /dev/null
+++ b/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,
+ }}
+ />
+ </>
+ );
+ }
+}
diff --git a/stories/Map/components/amap2demo_markerlayer.tsx b/stories/Map/components/amap2demo_markerlayer.tsx
index efac07e85b..4dcb9f2b41 100644
--- a/stories/Map/components/amap2demo_markerlayer.tsx
+++ b/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;
}
diff --git a/stories/Map/map.stories.tsx b/stories/Map/map.stories.tsx
index e4e34b1780..cd6ab411a0 100644
--- a/stories/Map/map.stories.tsx
+++ b/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 />)
diff --git a/stories/React/components/Scene.tsx b/stories/React/components/Scene.tsx
index 67886b0fa1..9ab625cffd 100644
--- a/stories/React/components/Scene.tsx
+++ b/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>