在小册子上动态更新地图窗格和图例

我正在尝试使用小册子来使用geojson文件中的数据制作交互式地图（如choropleth），并且我有一个动态地更新地图上的数据和图例的问题。在小册子上动态更新地图窗格和图例

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

我使用$(id_dropdownlist).change来创造一切。 如果ddl更改：

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

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

我的业余调试检测比在第一次更改div leaflet-pane元素具有geojsons值，但从第二次变更起，同样div leaflet-pane还没有数据。

另外，我想在加载geojsons的同时更新图例，但我不知道如何做到这一点。

这是JSFiddle中的一个功能示例。

如果有人能够一步一步地帮助我，为了解它，我将非常感激。如果窗格不是这样做的方式，或者另一种更好的方式，请告诉我怎么做。

来源

2017-06-01 Felipe Piña

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

有一个很高的机会宣传单不希望这样的窗格摆弄，即使它们是自定义的。这可能是为什么当你使用相同的名称创建新的自定义窗格时，Leaflet没有正确引用它们，因此它不会在这些新窗格中显示新的图层。

为了在地图上动态地添加和删除图层，您应该简单地使用Layer Groups。特别是，它为您提供了一种方法，可以实现您正在尝试实现的目标。

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

// 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。如果你仍然需要帮助，那很可能会被分成一个新的职位。

来源

2017-06-03 19:11:25 ghybs

这正是我所需要的。它工作完美！谢谢你的解释。 –

在小册子上动态更新地图窗格和图例

回答

相关问题