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

Question

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

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

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

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

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

Answer 1

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

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

Я вижу два possibities:

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

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

Answer 2

Я сделал это без взлома Источника Листовки.

После того, как элементы управления добавлены к карте, я помещаю скрытый 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; 
} 

Answer 3

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

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

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

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

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

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