javascript - react 传单 : How to have Multiselect on Map

Question

我正在使用 React 和 React-Leaflet 生成给定数据点及其 Lat/Long 坐标的 circleMarkers map 。我在渲染数据 map 时没有任何问题，如果用户在侧边栏上按过滤器类型进行过滤，我什至能够更改呈现的数据。

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

当用户点击标记时，我会在 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>

有没有办法配置 map ，以便它可以确定用户何时尝试，例如，通过 shift 单击以选择多个点，然后将选定的点作为数组传递？或者，更好的是，我如何使 map 具有交互性，以便用户可以拖放自定义区域(如绘制正方形或圆形)并选择该区域内的所有渲染点？

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

如有任何关于在何处查找此内容的建议，我们将不胜感激。

Answer 1

已经快 3 年过去了，但这是我按下 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 可以找到用户按下 shift 并开始移动鼠标选择区域时的开始位置

onmousedown 返回带有 latlng 属性的事件 - 开始位置:

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

onmouseup 还返回一个带有 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]);

在 map 上选择多个订单对我来说效果很好