javascript - リーフレットのポリゴンの色を動的に変更しますか？

Question

Leafletに精通している人なら、ポリゴンの色を動的に変更する方法を知っていますか？たとえば、次のように定義された円を考えてみましょう。

window.circle = L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#ffffff',
    fillOpacity: 0.5
}).addTo(map);

その後、ユーザーがインターフェイスのどこかでボタンをクリックした後（たとえば）、次のように円の色を変更したいと思います。

window.circle.options.fillColor = "#dddddd";

コードはwindow.circle.options.fillColorの値を変更しますが、その変更はマップ上のポリゴンの色の変更には反映されません。探し回ったのですが、何も見つかりませんでした。何か案は？

ありがとう。

Answer 1

L.Circleextends L.Path（http://leafletjs.com/reference.html#path）、メソッドsetStyle( <Path options> object )があり、新しいスタイルを次のように適用できますwindow.circle.setStyle({fillColor: '#dddddd'});

Answer 2

あなたがこのようなものを探しているなら：

const circle = L.circle([lat, lng], {
   style: style,
   onEachFeature: onEachFeature,
});

これらのオプションは、geoJsonデータで使用できます。つまり、L.geojson（）.....：D

したがって、ポリゴンの場合。試す、

circle.setStyle({
    color: 'red'
});

Answer 3

マップにポリゴンのセットがあります。このコードは、各ポリゴンの塗りつぶしの色を動的に変更できます。

// 'file' is a geojson layer
L.geoJSON(file, {
onEachFeature: colorlayer,
style: {
    color: "#00008c",
    opacity: 0.6,
    fillColor: '#333333',
    fillOpacity: 0
}
}).addTo(map);
function colorlayer(feature, layer) {
layer.on('mouseover', function (e) {
    layer.setStyle({
        fillOpacity: 0.4
    });
});
layer.on('mouseout', function (e) {
    layer.setStyle({
        fillOpacity: 0
    });
});

}