4

在Leaflet.Editable我想限制/限制我的客户只能在特定区域/范围内绘制。

实际上我试图将它们限制在地图的 (90, -90, 180, -180) 范围内。

maxBounds: [[-90, -180], [90, 180]]

在此处输入图像描述 在此处输入图像描述 我无法在任何地方找到任何东西，似乎我错过了一些东西。

CODEPEN 演示

请帮忙。

编辑：

Y 轴正确阻挡，鼠标无法将形状拉伸到顶部和底部之外。

问题出在 X 轴上（如图所示）

至于现在，我在保存检查后解决了它，如果它超出地图边界（糟糕的用户体验），则清除形状。我需要一个鼠标限制，就像 y 轴一样。

4

1 回答 1

1

在不知道您的用例（为什么是整个世界地图？？）的情况下，最快和最简单的解决方法是简单地将地图设置为minZoom更高一点，例如，我发现这minZoom: 5已经足够了，除了地图既短又短的情况非常宽（在我见过的大多数应用程序中很少出现这种情况）。

但真正的解决方法是为拖动标记和形状编写自己的自定义覆盖。

根据 API 文档，L.Editable 插件允许您VertexMarker通过map.editTools.options.vertexMarkerClass.

修复了 codepen：http ://codepen.io/anon/pen/GrPpRY?editors=0010

这段代码允许您通过更正低于 -180 和超过 180 的值来限制拖动顶点标记的经度，如下所示：

// create custom vertex marker editor
var vertexMarkerClass = L.Editable.VertexMarker.extend({
  onDrag: function(e) {
    e.vertex = this;
    var iconPos = L.DomUtil.getPosition(this._icon),
      latlng = this._map.layerPointToLatLng(iconPos);

    // fix out of range vertex
    if (latlng.lng < -180) {
      e.latlng.lng = latlng.lng = -180;
      this.setLatLng(latlng);
    }
    if (latlng.lng > 180) {
      e.latlng.lng = latlng.lng = 180;
      this.setLatLng(latlng);
    }

    this.editor.onVertexMarkerDrag(e);

    this.latlng.update(latlng);
    this._latlng = this.latlng; // Push back to Leaflet our reference.
    this.editor.refresh();
    if (this.middleMarker) this.middleMarker.updateLatLng();
    var next = this.getNext();
    if (next && next.middleMarker) next.middleMarker.updateLatLng();
  }
});

// attach custom editor
map.editTools.options.vertexMarkerClass = vertexMarkerClass;

我没有为将形状作为一个整体（在本例中为矩形）进行拖动而编写代码。虽然VertexMarker修复应该解决所有类型的顶点拖动，但您需要覆盖每个形状的drag处理程序以正确约束边界。如果超出范围，请适当裁剪形状。正如所指出的，Leaflet 已经为纬度做到了这一点，但是因为 Leaflet 允许水平环绕地图，所以您遇到了基本问题。rec.on("drag")当它们越过您的最小/最大经度时使用纠正边界是解决它的唯一方法。vertexMarkerClass它基本上与我为- 为勤奋的读者准备的实际代码制定的解决方案相同。

于 2017-02-12T01:54:52.073 回答