Choropleth地图与Leaflet中的动态数据

Question

我正在努力使用Javascript和Leaflet试图实现仪表板。 我试图在tutorial之后实现一个等值区域地图。 我需要根据两个选择菜单动态更改地图上的数据显示。

选择

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

我想用

改变选择

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

都在

中声明

$(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);

现在，当我要使用两个选择菜单更改值时，我想要更新地图，因此我将$("#yearSelected").change()调用makeChoroplethMap()。

function makeChoroplethMap() {}

在这个函数中，我把代码放在之前链接的教程之后。

问题在于，当我使用该代码更改值时，我将重新添加新图层，而不是之前添加的其他图层（Geojson，图例和控件，如您所见）

所以我试着只将数据绑定到makeChoroplethMap()，

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

但我在info.addTo(choroplethMap);中收到t is undefined的错误。我认为因为choroplethMap没有初始化。映射并选择工作，但控件不会显示错误原因。 现在（我认为我打破了一些因为yesteday工作）也geojson层覆盖全国也是如果我用select更改值（之前的一个推出不会关闭我也改变值）。

所以我的问题是：如何在不重新添加图例和其他控件的情况下重新绑定数据？

Answer 1

初始化地图时，添加图例和GeoJSON图层一次。如果您在makeChoroplethMap中添加它们，您将重新添加它们。

然后，使用L.GeoJSON.clearLayers()和 清除/添加多边形的currently undocumented L.GeoJSON.addData()方法。