16

我需要在地图中选择多个标记。像这样的东西：谷歌地图中的方框/矩形绘制选择，但带有传单和 OSM。

我认为可以通过修改在 OSM 地图中单击并拖动时出现的缩放框来完成，但我不知道该怎么做。

编辑：我重写了 _onMouseUp 函数，正如L. Sanna建议的那样，最终得到了这样的结果：

_onMouseUp: function (e) {

    this._finish();

    var map = this._map,
    layerPoint = map.mouseEventToLayerPoint(e);

    if (this._startLayerPoint.equals(layerPoint)) { return; }

    var bounds = new L.LatLngBounds(
    map.layerPointToLatLng(this._startLayerPoint),
    map.layerPointToLatLng(layerPoint));

    var t=0;
    var selected = new Array();

    for (var i = 0; i < addressPoints.length; i++) {
        var a = addressPoints[i];
        pt = new L.LatLng(a[0], a[1]);

        if (bounds.contains(pt) == true) {
            selected[t] = a[2];
            t++;
        }
    }

    alert(selected.join('\n'))
},
4

4 回答 4

8

我认为修改 clic 并拖动 osm 地图时出现的缩放框可能很容易，但我不知道该怎么做

好主意。缩放框实际上是传单的功能。

这是代码。

只需重写 _onMouseUp 函数以满足您的需要。

于 2013-07-12T11:16:13.780 回答
7

你有没有尝试过这样的事情？

markers是一个数组L.latLng() coordinates

map.on("boxzoomend", function(e) {
  for (var i = 0; i < markers.length; i++) {
    if (e.boxZoomBounds.contains(markers[i])) {
      console.log(markers[i]);
    }
  }
});
于 2014-02-24T00:06:24.807 回答
2

没有足够的评论点，但为了覆盖他们编辑中发布的 _onMouseUp 函数（如 OP），传单教程给出了很好的解释。此外，这篇文章非常有帮助，并引导您完成每一步。

于 2019-01-10T19:07:43.930 回答
2

聚会有点晚了，但也可以使用可编辑的传单插件来实现这一点。

// start drawing a rectangle
 function startSelection() {
    const rect = new L.Draw.Rectangle(this.map);
    rect.enable();

   this.map.on('draw:created', (e) => {
    // the rectangle will not be added to the map unless you
    // explicitly add it as a layer
    // get the bounds of the rect and check if your points
    // are contained in it
   });
}

使用这种方法的好处

  1. 允许选择任何形状（多边形、圆形、路径等）
  2. 允许使用按钮/以编程方式进行选择（不需要按住 shift 键，某些用户可能不知道）。
  3. 不更改缩放框功能
于 2019-07-08T09:19:41.537 回答