Leaflet.jsでポリゴンの塗りつぶし色を動的に設定するにはどうすればよいですか？

9

leaflet.jsのインタラクティブクロロパスの例を使用しています

各ポリゴンがクリックされた後、各ポリゴンがページの下部に実行中の値の集計を追加する方法を理解しました。

選択したポリゴンをもう一度クリックすると、実行中の集計から値が削除されます。

これを地図上のポリゴンの塗りつぶしの変化として視覚的に表現したいと思います。

これまでの私のコードは次のとおりです（PHPを含むJavaScript）：（私が何をしようとしているのかを説明するためにコード内にコメントを含めました。ここでもどんな助けも大歓迎です）

function addUp(num, x)
{  
    <?php 
    // begin php code

    $places = $db->query("SELECT boundary_id, boundary_name FROM boundaries WHERE               
    boundary_state= '$thatstate'");

    while($row = $places->fetch_object()) { 
       //end php code ?> 
       //begin javascript
       if (x == "List<?php echo $row->boundary_name ?>" && List<?php echo $row->boundary_name  ?> == 1) {

           temp = document.theForm.ttl.value;
           tempo = parseInt(temp);
           numo = parseInt(num);
           nwTemp = tempo + numo;
           document.theForm.ttl.value = nwTemp;
           geojson.setStyle({fillColor: 'blue'}); // I want to set color to blue to show  highlighted

           List<?php echo $row->boundary_name ?> = 0;

           return List<?php echo $row->boundary_name ?>;
    }


    if (x == "List<?php echo $row->boundary_name ?>" && List<?php echo $row->boundary_name  ?> == 0) {

        temp = document.theForm.ttl.value;
        tempo = parseInt(temp);
        numo = parseInt(num);
        nwTemp = tempo - numo;
        document.theForm.ttl.value = nwTemp;

        // I want to reset color of polygon if deselected (this would be   the default)
        geojson.resetStyle; 

        List<?php echo $row->boundary_name ?> = 1; 
    }   
}

— アレックス
ソース

地理情報システムへようこそ、アレックス！これはおそらくあなたの質問にふさわしい場所なので、SOにまだコピーが投稿されている場合は、削除してください。妥当な時間（1〜2日）が経過してもここで適切な回答が得られない場合は、モデレーターの注意のためにこの質問にフラグを付けてください。SO（または適切な場所）に移行できます。これにより、異なるサイトごとに最初からやり直すのではなく、それまでに惹きつけられたコメントや部分的な回答と一緒に質問が保持されます。

— whuber

13

setStyleメソッド（Pathから継承）を使用して、ポリゴンの塗りつぶしの色を変更できます。

polygon.setStyle({fillColor: '#0000FF'});

geojsonを正しく表示できない場合は、Leaflet GeoJSONのドキュメントをご覧ください。

— sfletche
ソース

うーん...そして透明な塗りつぶしのために、いくつかの手がかりですか？

— Peter Krauss、

1

私が偶然見つけたこのjsfiddleもあります。私はそれを自分のものとして主張することはできませんが、オプションオブジェクトを介して並べ替えevent.target.optionsたり、ターゲットイベントの色属性を設定することさえできますevent.target.setAttribute()

— ダニエラ
ソース