📜  L.Control.Draw 不是构造函数 (1)

📅  最后修改于: 2023-12-03 15:17:11.370000             🧑  作者: Mango

L.Control.Draw 不是构造函数

L.Control.Draw 是一个Leaflet插件,用于添加各种绘制交互功能,例如绘制点、线、多边形、矩形和圆形等。但同时也要注意到 L.Control.Draw 并不是一个构造函数,不能直接通过 new 关键字来创建实例。

相反,L.Control.Draw 是一个Leaflet控件,需要将其添加到地图上才能使用。具体步骤如下:

  1. 导入 leaflet.draw.cssleaflet.draw.js 文件。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
  1. 创建一个 L.Map 对象,并将其添加到指定的DOM元素上:
var map = L.map('map', {
  center: [51.505, -0.09],
  zoom: 13
});
  1. 创建 L.Control.Draw 对象,并将其添加到地图中:
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

var drawControl = new L.Control.Draw({
  draw: {
    polyline: true,
    polygon: true,
    circle: true,
    rectangle: true,
    marker: true
  },
  edit: {
    featureGroup: drawnItems,
    edit: true,
    remove: true
  }
});

map.addControl(drawControl);
  1. drawnItems 图层组中添加绘制对象:
map.on('draw:created', function (e) {
  var type = e.layerType;
  var layer = e.layer;

  if (type === 'marker') {
    layer.bindPopup('A popup!');
  }

  drawnItems.addLayer(layer);
});

以上代码将添加一个 L.Control.Draw 控件,并在添加绘制对象时将其添加到名为 drawnItemsL.FeatureGroup 图层组中。

总之,L.Control.Draw 不是一个构造函数,它是一个Leaflet控件,需要按照上述步骤添加到地图上才能使用。