Leaflet 中具有动态数据的等值线图

Question

我正在努力使用 Javascript 和 Leaflet tryind 来实现仪表板。我正在尝试实现此 tutorial 之后的等值线图。我需要根据两个 select 菜单动态更改地图上的数据显示。

选择：

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

我在 selects 和

保持变化

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

现在，当我要使用两个 select 菜单更改值时，我想要更新地图，所以我在 $("#yearSelected").change() 中调用了 makeChoroplethMap()。

function makeChoroplethMap() {}

在此函数中，我按照之前链接的教程放置了代码。

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

所以我尝试只将数据绑定保留到 makeChoroplethMap()、

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

但我在 info.addTo(choroplethMap); 中收到一个错误 t is undefined。我想是因为 choroplethMap 没有初始化。地图和 select 工作，但控件不显示错误的原因。现在（我想我打破了一些东西，因为昨天工作了）如果我用 select 更改值，geojson 层也会在国家/地区停留（之前的推杆不会消失，我也更改值）。

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

Answer 1

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

然后，使用 L.GeoJSON.clearLayers() 和 currently undocumented L.GeoJSON.addData() 方法 clear/add 多边形。

Leaflet 中具有动态数据的等值线图

Choropleth map with dynamically data in Leaflet

javascript

leaflet

choropleth