Leaflet: DivIcon에서 CSS 스타일을 설정하는 기능 추가

안녕,
아이콘의 색상은 무엇을 의미합니까? CSS에서 background-color를 설정하고 DivIcon이 색상을 변경했습니다.

당신에게 필요한 것이 아닌가요? 좀 더 구체적으로 말씀해 주시겠습니까?

안녕하세요 @samik88 입니다 .

사용 사례에서 지정한 대로 마커 아이콘의 색상(RGB 색상 코드)은 마커 좌표가 있는 데이터베이스에서 검색되므로 CSS 클래스에서 정의할 수 없습니다(이렇게 하려면 16777215 css 클래스(불투명도를 포함하지 않는 각 rgb 색상 코드에 대해 하나씩), 이는 어리석은 일입니다.

마커의 rgb 색상을 입력할 수 있는 텍스트 필드를 추가하여 사용 사례를 확인하도록 예제를 변경할 수 있습니다. 그러면 DivIcon에서 이를 설정할 수 없으므로 마커 아이콘 색상을 변경할 수 없습니다.

그렇게 하려면 생성된 DIV에 CSS 스타일 속성을 설정할 수 있어야 합니다.

이 기능은 L.Marker 의 getElement() 메소드로 다룰 수 있습니다. 예:

var marker = new L.Marker(myCenter, {
  icon: L.divIcon()
});
map.addLayer(marker);

marker.getElement().style.border = '5px dotted lime';
marker.getElement().style.width = '50px';
marker.getElement().style.height = '50px';

작동 예를 참조하십시오.

이것은 다소 극단적인 경우이므로 L.DivIcon 클래스를 확장하여 사용자 정의 스타일을 추가하는 것이 좋습니다. 플러그인 작성에 대한 자습서 를 읽으십시오. 그것은 같은 것입니다

L.DivIcon.CustomColor = L.DivIcon.extend({
    createIcon: function(oldIcon) {
           var icon = L.DivIcon.prototype.createIcon.call(this, oldIcon);
           icon.style.backgroundColor = this.options.color;
           return icon;
    }
})

저는 개인적으로 이것이 널리 사용되는 기능이라고 생각하지 않으므로 지금은 이 기능을 닫습니다.