Как использовать собственную кнопку HTML для контроля листовки?

Question

Я использую листовки и листовки на странице, над которой я работаю.Я хочу использовать свои собственные кнопки вне карты вместо классических элементов управления рисованием листовок, которые находятся на карте.Я не могу найти пример того, как это делается или возможно ли это.Как связать функциональность, которая обычно есть на кнопках на карте, с моими собственными кнопками OFF-MAP ?

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

Answer 1

Как вы уже упоминали, ответ уже есть.Остается только добавить addEventListeners и создать соответствующие функции.Вот пример, если вы хотите запустить рисование ломаной линии и отменить ее соответственно:

html

<div id="map"></div>
<button id="drawPolyline">Draw</button>
<button id="cancelDraw">Cancel Draw</button>

js

// add an event listener to trigger polyline draw
document
  .getElementById("drawPolyline")
  .addEventListener("click", e => drawPolyline(e));

// add an event listener to cancel polyline draw
document
  .getElementById("cancelDraw")
  .addEventListener("click", e => cancelDraw(e));

// declare a global variable to store a reference
let polylineDrawHandler;

// store the polyline draw instantiation to a variable to be able 
// to disable it later
const drawPolyline = e => {
  polylineDrawHandler = new L.Draw.Polyline(map, drawControl.options.polyline);
  polylineDrawHandler.enable();
};

const cancelDraw = e => polylineDrawHandler.disable();

Демо

Answer 2

JS Fiddle для случайного масштабирования!

Код присоединяет обработчик щелчков для вызова метода для карты:

document.querySelector("#zoom").onclick = function() {
    map.setZoom(Math.ceil(18*Math.random()));
}

Из документации , есть много функций, которые могут изменять состояние карты.Надеюсь, это поможет!