22

学校向けのプロジェクトを作成していて、リーフレット マップのズーム レベルに応じてマーカー アイコンのサイズを変更する必要があります。これを実現する簡単な方法はありますか? ウェブ上のチュートリアルはありますか？事前に助けてくれてありがとう!!!

4

2 に答える 2

27

ズームイン/ズームアウトするときにマーカーのサイズを変更するには、イベントを処理する必要があります。

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

このzoomendイベントは、マップのズームインまたはズームアウトが完了するたびに呼び出されます。APIはこちらを参照してください。

これで、この関数内で、マーカーのサイズを変更するためにカスタム コードを呼び出すことができます。たとえば、単純な方法で、円マーカーのサイズをマップのズーム レベルのサイズと同じに設定したいとします。ここで CircleMarker の API を参照してください。

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

これで、マップがズームインまたはズームアウトするたびに、マーカーのサイズが変わります。

于 2013-07-01T11:24:43.580 に答える
6

CircleMarkers がサイズを変更しないことに関して Stophace が何を参照しているのかはわかりませんが、承認された回答に追加します... circleMakers のサイズを変更したり、他のスタイリングオプションを変更したい場合 (半径とともに重みを変更すると便利です) ）、次のアプローチを使用できます。

    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の学校プロジェクトは終了したと思いますが、これが同じ質問をしている他の人の助けになることを願っています!

于 2016-07-08T19:59:01.187 に答える