Можно ли установить ограничения по размеру и количеству в Leaflet.Draw?

Этот вопрос адресован пользователям Leaflet (и тем, кто использует плагин Leaflet.draw)...

Я использую Leaflet и хочу, чтобы мой пользователь мог рисовать 1 — и только 1 — полигон над любой областью карты. Я также хотел бы каким-то образом ограничить размер этого многоугольника (например, ограничить длину стороны квадрата или площадь, покрываемую им, предпочтительно указанную в градусах, чтобы установленные ограничения размера переводились независимо от масштаба). уровень).

Моя конечная цель - просто извлечь координаты 4 квадратных вершин или координаты, охватываемые областью многоугольника.

Тем не менее, я нашел плагин Leaflet.Draw. Это фантастика, однако мне нужно ограничить его функциональность моими требованиями (одновременно рисуется только 1 полигон и, в частности, размер не может быть слишком большим). Возможно ли это сделать? Если да, то как?

Независимо от того, возможно это или нет, есть ли лучший способ сделать это?


javascript plugins leaflet leaflet.draw
person whistler    schedule 10.07.2013    source источник
comment
Не могли бы вы более четко описать свою конечную цель?   -  person L. Sanna    schedule 10.07.2013
comment
@LSA - Конечно, в основном нужно изменить Leaflet.draw, чтобы ограничить количество полигонов, рисуемых на карте, до 1. А также необходимо ограничить размер этого полигона. Если есть альтернативный способ сделать это без использования leaflet.draw, я готов использовать и этот метод.   -  person whistler    schedule 10.07.2013
comment
ты решил это? ты сделал что-нибудь? если да, не могли бы вы опубликовать свое решение   -  person user902383    schedule 15.04.2015

Ответы (3)


arrow_upward
5
arrow_downward

Могу ли я предложить другое решение этой проблемы?

Я бы ограничил количество полигонов одним, выполнив следующие действия:

 map.on('draw:created', function (e) {
    var layer = e.layer;
    if(drawnItems && drawnItems.getLayers().length!==0){
      drawnItems.clearLayers();
    }           
    drawnItems.addLayer(layer);     
 });

Я слушаю событие draw:created и определяю, есть ли уже маркер. Если есть, я удаляю этот маркер и помещаю новый в нужное место. Таким образом, для пользователя на один клик меньше, так как ему больше не нужно удалять предыдущее правило, и всегда применяется одно правило маркера.

Если вы хотите разрешить более одного маркера, вы можете выполнить удаление FIFO самого старого слоя.

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

person Andrew Flatt    schedule 20.10.2014

arrow_upward
0
arrow_downward

Тем не менее, я нашел плагин Leaflet.Draw. Это фантастика, однако мне нужно ограничить его функциональность моими требованиями (одновременно рисуется только 1 полигон и, в частности, размер не может быть слишком большим). Возможно ли это сделать? Если да, то как?

Я думаю, вам нужно будет кодировать его самостоятельно.

Я вижу две возможности:

  1. взлом плагина отрисовки (написание собственного кода внутри плагина)
  2. расширение класса L.Draw.Polygon из подключаемого модуля рисования (см. документы об ООП в Leaflet) создать костюм

1 быстрее, 2 чище. Вам придется выбирать в зависимости от размера вашего проекта.

person L. Sanna    schedule 11.07.2013

arrow_upward
0
arrow_downward

Я сделал это, не взламывая исходный код Leaflet Draw.

После добавления элементов управления на карту я помещаю скрытый div внутрь элементов управления. Затем, когда создается многоугольник, я отображаю этот div. Я использовал CSS, чтобы абсолютно расположить его над элементами управления, чтобы кнопки были «отключены», и CSS, чтобы кнопки выглядели блеклыми. Если полигон удален, я скрываю этот div.

Не лучшее решение, но я работаю без редактирования исходного кода.

После добавления drawControl я добавляю скрытый div:

$('.leaflet-draw-section:first').append('<div class="leaflet-draw-inner-toolbar" title="Polygon already added"></div>');

Вот JS для их переключения:

map.on('draw:created', function (e) {
    var type = e.layerType,
        layer = e.layer;

    // keep the polygon on the map
    drawnItems.addLayer(layer);

    // disable the create polygon tools
    $('.leaflet-draw-inner-toolbar').show();
});

map.on('draw:deleted', function(e) {
    // enable the create polygon tools
    $('.leaflet-draw-inner-toolbar').hide();
});

Вот CSS:

.leaflet-draw-inner-toolbar {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6);
    bottom: 0;
    display: none;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
person jdubwelch    schedule 08.11.2013