單擊時在小葉多邊形上重置樣式

Question

我有一張用leaflet.js制作的地圖，其中包含一個由70個多邊形組成的geoJSON圖層。 每次用戶點擊多邊形時，它都會突出顯示，側面板會填充數據並打開：

function clickFeature(e) {
    var layer = e.target;
        layer.setStyle({
        weight: 3,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });

    info.update(layer.feature.properties);
    $( "#mypanel" ).panel("open");
}

這很好。 但我需要更改它，以便每次單擊多邊形時，它同時突出顯示並且先前單擊的多邊形返回到原始樣式，因此一次只能“選擇”一個多邊形。

我試過這個，但它不起作用（面板不再更新或打開）：

var lastClickedLayer;
function clickFeature(e) {
    geojson.resetStyle(lastClickedLayer);
    var layer = e.target;
        layer.setStyle({
        weight: 3,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });

    info.update(layer.feature.properties);
    $( "#mypanel" ).panel("open");
    layer = lastClickedLayer;
}

任何幫助非常感謝。

Answer 1

你的任務是錯誤的，必須是

lastClickedLayer = layer;

如果已經設置了lastClickedLayer還應該另外添加一個檢查：

if(lastClickedLayer){
   geojson.resetStyle(lastClickedLayer);
}