1

我正在努力使用 Javascript 和 Leaflet tryind 来实现仪表板。我正在尝试按照本教程实现等值线图。我需要根据两个选择菜单动态更改地图上的数据显示。

选择：

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

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

function makeChoroplethMap() {}

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

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

在此处输入图像描述

所以我试着只留下与数据的绑定makeChoroplethMap()，

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

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

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

4

1 回答 1

3

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

然后，使用L.GeoJSON.clearLayers()当前 未记录L.GeoJSON.addData()的方法来清除/添加多边形。

于 2016-06-13T09:08:36.373 回答