是否可以在 Leaflet.Draw 中设置大小和数量限制？答案

【问题标题】：Is it possible to place size and number limitations in Leaflet.Draw?是否可以在 Leaflet.Draw 中设置大小和数量限制？
【发布时间】：2025-12-22 23:00:10
【问题描述】：

此问题针对 Leaflet 用户（以及使用 Leaflet.draw 插件的用户）...

我正在使用 Leaflet，并希望允许我的用户在地图的任何区域上绘制 1 个 - 并且只有 1 个 - 单个多边形。我还想以某种方式限制该多边形的大小（例如限制正方形的边长或其覆盖的区域 - 最好以度数指定，以便无论缩放如何，设置的大小限制都会转换等级）。

我的最终目标只是提取4个正方形顶点的坐标或多边形区域所覆盖的坐标。

也就是说，我找到了 Leaflet.Draw 插件。太棒了，但是，我需要将其功能限制为我的要求（一次只绘制 1 个多边形，特别是不能绘制太大的尺寸）。这可能吗？如果是这样，怎么做？

无论是否可能，有没有更好的方法来做到这一点？

【问题讨论】：

您能否更清楚地描述您的最终目标？
@LSA - 当然，基本上，需要修改 Leaflet.draw 以将地图上绘制的多边形数量限制为 1。并且，还需要限制该多边形的大小。如果有不使用 Leaflet.draw 的替代方法，我也愿意使用该方法。
你解决了吗？你做过什么吗？如果是的话，你能发布你的解决方案吗

标签： javascript plugins leaflet leaflet.draw

【解决方案1】：

我可以为这个问题提出另一个解决方案吗？

我会通过执行以下操作将多边形的数量限制为一个：

 map.on('draw:created', function (e) {
    var layer = e.layer;
    if(drawnItems && drawnItems.getLayers().length!==0){
      drawnItems.clearLayers();
    }           
    drawnItems.addLayer(layer);     
 });

我正在监听 draw:created 事件并确定是否已经存在标记。如果有，我删除那个标记并将我的新标记放在所需的位置。因此，用户不再需要删除之前的一次点击，并且始终强制执行一个标记规则。

如果您想允许多个标记，您可以对最旧的层进行 FIFO 删除。

如果您不想自动删除图层，您可以提示用户或忽略该请求。

【讨论】：

【解决方案2】：

也就是说，我找到了 Leaflet.Draw 插件。太棒了，但是，我需要将其功能限制为我的要求（一次只绘制 1 个多边形，特别是不能绘制太大的尺寸）。这可能吗？如果有，怎么做？

我认为您需要自己编写代码。

我看到了两种可能性：

破解绘图插件（在插件中编写您自己的代码）
从绘图插件扩展 L.Draw.Polygon 类（参见 docs 关于 Leaflet 中的 OOP）以创建一个服装

1 更快，2 更干净。您必须根据项目的大小进行选择。

【讨论】：

【解决方案3】：

我没有破解 Leaflet Draw 源代码就做到了。

将控件添加到地图后，我在控件内放置了一个隐藏的 div。然后，当创建一个多边形时，我会显示该 div。我使用 CSS 将其绝对定位在控件上，以便按钮“禁用”，并使用 CSS 使按钮看起来褪色。如果多边形被删除，那么我隐藏那个 div。

不是最好的解决方案，但我无需编辑源代码即可工作。

添加drawControl后，我添加了隐藏的div：

$('.leaflet-draw-section:first').append('<div class="leaflet-draw-inner-toolbar" title="Polygon already added"></div>');

这是切换它们的 JS：

map.on('draw:created', function (e) {
    var type = e.layerType,
        layer = e.layer;

    // keep the polygon on the map
    drawnItems.addLayer(layer);

    // disable the create polygon tools
    $('.leaflet-draw-inner-toolbar').show();
});

map.on('draw:deleted', function(e) {
    // enable the create polygon tools
    $('.leaflet-draw-inner-toolbar').hide();
});

这是 CSS：

.leaflet-draw-inner-toolbar {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6);
    bottom: 0;
    display: none;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

【讨论】：