geoman 的自定义变换控件答案

【问题标题】：Custom transform control for geomangeoman 的自定义变换控件
【发布时间】：2022-11-10 23:52:03
【问题描述】：

我正在尝试向 geoman 添加自定义变换控件，以使用折线和多边形进行某些变换。我看到在编辑时，geoman 在顶点等上方绘制提示线。我希望我的工具能够突出显示具有相同类型提示的折线/多边形。以下是我的行动框架：

const ConvertAction = L.Toolbar2.Action.extend({
  options: {
    toolbarIcon: {
      html:
        '<div class="icon-maps icon-convert" title="Convert point"></div>',
      tooltip: 'Convert point'
    }
  },
  addHooks: () => {
    // draw polygon
    // map.pm.enableDraw();

    changeConvert();
  }
});

function changeConvert() {
  convert = true;
  map.eachLayer(function (layer) {
    if (layer.feature && layer.feature.geometry.type === 'Point') {
      layer._icon.style['pointer-events'] = 'auto';
    }
  });
}

是否有内部功能或可以用来勾勒形状的东西？当我启用已内置于 geoman 中的 Edit layers 工具时，会为我勾勒出形状。我怎样才能从我的代码中实现这一点而不必重新实现整个事情？

【问题讨论】：

标签： leaflet editor leaflet-geoman

【解决方案1】：

到目前为止，在快速查看 geoman 代码后，我能够想出：

  const ConvertAction = L.Toolbar2.Action.extend({
    options: {
      toolbarIcon: {
        html:
          '<div class="icon-maps icon-convert" title="Convert point"></div>',
        tooltip: 'Convert point'
      }
    },
    addHooks: () => {
      // draw polygon
      // map.pm.enableDraw();
      if (!convert) changeConvert();
      else disableConvert();
    }
  });

  function changeConvert() {
    convert = true;
    map.eachLayer(function (layer) {
      if (
        layer?.feature?.geometry.type === 'Polygon' ||
        layer?.feature?.geometry.type === 'LineString'
      ) {
        const coords = layer.getLatLngs();

        const markerGroup = new L.LayerGroup();
        markerGroup._pmTempLayer = true;

        const createMarker = (latlng) => {
          const marker = new L.Marker(latlng, {
            draggable: true,
            icon: L.divIcon({ className: 'marker-icon' })
          });
          layer.options.pane =
            (map.pm.globalOptions.panes &&
              map.pm.globalOptions.panes.vertexPane) ||
            'markerPane';

          marker._pmTempLayer = true;

          markerGroup.addLayer(marker);

          return marker;
        };

        const handleRing = (coordsArr) => {
          // if there is another coords ring, go a level deep and do this again
          if (Array.isArray(coordsArr[0])) {
            return coordsArr.map(handleRing, this);
          }

          // the marker array, it includes only the markers of vertexes (no middle markers)
          const ringArr = coordsArr.map(createMarker);

          return ringArr;
        };
        const markers = handleRing(coords);
        map.addLayer(markerGroup);
      }
    });
  }

  function disableConvert() {
    convert = true;
    map.eachLayer(function (layer) {
      if (
        layer.dragging &&
        layer.options?.draggable === true &&
        layer._pmTempLayer === true
      ) {
        console.log('temp layer:', layer);
        map.removeLayer(layer);
      }
    });
    update();
  }

似乎有过多的代码，并且重新实现了现有功能的[并且可能不如我不完全理解 geoman 代码的 geoman 版本那么好]。

我该如何简化/解决这个问题？

【讨论】：