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 ( + <> +
+ + ); + } +} 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 点击下钻', () => ) .add('高德地图2.0 Marker图层', () => ) + .add('高德地图2.0 clusterMarker图层', () => ) .add('高德地图2.0 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 ( <>

122224

- -

tes

+ +
+

tes

+
{ - console.log(e); + console.log('LayerEvent', e); }} />