には、リーフレットのズームレベルに応じてマーカーアイコンのサイズを変更する方法がありますか？

Question

私は学校のプロジェクトを作っています。リーフレットのズームレベルに応じてマーカーアイコンのサイズを変更する必要があります。簡単な方法はありますか？ Web上のチュートリアルは？ヘルプの事前に感謝！

Answer 1

ズームイン/アウト時にマーカーのサイズを変更するには、イベントを処理する必要があります。マップをズームインまたはズームアウトを終了した時はいつでも

map.on('zoomend', function() { }); 

zoomendイベントが呼び出されます。 API hereをご覧ください。

ここで、マーカーのサイズを変更するためにカスタムコードを呼び出すことができます。たとえば、簡単な方法で円のマーカーのサイズをマップのズームレベルのサイズに設定するとします。マップ内またはズームアウトするたびに今CircleMarker here

// Create some marker that will be resized on the map zooming 
var myMarker = new L.CircleMarker([10,10], { /* Options */ }); 

map.on('zoomend', function() { 
    var currentZoom = map.getZoom(); 
    myMarker.setRadius(currentZoom); 
}); 

のためのAPIを参照してください、マーカーのサイズが変更されます。

Answer 2

circleMarkersのサイズの変更については何を指しているのかわかりませんが、承認された回答に追加してください...サークルメーカーのサイズを変更したり、他のスタイルオプションを変更したい場合は半径とともに重量）は、次のアプローチを使用することができます。

map.on('zoomend', function() { 
     var currentZoom = map.getZoom(); 
     var myRadius = currentZoom*(1/2); //or whatever ratio you prefer 
     var myWeight = currentZoom*(1/5); //or whatever ratio you prefer 
      layername.setStyle({radius: myRadius, weight: setWeight}); 
    }); 

layernameはcircleMarkersが含まれていますが、持っているものは何でもレイヤーの名前に置き換えられます...そしてもちろん、あなたに分数を変更することができますあなたのニーズに合わせて好きです。

私はOPの学校プロジェクトが終了したと思っていますが、これは同じ質問をしている他の人に役立つことを願っています！