mirror of https://gitee.com/antv-l7/antv-l7
feat: markers 添加容器、修复聚合失效、事件透传、markerlayer 增加 hide/show 事件
This commit is contained in:
parent
2474707c29
commit
17a9b06470
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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 />)
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue