如何更新顶点拖动传单可编辑的矩形边界

Question

我一直在使用 leaflet-editable.js 来编辑形状。具体来说，我正在创建一个矩形，当拖动一个角时，该矩形将保持 4:3 的纵横比。我创建了一个函数来计算纵横比和 return 应该绘制新角的 lat/lng 。我已将此功能附加到事件“editable:vertex:drag”。

我不确定如何更新矩形的实际绘图以保持比例。我尝试将对象属性设置为更新但不更改矩形的新边界。

我认为答案是刷新矩形的绘图，但我不知道如何获取当前矩形实例，也不知道如何刷新它。

Javascript 对我来说是新的

carto.on('editable:vertex:drag', function(e) {
  console.log(e);
  var cornersNe = e.vertex.latlngs[0], //ne
      cornersNw = e.vertex.latlngs[1], //nw
      cornersSw = e.vertex.latlngs[2], //sw
      cornersSe = e.vertex.latlngs[3]; //se
  var distanceWidth = carto.distance(cornersNw, cornersNe).toFixed(2);
  var distanceHeight = carto.distance(cornersSw, cornersNw).toFixed(2);
  var asR = aspectRatio(distanceWidth, distanceHeight, e.latlng.lat, e.latlng.lng);
  var index = e.vertex.getIndex(),
      next = e.vertex.getNext(),
      previous = e.vertex.getPrevious(),
      oppositeIndex = (index + 2) % 4,
      opposite = e.vertex.latlngs[oppositeIndex],
      bounds = new L.LatLngBounds(asR, opposite);
   // L.marker(bounds).addTo(carto);
  console.log('first set of bounds ', e.layer._bounds);
  console.log('bounds to set ', bounds);
  e.layer._bounds = bounds;
  console.log('Updated set ',e.layer._bounds);

如果这太迂回，我愿意接受其他方法。

Answer 1

使用public函数设置边界：

  e.layer.setBounds(bounds);

如何更新顶点拖动传单可编辑的矩形边界

How to update rectangle bounds on vertex drag leaflet editable

javascript

maps

leaflet

leaflet-editable