Leaflet 将自定义图标添加到传单绘制工具栏
注意:同时发布到 我正在尝试为传单绘制工具栏添加自定义图标。但我似乎不知道怎么做 如图所示,我有两个标记。目标是更改工具栏中的一个图标。我的代码如下:Leaflet 将自定义图标添加到传单绘制工具栏,leaflet,leaflet.draw,Leaflet,Leaflet.draw,注意:同时发布到 我正在尝试为传单绘制工具栏添加自定义图标。但我似乎不知道怎么做 如图所示,我有两个标记。目标是更改工具栏中的一个图标。我的代码如下: L.DrawToolbar.include({ getModeHandlers: function (map) { return [ { enabled: true,
L.DrawToolbar.include({
getModeHandlers: function (map) {
return [
{
enabled: true,
handler: new L.Draw.Polyline(map, { metric: true, repeatMode: true }),
title: '...'
},
{
enabled: true,
handler: new L.Draw.Polygon(map, { allowIntersection: false, showArea: true, metric: true, repeatMode: false }),
title: '...'
},
{
enabled: true,
handler: new L.Draw.Marker(map, { icon: new L.Icon.Default() }),
title: '...'
},
{
enabled: true,
handler: new L.Draw.Marker(map, { icon: new L.Icon.Default() }),
title: '...'
}
];
}
});
正如您在inspect元素中看到的,有以下CSS属性:
.leaflet-draw-toolbar a {
background-image: url(images/spritesheet.png);
background-repeat: no-repeat;
}
Spritesheet是:
您只需编辑背景图像:url()
在所需的a
元素上显示图标的URL(例如多边形一):
。传单绘制工具栏。传单绘制多边形{
背景:url(数据:image/svg+xml;utf8,)不重复;
背景色:#FFF;
}
您可以添加SVG、图像或内容。非常感谢您的回复!这真的是一个简单的修复,如果它的工作。我稍后会试一试。祝你有一个愉快的一天:)我已经在演示中尝试过了,效果非常好。没问题,祝你今天愉快!
.leaflet-draw-toolbar .leaflet-draw-draw-polygon {
background: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='5' cy='5' r='5' /></svg>) no-repeat;
background-color: #FFF;
}