Question

我在传单地图旁边显示了一个位置列表。该地图显示列表上的所有位置。当我放大地图时，地图上的可见位置会减少（如预期）。现在，我想过滤列表以仅显示那些在地图上可见的位置。有人可以帮助我实现这一目标吗？我正在使用react-leaflet和openstreet映射。

是的，请参见下面的代码。

<Map center={mapCenter}
 zoom={5} maxZoom={OpportunityMap.LEAFLET_MAX_ZOOM} minZoom={2} zoomControl={true} ref={el => this.map = el} onZoomEnd={this.handleZoomStart(this.map)} >
handleZoomStart(map) {
        if(map) {
            let bounds = map.leafletElement.getBounds();
            map.leafletElement.eachLayer(function(layer){
                if(bounds.contains(layer.getBounds()))
                //here 
 }); 
 } 
}

我遇到错误

“未捕获的TypeError：无法读取未定义的属性” lat”

因为未为“ layer.getBounds（）”定义纬度和经度。

Answer 1

也许有另一种方式可以做到这一点，但是我会这样。

执行任何缩放操作后，我将运行函数map.getBounds();（您可以在ComponentDidUpdate（）函数中执行此操作），并检查列出的位置是否在此范围内。然后，我可以轻松地更新我的位置列表。

Answer 2

getBounds()仅对某些种类的层有效。在您的地图上发布小提琴或Codepen，我可以看看。

react-leaflet：当缩放级别更改时，查找地图上显示的数据

2 个答案: