传单可编辑限制绘制到特定区域

Question

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

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

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

我无法在任何地方找到任何东西，似乎我错过了一些东西。

CODEPEN DEMO

请帮忙。

---

编辑：

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

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

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

Answer 1

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

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

According to API doc L.Editable 插件允许您通过map.editTools.options.vertexMarkerClass 覆盖一系列内容，包括VertexMarker 类。

固定密码笔：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 制定的解决方案基本相同——实际代码留给勤奋的读者作为练习。