Leaflet.draw mapping: Как запустить функцию рисования без панели инструментов?

Question

Для тех, у кого есть опыт работы с плакатом или плакатом leaflet.draw:

Я хочу инициировать рисование многоугольника без использования панели инструментов от leaflet.draw. Мне удалось найти свойство, которое позволяет редактировать без использования панели инструментов (layer.editing.enable();) путем поиска в Интернете (это не в основной документации). Кажется, я не могу найти, как начать рисовать многоугольник без кнопки панели инструментов. Любая помощь приветствуется!

Спасибо :)

Answer 1

Этот простой код работает для меня:

new L.Draw.Polyline(map, drawControl.options.polyline).enable(); 

Просто поместите его в OnClick обработчик пользовательской кнопки (или там, где вы хотите).

Переменные map и drawControl являются ссылками на вашу карточку с лифтом и нарисовать контроль.

Дайвинг в исходный код (leaflet.draw-src.js) вы можете найти функции для рисования других элементов и их редактирования или удаления.

new L.Draw.Polygon(map, drawControl.options.polygon).enable() 
new L.Draw.Rectangle(map, drawControl.options.rectangle).enable() 
new L.Draw.Circle(map, drawControl.options.circle).enable() 
new L.Draw.Marker(map, drawControl.options.marker).enable() 

new L.EditToolbar.Edit(map, { 
       featureGroup: drawControl.options.featureGroup, 
       selectedPathOptions: drawControl.options.edit.selectedPathOptions 
      }) 
new L.EditToolbar.Delete(map, { 
       featureGroup: drawControl.options.featureGroup 
      }) 

Надеюсь, это будет полезно и вам.

EDIT: В L.EditToolbar.Edit и L.EditToolbar.Delete классы разоблачить следующие полезные методы:

• включить(): чтобы начать редактировать/удалять режима
• Disable(): для возврата в стандартный режим
• сохранить(): для сохранения изменений (он стреляет ничьей: отредактировал/отрисовал: удаленные события)
• revertLayers(): для отмены изменений

Answer 2

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

// Creates the circle on the map for the given latLng and Radius 
// If the createdWithAddress flag is true, the circle will not update 
// it's address according to its position. 
createCircle: function(latLng, radius, createdWithAddress) { 
if (!this.circle) { 
    var self = this, 
     centerIcon, 
     centerMarker; 

    centerIcon = new L.Icon({ 
    iconUrl: '/assets/location_pin_24px.png', 
    iconSize: [24, 24], 
    iconAnchor: [12, 24], 
    shadowUrl: '/assets/marker-shadow.png', 
    shadowSize: [20, 20], 
    shadowAnchor:[6, 20] 
    }) 

    // Setup the options for the circle -> Override icons, immediately editable 
    options = { 
    stroke: true, 
    color: '#333333', 
    opacity: 1.0, 
    weight: 4, 
    fillColor: '#FFFFFF', 
    moveIcon: centerIcon, 
    resizeIcon: new L.Icon({ 
     iconUrl: '/assets/radius_handle_18px.png', 
     iconSize: [12, 12], 
     iconAnchor: [0,0] 
    }) 
    } 

    if (someConfigVarYouDontNeedToKnow) { 
    options.editable = false 
    centerMarker = new L.Marker(latLng, { icon:centerIcon }) 
    } else { 
    options.editable = true 
    } 

    // Create our location circle 
    // NOTE: I believe I had to modify Leaflet or Leaflet.draw to allow for passing in 
    // options, but you can make it editable with circle.editing.enable() 
    this.circle = L.circle([latLng.lat, latLng.lng], radius, options) 

    // Add event handlers to update the location 
    this.circle.on('add', function() { 
    if (!createdWithAddress) { 
     self.reverseGeocode(this.getLatLng()) 
    } 
    self.updateCircleLocation(this.getLatLng(), this.getRadius()) 
    self.updateMapView() 
    })    
    this.circle.on('edit', function() { 
    if (self.convertLatLngToString(this.getLatLng()) !== self.getLocationLatLng()) { 
     self.reverseGeocode(this.getLatLng()) 
    } 
    self.updateCircleLocation(this.getLatLng(), this.getRadius()) 
    self.updateMapView() 
    }) 

    this.map.addLayer(this.circle) 
    if (centerMarker) { 
    centerMarker.addTo(this.map) 
    this.circle.redraw() 
    centerMarker.update() 
    } 
} 
}, 

Извините, что это всего лишь шум, но он должен дать вам представление о том, как это сделать. Вы можете управлять редактированием, как вы сказали с помощью edit.enable() /. Disable().

Не забудьте комментировать какие-либо вопросы. Удачи чувак.

Answer 3

Я думаю, что стоит упомянуть Jacob Toyes answer. Вы всегда рисуете с помощью обработчиков в leaflet.draw - не напрямую со слоями. Если вы хотите отредактировать слой, вы используете обработчик, сохраненный в слое editing, например: layer.editing.enable();. И если вы хотите, чтобы создать новый слой, сначала необходимо создать новый обработчик:

// Define you draw handler somewhere where you click handler can access it. N.B. pass any draw options into the handler 
var polygonDrawer = new L.Draw.Polyline(map); 

// Assumming you have a Leaflet map accessible 
map.on('draw:created', function (e) { 
    var type = e.layerType, 
     layer = e.layer; 

    // Do whatever you want with the layer. 
    // e.type will be the type of layer that has been draw (polyline, marker, polygon, rectangle, circle) 
    // E.g. add it to the map 
    layer.addTo(map); 
}); 

// Click handler for you button to start drawing polygons 
$('#draw_poly').click(function() { 
    polygonDrawer.enable(); 
}); 

В настоящее время существует на самом деле пример на leaflet.draw GitHub страницы: https://github.com/Leaflet/Leaflet.draw/blob/master/examples/edithandlers.html

Тем не менее, я думаю, обработчики пока еще не документированы.

Как уже говорилось выше, L.EditToolbar.Edit и L.EditToolbar.Delete разоблачить интересные методы и события, как editstart и editstop. Что не упомянуто, так это то, что эти два класса являются производными от L.Handler.