Leaflet .addLayer（）函數失敗，在控制台上運行

Question

我認為這意味着我遺漏了一些關於javascript中嵌套函數工作的基本知識，但我沒有使用click函數在傳單映射中添加或刪除圖層。 具體來說，我有一個傳單圖，其中定義了許多矢量圖層。 其中一個圖層在頁面加載時添加到地圖中，然后后續圖層應加載到圖層選擇器中的單擊事件。

這是處理點擊的功能，然后更新側邊欄圖例，更新圖層選擇器中的類，並且應該更新可見圖層：

// ADD THE LAYER CONTROL FUNCTION
$('.layer').click(function() {
  var oldLayer = $('.active').attr('id');
  var newLayer = $(this).attr('id');
  console.log(oldLayer + ' --> ' + newLayer);
  $('#infobits').html('<h2>' + this.text + '</h2><hr>' + legendFormatter(
    this.id));
  map.removeLayer(oldLayer);
  $('.layer').removeClass('active');
  $(this).addClass('active');
  map.addLayer(newLayer);
});

每次我點擊一個新圖層我都會得到Uncaught TypeError: undefined is not a function ，無論我把函數放在哪里（我甚至把它放在.getJSON（）調用中）。 令人困惑的是，我在瀏覽器中訪問JS控制台，並在上面腳本的第49行（ map.removeLayer(Percent_TC_bg) ）上逐字輸入函數，地圖會刪除有問題的圖層。

我該怎么做才能讓我的地圖添加和刪除圖層而不會出錯？

Answer 1

我想在addLayer或removeLayer拋出TypeError 。 Map#addLayer和#removeLayer接受ILayer對象作為參數，但oldLayer和newLayer顯然是String ，它直接來自HTML元素的ID屬性。

因此，我想改變oldLayer和newLayer以欣賞ILayer對象將解決問題。

Answer 2

編輯：伊戈爾打敗了我。

Mics是對的 - HTML元素的ID是一個字符串，並不引用該層。 在定義圖層以解決此問題后，您可以執行以下操作：

var myLayers = {
    "Percent_TC_bg": Percent_TC_bg,
    "Percent_TC": Percent_TC
};

然后像這樣添加處理程序

$('.layer').click(function() {
  var oldLayer = myLayers[$('.active').attr('id')];
  var newLayer = myLayers[$(this).attr('id')];
  // ...
});