Leaflet.js에는 현재 존재하는 모든 마커를 반복 할 수있는 방법이 있습니까?

Question

정적 인 38x38이 아닌 줌을 사용하여지도 아이콘의 크기를 조정하려고합니다. CSS로 할 수있는 방법이 있다면, 그것도 괜찮을 것입니다. 그래도 모든 마커를 반복 할 수 있다는 것도 포함 할 것입니다. 그래야 할 일은 찾을 수 없습니다.

미리 감사드립니다.

Answer 1

마커는 모두 DOM에서 사용할 수 있어야하며 클래스 이름이 leaflet-pane leaflet-marker-pane 인 자체 창을 가지고 있어야합니다. 그들 자신의 표식은 적어도 leaflet-marker-icon 클래스입니다.

"표준"DOM 쿼리를 사용하여 액세스 할 수 있습니다 (예 : querySelectorAll). 유스 케이스에 사용할 수있는 플러그인이 있는지 확인하려면 리플렛에 다양한 플러그인 생태계가 있습니다.

Answer 2

이것은 XY problem입니다. 확대/축소 수준을 사용하여 마커의 크기를 변경하려는 경우 "알고 있습니다! 마커를 반복합니다!"하고 생각하는 방법을 모르므로 두 번째 문제.

줌 레벨에 따라 마커 아이콘의 크기가 어떻게 바뀌나요?

몇 가지 접근법이 있습니다.

하나는지도의 zoomend 이벤트에 이벤트 핸들러를 첨부하고 모든 마커를 반복하는 이벤트 처리기입니다. map.eachLayer(...)을 호출하고 레이어가 마커 (lyr instanceof L.Marker)인지 확인한 다음 L.Icon을 다시 할당하면됩니다.

for (i in data) { 
    ... 
    var marker = L.marker(data[i].coords, ...); 
    map.on('zoomend', function(){ 
     if (map.getZoom() > 15) { 
      marker.setIcon(...); 
     } else { 
      marker.setIcon(...); 
     } 
    }); 
} 

그리고 또 다른 방법은 따라지도의 CSS 클래스를 변경 할, Leaflet.ZoomCSS을 사용하는 것입니다 :

또 다른 방법은 좀, 마커 당지도 의 zoomend 이벤트에 이벤트 핸들러를 첨부하는 것입니다 줌 레벨에서 스타일링을 처리 할 수 ​​있습니다.