지도에서 마커의 크기를 동적으로 조정하는 방법

Question

Leaflet.js를 이용한 나의 연습 : iconSize 옵션을 수정하여 (아이콘 소스를 변경하지 않고) 확대 또는 축소 할 때 마커의 아이콘 크기를 조정하십시오.

나는이 시도 :

function resize(e) { 

    for (const marker of markers) { 

    const newY = marker.options.icon.options.iconSize.y * (mymap.getZoom()/parameterInitZoom); 
    const newX = marker.options.icon.options.iconSize.x * (mymap.getZoom()/parameterInitZoom); 

    marker.setIcon(marker.options.icon.options.iconsize = [newX, newY]); 
    } 
} 

mymap.on('zoomend', resize) 

을하지만 난에 결국 : t.icon.createIcon is not a function

가 나는 또한 방법 muliplyBy을보고 있지만 그것이 작동되도록 할 수있는 방법을 찾을 수 없습니다. 어떻게 수행하나요?

Answer 1

마침내 무슨 짓을

, 그것은 잘 작동하고 :

let factor; 
let markers = []; 


//New class of icons 
const MyIcon = L.Icon.extend({ 
    options: { 
    iconSize: new L.Point(iconInitWidth, iconInitHeight) //Define your iconInitWidth and iconInitHeight before 
    }, 
}); 

/*------------ Functions - Callbacks ----------------*/ 
//Small function to keep the factor up to date with the current zoom 
function updateFactor() { 
    let currentZoom = mymap.getZoom(); 
    factor = Math.pow(currentZoom/mymap.options.zoom, 5); 
}; 
updateFactor(); 

//Create a new marker 
function makeMarker(e) { 
    const newX = Math.round(iconInitWidth * factor); 
    const newY = newX * iconInitHeight/iconInitWidth; 

    const newMarker = new L.Marker(new L.LatLng(e.latlng.lat, e.latlng.lng), { 
    icon: new MyIcon({ iconSize: new L.Point(newX, newY) }) 
    }).addTo(mymap); 

    markers[markers.length] = newMarker; 
} 

//Update the marker 
function resize(e) { 
    updateFactor(); 

    for (const marker of markers) { 

    const newX = Math.round(iconInitWidth * factor); 
    const newY = newX * iconInitHeight/iconInitWidth; 

    marker.setIcon(new MyIcon({ iconSize: new L.Point(newX, newY) })); 
    } 
} 

/*------------ Event listeners ----------------*/ 
mymap.addEventListener('click', makeMarker); 
mymap.on('zoom', resize);