mirror of https://gitee.com/antv-l7/antv-l7
fix MarkerLayer addMarker not update (#1058)
* feat: 修复 maskerLayer 在调用 addMarker 后没有更新的情况(cluster) * style: lint style
This commit is contained in:
parent
a22a15b744
commit
0de9378188
|
@ -87,6 +87,14 @@ export default class MarkerLayer extends EventEmitter {
|
|||
const cluster = this.markerLayerOption.cluster;
|
||||
if (cluster) {
|
||||
this.addPoint(marker, this.markers.length);
|
||||
if (this.mapsService) {
|
||||
// 在新增 marker 的时候需要更新聚合信息(哪怕此时的 zoom 没有发生变化)
|
||||
const zoom = this.mapsService.getZoom();
|
||||
const bbox = this.mapsService.getBounds();
|
||||
this.bbox = padBounds(bbox, 0.5);
|
||||
this.zoom = Math.floor(zoom);
|
||||
this.getClusterMarker(this.bbox, this.zoom);
|
||||
}
|
||||
}
|
||||
this.markers.push(marker);
|
||||
}
|
||||
|
@ -165,6 +173,10 @@ export default class MarkerLayer extends EventEmitter {
|
|||
},
|
||||
};
|
||||
this.points.push(feature);
|
||||
if (this.clusterIndex) {
|
||||
// 在新增点的时候需要更新 cluster 的数据
|
||||
this.clusterIndex.load(this.points);
|
||||
}
|
||||
}
|
||||
|
||||
private initCluster() {
|
||||
|
@ -243,6 +255,9 @@ export default class MarkerLayer extends EventEmitter {
|
|||
}
|
||||
|
||||
private update() {
|
||||
if (!this.mapsService) {
|
||||
return;
|
||||
}
|
||||
const zoom = this.mapsService.getZoom();
|
||||
const bbox = this.mapsService.getBounds();
|
||||
if (
|
||||
|
|
|
@ -52,34 +52,42 @@ export default class Amap2demo extends React.Component {
|
|||
|
||||
function addMarkers() {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json',
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((nodes) => {
|
||||
const markerLayer = new MarkerLayer();
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
if (nodes[i].g !== '1' || nodes[i].v === '') {
|
||||
continue;
|
||||
}
|
||||
const el = document.createElement('label');
|
||||
el.className = 'labelclass';
|
||||
el.textContent = nodes[i].v + '℃';
|
||||
el.style.background = '#ff0';
|
||||
el.style.borderColor = '#f00';
|
||||
|
||||
const popup = new Popup({
|
||||
offsets: [0, 20],
|
||||
}).setText('hello');
|
||||
|
||||
const marker = new Marker({
|
||||
element: el,
|
||||
})
|
||||
.setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y })
|
||||
.setPopup(popup);
|
||||
|
||||
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);
|
||||
// 模拟第二次查询(8条数据,坐标点是兰州)
|
||||
// 注意看地图上兰州的位置,原本是3,放大后会变成11
|
||||
const data = [
|
||||
{ coordinates: [103.823305441, 36.064225525] },
|
||||
{ coordinates: [103.823305441, 36.064225525] },
|
||||
{ coordinates: [103.823305441, 36.064225525] },
|
||||
{ coordinates: [103.823305441, 36.064225525] },
|
||||
{ coordinates: [103.823305441, 36.064225525] },
|
||||
{ coordinates: [103.823305441, 36.064225525] },
|
||||
{ coordinates: [103.823305441, 36.064225525] },
|
||||
{ coordinates: [103.823305441, 36.064225525] },
|
||||
];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const { coordinates } = data[i];
|
||||
const marker = new Marker().setLnglat({
|
||||
lng: coordinates[0],
|
||||
lat: coordinates[1],
|
||||
});
|
||||
markerLayer.addMarker(marker);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue