Множественный выбор маркера в поле в брошюре

Мне нужно выбрать несколько маркеров на карте. Примерно так: выделение прямоугольника/прямоугольника в Картах Google, но с Leaflet и OSM.

Я думаю, что это можно сделать, изменив поле масштабирования, которое появляется, когда вы перемещаете щелчок и перетаскиваете карту OSM, но я не знаю, как это сделать.

Редактировать: я переписал функцию _onMouseUp, как предложил Л. Санна, и в итоге получил что-то вроде этого:

_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'))
},

Ответы

Ответ 1

Я думаю, что было бы легко модифицировать поле зума, которое появляется, когда вы перемещаете click и перетаскиваете карту osm, но я не знаю, как это сделать

Отличная идея. Коробка зума на самом деле является функциональностью листовки.

Вот код

Просто перепишите функцию _onMouseUp, чтобы она соответствовала вашим потребностям.

Ответ 2

Вы пробовали что-то вроде этого?

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]);
    }
  }
});

Ответ 3

Недостаточно точек, чтобы комментировать, но для того, чтобы переопределить функцию _onMouseUp, такую как OP, опубликованная в их редактировании, урок-брошюра дает хорошее объяснение. Кроме того, этот пост был очень полезным и поможет вам пройти через каждый шаг.

Ответ 4

Немного опоздал на вечеринку, но этого также можно добиться, используя плагин, который можно редактировать.

// 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. Не меняет функциональность зум-бокса