React Leaflet：如何在地图上进行多选

Question

我正在使用 React 和 React-Leaflet 生成给定数据点及其纬度/经度坐标的circleMarkers 地图。我在渲染数据地图时没有任何问题，甚至可以在用户按侧边栏上的过滤器类型进行过滤时更改渲染的数据。

<Map center={[this.props.data[0].Latitude, this.props.data[0].Longitude]} zoom={12}>
    <TileLayer
      attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />

    /* code for rendering circleMarkers goes here */

</Map>

当用户单击标记时，我会得到它，因此地图上会出现一个弹出窗口，其中包含有关相应点的一些数据简介。

<CircleMarker center={[entry.Latitude, entry.Longitude]} color={this.determineMarkerColor(entry)} radius={this.computeMarkerSize(entry)}>
          <Popup>
              <span>Radius is for: {this.props.filterType} </span>
          </Popup>
</CircleMarker>

有没有办法配置地图，以便它可以弄清楚用户何时尝试，例如，按住 Shift 单击以选择多个点，然后将所选点作为数组传递？或者，更好的是，如何使地图具有交互性，以便用户可以拖放自定义区域（例如绘制正方形或圆形）并选择该区域内的所有渲染点？

我计划将这组选定数据传递给另一个将其绘制成图表的组件。

任何关于在哪里寻找这个的建议将不胜感激。

Answer 1

已经过去了快三年了，但这是我的解决方案，按 Shift 键并选择标记区域，也许对某人有用

Map有onmousedown&onmouseup方法

<Map
  ref={saveMap}
  onmousedown={onMouseDown} // set start position in state
  onmouseup={onMouseUp} // end position and logic to select markers
  className="leaflet-container"
  center={position}
  zoom={viewport.zoom}
>

可以onmousedown找到start position用户按下 Shift 并开始移动鼠标选择区域的时间

onmousedown返回具有属性的事件latlng- 起始位置：

<Map
  ref={saveMap}
  onmousedown={onMouseDown} // set start position in state
  onmouseup={onMouseUp} // end position and logic to select markers
  className="leaflet-container"
  center={position}
  zoom={viewport.zoom}
>

onmouseup还返回一个具有latlng属性 - 结束位置的事件：

const onMouseDown = useCallback((e: LeafletMouseEvent) => {
  if (e.originalEvent.shiftKey) { // check if the shift key been pressed
    setStartPoint(e.latlng);
  }
}, []);

它非常适合我在地图上选择多个订单的目的