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

Question

我正在使用 React 和 React-Leaflet 生成给定数据点及其 Lat/Long 坐标的 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>

有没有办法配置地图，以便它可以确定用户何时尝试，例如，将点击移动到 select 多个点，然后传递 selected 点作为一个数组？或者，更好的是，我如何使地图具有交互性，以便用户可以拖放自定义区域（例如绘制正方形或圆形）和 select 该区域内的所有渲染点？

我正计划将这个 selected 数据数组传递给另一个将绘制它的组件。

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

Answer 1

您可以尝试 leaflet-draw in order to get the selection tool that you want. With leaflet-draw you can draw polygons, circles, rectangles, etc and get the bounds of the figure you've drawn. There's also a library called point-in-polygon，它可以 return 边界参数内的坐标。

TLDR:

使用 Leaflet Draw 绘制多边形并获取绘制图形的边界。
使用 Point-in-polygon 过滤 {latitude, longitude} 在边界内的标记。

Answer 2

已经快 3 年过去了，但这是我按下 shift 键和 select标记区域的解决方案，也许对某些人有用

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 可以在用户按下 shift 并开始将鼠标移动到 select 区域时找到 start position

onmousedown returns 事件 latlng 属性 - 开始位置：

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

onmouseup 也 returns 事件 latlng 属性 - 结束位置：

const onMouseUp = useCallback((e: LeafletMouseEvent) => {
  if (e.originalEvent.shiftKey && startPoint) {
    const bounds = new L.LatLngBounds(startPoint, e.latlng); // creates a class which will help to identify if an element is within the selection boundaries
    const selectedIds: string[] = [];

    for (let i = 0; i < orders?.length; i++) {
      const { geometry: { coordinates } } = orders[i];
      const point = new L.LatLng(coordinates[0], coordinates[1]);
      bounds.contains(point) && selectedIds.push(orders[i].properties.entry);
    }
    onSelectOrder(selectedIds);
    setStartPoint(null);
  }
}, [onSelectOrder, orders, startPoint]);

它非常适合我的目的select 地图上的多个订单

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

React Leaflet: How to have Multiselect on Map

javascript

multi-select

leaflet

reactjs

react-leaflet