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

This commit is contained in:
2912401452 2021-06-08 17:39:01 +08:00
parent 2474707c29
commit 17a9b06470
7 changed files with 149 additions and 8 deletions

View File

@ -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;

View File

@ -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;
}
/**

View File

@ -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 {

View File

@ -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,
}}
/>
</>
);
}
}

View File

@ -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;
}

View File

@ -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 />)

View File

@ -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>