1

ダッシュボードを実現するためにJavascriptとリーフレットに苦労しています。このチュートリアルに従って、コロプレスマップを実現しようとしています。2 つの選択メニューに従って、マップ上のデータ表示を動的に変更する必要があります。

選択:

<select class="c-select" id="methodSelected" name="methodSelected" required>
</select>
<select class="c-select" id="yearSelected" name="yearSelected" required>
</select>

で選択を変更しています

$("#methodSelected").change()
$("#yearSelected").change()

どちらも a 内で宣言されています

$(document).ready(function() {}

このブロックでは、必要な変数と関数も宣言します

var choroplethMap;
var q = d3_queue.queue();
q.defer(d3.json, "final2.geojson");
function ready(GeoJSON) {
    ...
    makePlaceHolderChoroplethMap();
}

makePlaceHolderChoroplethMapそのようなものです

function makePlaceHolderChoroplethMap() {
    choroplethMap = L.map('choroplethContainer').setView([51.505, -0.09], 2);
    L.tileLayer("url", 
       {
            id: id,
            attribution: attribution,
            accessToken: accessToken
        }
    ).addTo(choroplethMap);

2 つの選択メニューで値を変更するときは、マップを更新する必要があるため$("#yearSelected").change()、 を呼び出しますmakeChoroplethMap()。

function makeChoroplethMap() {}

この関数内に、以前にリンクされたチュートリアルに従ってコードを配置しました。

問題は、そのコードで値を変更すると、以前に追加した他のレイヤーの上に新しいレイヤーを再度追加することです (ご覧のとおり、Geojson、凡例、およびコントロール)。

ここに画像の説明を入力

ということで、データとのバインディングだけを に残そうとしたのですがmakeChoroplethMap()、

geojson = L.geoJson(data, 
    {
        style: style,
        onEachFeature: onEachFeature
    }
).addTo(choroplethMap);

asでエラーが表示さinfo.addTo(choroplethMap);れt is undefinedます。初期化されていないためだと思いchoroplethMapます。マップと選択は機能しますが、エラーが原因でコントロールが表示されません。今のところ（昨日は機能していたので何かを壊したと思います）また、selectで値を変更すると、geojsonレイヤーが国を超えて滞在します（以前に入力されたものは消えず、値も変更されます）。

私の質問は、凡例やその他のコントロールを再追加せずにデータを再バインドするにはどうすればよいですか?

4

1 に答える 1