在 Leaflet L.Draw 插件中以编程方式添加多边形答案

【问题标题】：Add Polygon programmatically in Leaflet L.Draw plugin在 Leaflet L.Draw 插件中以编程方式添加多边形
【发布时间】：2017-10-17 14:47:19
【问题描述】：

有没有办法使用 Leaflet 绘图插件以编程方式添加多边形？ https://github.com/Leaflet/Leaflet.draw

例如：点击一个按钮，添加一个可以被插件编辑的方块。

【问题讨论】：

标签： javascript leaflet

【解决方案1】：

您只需将多边形（或您希望可编辑的任何其他图层）添加到您传递给 L.Control.Draw 控件的 edit.featureGroup 选项的要素组。

var editableLayers = L.featureGroup().addTo(map);
var drawControl = new L.Control.Draw({
  edit: {
    featureGroup: editableLayers
  }
});

// Add a new editable rectangle when clicking on the button.
button.addEventListener('click', function (event) {
  event.preventDefault();

  L.rectangle([
    getRandomLatLng(),
    getRandomLatLng()
  ]).addTo(editableLayers); // Add to editableLayers instead of directly to map.
});

稍后可以通过单击“编辑图层”按钮来编辑该功能组中的所有内容（如果启用了该功能）。

现场演示：

var map = L.map('map').setView([48.86, 2.35], 11);

var editableLayers = L.featureGroup().addTo(map);
var drawControl = new L.Control.Draw({
  edit: {
    featureGroup: editableLayers
  },
  draw: false
}).addTo(map);

// Add a new editable rectangle when clicking on the button.
button.addEventListener('click', function(event) {
  event.preventDefault();

  L.rectangle([
    getRandomLatLng(),
    getRandomLatLng()
  ]).addTo(editableLayers); // Add to editableLayers instead of directly to map.
});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

function getRandomLatLng() {
  return [
    48.8 + 0.1 * Math.random(),
    2.25 + 0.2 * Math.random()
  ];
}

html,
body,
#map {
  height: 100%;
  margin: 0;
}

#button {
  z-index: 1050;
  position: absolute;
  top: 10px;
  left: 50px;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet-src.js" integrity="sha512-+ZaXMZ7sjFMiCigvm8WjllFy6g3aou3+GZngAtugLzrmPFKFK7yjSri0XnElvCTu/PrifAYQuxZTybAEkA8VOA==" crossorigin=""></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.2/dist/leaflet.draw.
css" />
<script src="https://unpkg.com/leaflet-draw@1.0.2/dist/leaflet.draw-src.js"></script>

<div id="map"></div>

<button id="button">Add editable rectangle</button>

【讨论】：