web-dev-qa-db-ja.com

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

リーフレットに詳しい人のために、ポリゴンの色を動的に変更する方法を知っていますか？たとえば、次のように定義された円を考えます。

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の値を変更しますが、変更はマップ上のポリゴンの色の変更には反映されません。探してみましたが何も見つかりませんでした。何か案は？

ありがとう。

javascriptleaflet
27
Owen

_L.Circle_拡張_L.Path_（ http://leafletjs.com/reference.html#path ）、メソッドsetStyle( <Path options> object )があり、新しいwindow.circle.setStyle({fillColor: '#dddddd'});としてのスタイル

35
tbicr

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

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

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

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

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

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

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

}

0
Patrick D