javascript - 如何使用自己的html按钮进行传单控制？

Question

我在我正在处理的页面上使用传单和传单绘制。我想使用我自己的 map 外按钮，而不是 map 上的经典传单绘制控件。我找不到如何完成或什至可能的示例。我如何将 map 上按钮上通常出现的功能链接到我自己的 map 外 纽扣？

所以基本上我会在 map 下方(不在 map 上)有一个按钮，例如放大(我假设相同的方法也适用于传单绘制控件)。这感觉应该很容易，但就像我说的那样，我不知道怎么做。

Answer 1

正如您已经提到的，答案已经存在。唯一需要做的就是添加EventListeners 并创建相关函数。如果您想触发多段线绘制并分别取消它，这是一个示例:

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();

Demo