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

Question

在Leaflet.Editable中，我想限制/限制我的客户只能在特定区域/边界进行绘制。

实际上我试图将它们限制为（90，-90,180，-180）地图边界..

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

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

CODEPEN DEMO

请帮忙。

编辑：

Y轴正确阻挡，鼠标无法伸展超出顶部和底部的形状。

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

至于现在我在保存检查后解决了它，如果超出地图范围（BAD USER EXPERIENCE），则清除形状。我需要像y轴那样的鼠标限制。

Answer 1

不知道你的用例（为什么是整个世界地图？）最简单，最简单的解决方法是简单地将地图minZoom设置得更高一些，例如，我发现{ {1}}已足够，除非地图非常简短且非常宽（在我见过的大多数应用中都很少见。）

但真正的修复包括编写自己的自定义覆盖来拖动标记和形状。

According to API doc L.Editable插件允许您通过minZoom: 5覆盖包括VertexMarker类在内的大量内容。

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

这段代码允许您通过更正-180和180以下的值来约束拖动顶点标记的经度，这是：

map.editTools.options.vertexMarkerClass

我没有将整个形状拖动的代码（在这种情况下是矩形）。虽然// 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处理程序以正确约束边界。如果超出界限，请适当裁剪形状。正如所指出的，Leaflet已经为纬度做了这个，但是因为Leaflet允许水平地包裹地图你有你的本质问题。使用drag在超过最小/最大经度时纠正边界是解决它的唯一方法。它基本上与我为rec.on("drag")所规定的解决方案相同 - 实际代码留给了勤奋的读者。