web-dev-qa-db-ja.com

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

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

javascriptmappingleaflet
21
cglmdq

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

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

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

26
Patrick D

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

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

6
juliabulia245