マップ上でマーカーのサイズを動的に変更する方法

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);