有没有办法让zoom事件处理程序与Leaflet Draw工具栏一起工作？

Question

这里是zoom事件处理程序的代码，它可以成功地与LeafletJS一起工作(https:/jsfiddle.netbmyL6hr3):

rectangleOnEdit = rectangleLayer.on('edit', function(e) {
  aoiBound.aoiNorth = '' + e.target._latlngs[0][1].lat.toFixed(4);
  aoiBound.aoiWest = '' + e.target._latlngs[0][1].lng.toFixed(4);
  aoiBound.aoiSouth = '' + e.target._latlngs[0][3].lat.toFixed(4);
  aoiBound.aoiEast = '' + e.target._latlngs[0][3].lng.toFixed(4);

  bounds = rectangleLayer.getLatLngs();
  bounds[0][1].lat = Number(aoiBound.aoiNorth);
  bounds[0][2].lat = Number(aoiBound.aoiNorth);
  bounds[0][2].lng = Number(aoiBound.aoiWest);
  bounds[0][3].lng = Number(aoiBound.aoiWest);
  bounds[0][0].lat = Number(aoiBound.aoiSouth);
  bounds[0][3].lat = Number(aoiBound.aoiSouth);
  bounds[0][0].lng = Number(aoiBound.aoiEast);
  bounds[0][1].lng = Number(aoiBound.aoiEast);
  rectangleLayer.setLatLngs(bounds);
  mymap.fitBounds(rectangleLayer.getBounds());
  if ((Math.abs(aoiBound.aoiNorth) + Math.abs(aoiBound.aoiSouth) <= 90) || (Math.abs(aoiBound.aoiEast) + Math.abs(aoiBound.aoiWest)) <= 180) {
    mymap.fitBounds(rectangleLayer.getBounds());
  } else {
    var southWest = L.latLng(-90, -180),
      northEast = L.latLng(90, 180),
      bounds = L.latLngBounds(southWest, northEast);
    mymap.fitBounds(bounds);
  }
  rectangleLayer.editing.disable();
  rectangleLayer.editing.enable();
});

这是通过Leaflet Draw工具栏实现的缩放事件处理程序（缩放事件处理程序不工作） (http:/plnkr.coeditUxiQ0R8j4WCNyjU8?open=lib%2Fscript.js&预览。):

rectangleOnEdit = layer.on('edit', function (e) {
                var aoiBound = {
                    aoiNorth: 90,
                    aoiWest: -180,
                    aoiSouth: -90,
                    aoiEast: 180
                };


                aoiBound.aoiNorth = '' + e.target.getLatLngs()[0][1].lat.toFixed(4);
                aoiBound.aoiWest = '' + e.target.getLatLngs()[0][1].lng.toFixed(4);
                aoiBound.aoiSouth = '' + e.target.getLatLngs()[0][3].lat.toFixed(4);
                aoiBound.aoiEast = '' + e.target.getLatLngs()[0][3].lng.toFixed(4);

                bounds = layer.getLatLngs();
                console.log(aoiBound.aoiEast);
                bounds[0][1].lat = Number(aoiBound.aoiNorth);
                bounds[0][2].lat = Number(aoiBound.aoiNorth);
                bounds[0][2].lng = Number(aoiBound.aoiWest);
                bounds[0][3].lng = Number(aoiBound.aoiWest);
                bounds[0][0].lat = Number(aoiBound.aoiSouth);
                bounds[0][3].lat = Number(aoiBound.aoiSouth);
                bounds[0][0].lng = Number(aoiBound.aoiEast);
                bounds[0][1].lng = Number(aoiBound.aoiEast);
                layer.setLatLngs(bounds);
                map.fitBounds(layer.getBounds());
                if ((Math.abs(aoiBound.aoiNorth) + Math.abs(aoiBound.aoiSouth) <= 90) || (Math.abs(aoiBound.aoiEast) + Math.abs(aoiBound.aoiWest)) <= 180) {
                    map.fitBounds(layer.getBounds());
                } else {
                    var southWest = L.latLng(-90, -180),
                        northEast = L.latLng(90, 180),
                        bounds = L.latLngBounds(southWest, northEast);
                    map.fitBounds(bounds);
                }
                layer.editing.disable();
                layer.editing.enable();
            });

Answer 1

你有两个问题.首先，你把你的 "编辑 "功能过头了。rectangleLayer 与featureGroup。

rectangleLayer = L.rectangle([[45, -45], [-45, 45]]);
rectangleLayer.addTo(map);
map.setView([0, 0], 1);
rectangleLayer.editing.enable();

var rectangleLayer = new L.FeatureGroup();

第二，你没有定义 layer 在 edit 事件函数。

rectangleLayer2.on('edit', function (e) {
        bounds = layer.getLatLngs();

添加这个：

rectangleLayer2.on('edit', function (e) {
        var layer = e.target;
        bounds = layer.getLatLngs();