2

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

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

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

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

不管它是否可能，有没有更好的方法来做到这一点？

4

3 回答 3

5

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

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

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

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

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

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

于 2014-10-20T14:42:37.810 回答
0

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

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

我看到两种可能性：

  1. 破解绘图插件（在插件中编写自己的代码）
  2. 从绘图插件扩展 L.Draw.Polygon 类（请参阅 Leaflet 中有关 OOP 的文档）以创建服装

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

于 2013-07-11T07:20:01.713 回答
0

我没有破解 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;
}
于 2013-11-08T20:52:57.977 回答