項目中地圖布局如下许帐。要實現(xiàn)點擊右側(cè)列表中某一項時，在地圖中出現(xiàn)popup。
image.png
列表查詢實現(xiàn)地圖popup
在leaflet中以geojosn加載的圖層排霉，其實第個幾何體就是一個圖層，一個geojson文件創(chuàng)建的其實是包含各個幾何體圖層的FeatureGroup民轴。因此攻柠，當(dāng)點擊右側(cè)列表時，獲取所點擊的項的id后裸，然后在地圖中獲取map._layers瑰钮，在layers中查詢滿足條件的layer，然后在layer中可以:
- 獲取圖層當(dāng)前的popup對象：
layer.getPopup() - 獲取圖層當(dāng)前的popup內(nèi)容：
layer.getPopup().getContent() - 設(shè)置圖層的popup內(nèi)容：
layer.setPopupContent(response.popupContent); - 打開popup：
layer.openPopup(layer._latlng);
在這里定義了函數(shù)showStationPopup微驶，用于在地圖中打開popup:
function showSationPopup(stationId, layer) {
if (!layer.getPopup().getContent()) {
initStationPopupContent(stationId, layer).then(function (response) {
layer.setPopupContent(response.popupContent);
layer.openPopup(layer._latlng);
});
} else {
layer.openPopup(layer._latlng);
}
}
由于在geojson創(chuàng)建圖層時浪谴，里面的onEachFeature會全部調(diào)用一次，所以為提高首次數(shù)據(jù)加載速度，把對每個popup內(nèi)容的獲取放到了打開popup時苟耻。當(dāng)要打開popup時篇恒，首先判斷內(nèi)容是否為空，若為空則進(jìn)行異步數(shù)據(jù)請求梁呈。
異步數(shù)據(jù)請求采用了axios婚度。創(chuàng)建請求，并對請求的響應(yīng)體response進(jìn)行數(shù)據(jù)處理官卡，如添加屬性等蝗茁，在這里是添加了response.popupContent。然后返回promise寻咒。
image.png
這樣當(dāng)請求完成后哮翘，就會在then中獲取response中的popup的內(nèi)容，賦給popup毛秘，
layer.setPopupContent(response.popupContent);
地圖點擊出現(xiàn)popup
這里可能存在問題饭寺，后面再改進(jìn)。
layer.on('popupopen', function (e) {
//console.log("事件信息");
//console.log(e);
_map.flyTo([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], 17, {
animate: true,
duration: 0.5,
easeLinearity: 1.0,
maxZoom: 17
});
showSationPopup(Id, layer);
});
