전단지 그리기 도구 모음에 사용자 정의 아이콘 추가

Question

참고 :change default icon toolbar (Leaflet)에 대한 간단한 게시물.

안녕 얘들 아. 리플릿 그리기 도구 모음에 대한 사용자 지정 아이콘을 추가하려고합니다. 그러나 나는 어떻게 생각하는지 모른다. 영상에 표시되는

Leaflet draw toolbar

가 나는 두 개의 마커를 갖는다. 목표는 툴바의 아이콘 중 하나를 변경하는 것입니다.

.leaflet-draw-toolbar a { 
    background-image: url(images/spritesheet.png); 
    background-repeat: no-repeat; 
} 

Spritesheet은 다음과 같습니다 :

당신은 간단하게 편집 할 수 있습니다

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: '...' 
        } 
       ]; 
      } 
     }); 

Answer 1

이 CSS 속성이있는 요소를 검사와 here을 볼 수 있듯이 : 내 코드는 다음과 같다 원하는 요소의 a 요소에 아이콘이있는 background-image: url(); (예 : 다각형 1) :

.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; 
} 

SVG, 이미지 또는 콘텐츠를 추가 할 수 있습니다.