在小冊子上動態更新地圖窗格和圖例

我正在嘗試使用小冊子來使用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

這正是我所需要的。它工作完美！謝謝你的解釋。 –

在小冊子上動態更新地圖窗格和圖例

回答

相關問題