使用 leaflet-geoman 限制折线(成为一条线)中的制造商点

Hoe*_*ers 1 leaflet leaflet-draw leaflet-geoman

我想让用户能够绘制一条线(这是一条只有 2 个点的折线)。

我启用绘图和监听vertexadded。当_rings标记计数等于 2 时,我禁用绘图。

出于以下几个原因,这种感觉是错误的:

  1. 我访问私有变量_rings
  2. 现在我禁用绘图,但为了可视化线条,我必须在视觉模式下重新启动它
  3. 为了允许用户移动线的 2 个点,我必须在编辑模式下重新启动线。
  4. 在编辑模式下,必须禁用两个标记之间的行分割,这可能吗?

我是否缺少一种更简单的方法来做到这一点?

map.pm.enableDraw('Line', {
  snappable: true,
  snapDistance: 20,
});

map.on('pm:drawstart', (event: any) => {
  const { workingLayer } = event;
 
  workingLayer.on('pm:vertexadded', (e: any) => {
    if (workingLayer._rings[0].length >= 2) {

      map.pm.disableDraw('Line', {
        snappable: true,
        snapDistance: 20,
      });
    }
  });
});
Run Code Online (Sandbox Code Playgroud)

Fal*_*ign 6

  1. 使用layer.getLatLngs()代替变量_rings.
  2. 不要调用map.pm.disableDraw(),完成形状map.pm.Draw.Line._finishShape()以将绘制的图层添加到地图中
  3. 您可以调用map.pm.enableGlobalEditMode()以启用所有图层的编辑,也可以使用以下命令启用所需的图层layer.pm.enable()
  4. 使用该选项hideMiddleMarkers: true
map.pm.setGlobalOptions({hideMiddleMarkers: true})
map.on('pm:drawstart', (event) => {
  const { workingLayer } = event;

  workingLayer.on('pm:vertexadded', (e) => {
    if (workingLayer.getLatLngs().length >= 2) {
       map.pm.Draw.Line._finishShape()
    }
  });
});
map.pm.enableDraw('Line');
Run Code Online (Sandbox Code Playgroud)

https://jsfiddle.net/falkedesign/7sL02y53/