問題描述

有沒有辦法使用 Leaflet 繪圖插件以編程方式添加多邊形?https://github.com/Leaflet/Leaflet.draw

Is there a way to add a polygon programmatically using the Leaflet draw plugin? https://github.com/Leaflet/Leaflet.draw

例如:點擊一個按鈕，添加一個可以被插件編輯的方塊.

For example: click a button and add a square that can be edited by the plugin.

推薦答案

您只需將多邊形(或任何其他您希望可編輯的圖層)添加到您傳遞給 edit.featureGroup 您的 L.Control.Draw 控件.

You just need to add your polygon (or whatever other layer that you want to be editable) to the Feature Group that you pass to the edit.featureGroup option of your L.Control.Draw control.

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.
});

稍后可以通過單擊編輯圖層"按鈕來編輯該功能組中的所有內容(如果啟用了該功能).

Everything that is in that Feature Group can later be edited by clicking on the "Edit layers" button (if that functionality is enabled).

現場演示:

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 >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"  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>

這篇關于在 Leaflet L.Draw 插件中以編程方式添加多邊形的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！