在Leaflet L.Draw插件中以编程方式添加多边形 [英] Add Polygon programmatically in Leaflet L.Draw plugin

问题描述

是否可以使用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.

推荐答案

您只需要将多边形(或其他任何要编辑的其他图层)添加到传递给

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

这篇关于在Leaflet L.Draw插件中以编程方式添加多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！