Question

我尝试使用传单来制作一个交互式地图（比如一个等值区），使用geojson文件中的数据，并且我有一个问题就是动态更新地图上的数据和图例。

我的代码使用带有mapbox-light基础层的传单地图，下拉列表和图例。加载了两个jsons文件，我使用两个map panes来使用它们并设置它们的z-index。 Dropdownlist有两个选项，用于更改选定的geojsons以扩展此示例;真实案例有25个值可供选择。

我使用$(id_dropdownlist).change制作一切。 如果ddl更改：

如果存在，则删除窗格。
使用ddl值选择geojsons文件（本例中默认为url myjson files + ajax）。
添加窗格，加载和颜色多边形。

当我在ddl中进行第一次更改时，可以正常工作：选择geojsons文件，加载和着色多边形。 我的问题从第二次更改后出现，删除窗格后：geojsons已成功加载但这些未在我的地图上显示/着色。

我的业余调试检测比第一次更改时div leaflet-pane元素具有geojsons值，但从第二次更改开始，相同的div leaflet-pane没有数据。

另外，我想在加载geojsons后同时更新图例，但我不知道如何制作它。

以下是JSFiddle中的功能示例。

如果有人可以一步一步地帮助我，为了学习它，我将非常感激。如果窗格不是这样做的方式，或者其他方式更好地做到这一点，请告诉我如何。

Answer 1

当用户更改下拉列表的选择时，您首先尝试通过从DOM中删除以前创建的自定义窗格来清除地图。

有一个非常高的机会，即使它们是定制的，Leaflet也不会期望这样摆弄它的窗格。这可能就是为什么当您创建具有相同名称的新自定义窗格时，Leaflet不会正确引用它们，因此它不会在这些新窗格中显示您的新图层。

要在地图上动态添加和删除图层，只需使用Layer Groups即可。特别是，它为您提供了clearLayers方法，可以实现您想要实现的目标。

因此，您只需将多边形和标记添加到该图层组（而不是直接添加到地图），以便在用户选择新值时轻松清除它们。自定义窗格不受影响。

// Initialize the Layer Group.
// Add it to map so that its children will appear on map.
var layerGroup = L.layerGroup().addTo(map);

// On <select> "change" event:
layerGroup.clearLayers();

// When you have retrieved your data and are ready to convert it to layers:
L.geoJSON(data, {
  style: { // Can be a function as usual.
    pane: 'polygon'
  },
  pointToLayer: function(feature, latlng) {
    return L.circleMarker(latlng, {
      pane: 'POI'
    });
  }
}).addTo(layerGroup); // Add to layerGroup instead of directly to map.

更新了JSFiddle：https://jsfiddle.net/Ljetvd2x/4/

至于更新您的图例，我相信您应该能够找到有关该主题的一些资源，包括此处的SO。如果您仍然需要帮助，那很可能会被分成一个新帖子。

在传单

1 个答案: