【问题标题】:How do I style divicons in leaflet.draw edit mode?如何在 leaflet.draw 编辑模式下设置 divicons 样式?
【发布时间】:2015-12-22 03:43:50
【问题描述】:

使用leaflet.draw,我实例化了drawControl:

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);

但进入编辑模式时,样式会恢复为“默认”。我试图通过以下方式解决这个问题:

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/

【问题讨论】:

    标签: icons leaflet draw editmode


    【解决方案1】:

    喜欢this

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

    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 被设计成这样。

    【讨论】:

    • 谢谢!这正是我一直在寻找的。对于“中间标记”的不透明度,有没有一种好方法可以做到这一点?不透明度在函数 _createMiddleMarker L.Edit.Poly Class 中设置。我尝试扩展“L.Edit.Poly”类并查看是否可以重新定义该函数,但出现了一些错误。
    猜你喜欢
    • 1970-01-01
    • 2010-12-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-01-30
    • 1970-01-01
    • 2018-02-02
    • 1970-01-01
    相关资源
    最近更新 更多