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

Question

在Leaflet.Editable我想confine/limit我的客户只在特定的area/bounds画画。

实际上我试图将它们限制在地图的 (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 插件允许你覆盖一堆东西，包括 VertexMarker class，通过 map.editTools.options.vertexMarkerClass.

固定代码笔：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 允许水平环绕地图，所以你有你的基本问题。当它们越过您的 min/max 经度时，使用 rec.on("drag") 更正边界是解决该问题的唯一方法。它基本上与我为 vertexMarkerClass 制定的解决方案相同 - 实际代码留作勤奋 reader.

的练习

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

leaflet editable restrict draw to a specific area

leaflet

leaflet.draw