我如何在 leaflet.draw 编辑模式中设置 divicons 的样式？

Question

使用 leaflet.draw，我实例化了 drawControl I：

scope.drawOptions = {
  position: 'topright',
  draw: {
    polyline: false,
    polygon: {
      icon: new L.DivIcon({
        iconSize: new L.Point(16, 16),
        className: 'leaflet-div-icon leaflet-editing-icon my-own-class'
      }),
      allowIntersection: false,
      drawError: {
        color: '#5878B8',
        message: '<strong>Oh snap!<strong> you can\'t draw that!' 
      },
      shapeOptions: shapeOptions
    },
    circle: false, // Turns off this drawing tool
    rectangle: false,
    marker: false
  },
  edit: {
    featureGroup: self.featureGroup
  }
};
scope.drawControl = new L.Control.Draw(scope.drawOptions);
map.addControl(scope.drawControl);

但在进入编辑模式时样式会恢复为 "default"。我试图通过以下方式解决这个问题：

map.on('draw:editstart', function(e) {
  scope.drawControl.setDrawingOptions({
    polygon: {
      icon: new L.DivIcon({
        iconSize: new L.Point(16, 16),
        className: 'leaflet-div-icon leaflet-editing-icon my-own-class'
      })
    },
  })
});

但这并没有帮助。有什么建议吗？

有一个已解决的 github 问题，但我无法弄清楚：https://github.com/Leaflet/Leaflet.draw/issues/48#issuecomment-141546589

如果有人想玩，我创建了这个 jfiddle：http://jsfiddle.net/markdickersonvt/mwz7pg2n/

Answer 1

喜欢this?

基本上，我只是扩展 L.Edit.Poly class

L.Edit.Poly = L.Edit.Poly.extend({
    options : {
        icon: new L.DivIcon({
             iconSize: new L.Point(20, 20),
             className: 'leaflet-div-icon leaflet-editing-icon my-own-icon'
        })
    }
});

我曾经使用 Draw 插件，并滥用扩展默认方法来摆脱工具提示。我认为这是最好的做法，这就是 leaflet 以这种方式设计的原因。

我如何在 leaflet.draw 编辑模式中设置 divicons 的样式？

How do I style divicons in leaflet.draw edit mode?

icons

editmode

draw

leaflet