show/hide 使用 mapbox 的地图叠加层的复选框？

Question

我对 show/hide 我的 geojson 贫困数据有一个基本的复选框问题。我试图在选中 "Show Poverty Data" 复选框（这里是 link）后，将此数据显示为 mapbox baselayer 上的等值线图叠加层。我可以单击 show/hide 覆盖层的复选框一次，但在第一轮 checking/unchecking 之后，覆盖层停止显示。

L.mapbox.accessToken = 'pk.eyJ1IjoiemFrc2Nsb3NldCIsImEiOiJjaWY2dWxkc2gwcXBjczVtM3pnc3hydnI1In0.ABQHwIrVx95WhAVv_2JPeA';

var map = L.mapbox.map('map')
  .setView([40.71, -74.00], 11)
  .addLayer(L.mapbox.tileLayer('mapbox.dark'));


function getColor(d) {
  return d > 30 ? "#0868ac" :
    d > 20 ? "#43a2ca" :
    d > 10 ? "#7bccc4" :
    d > 0 ? "#a8ddb5" :
    "grey";
};

//load poverty data
var povertyData = "https://raw.githubusercontent.com/Kaz-A/Daycare-Facilities-/master/poverty.geojson";

$.getJSON(povertyData, function(povertyData) {

  //get unique poverty % values
  var povertyFeatures = povertyData.features;
  var uniquePoverty = [];

  povertyFeatures.forEach(function(x) {
    if (!povertyFeatures[x.properties.PopInPover]) {
      uniquePoverty.push(x.properties.PopInPover);
      povertyFeatures[x.properties.Poverty] = true;
    }
  });

  console.log(povertyData);
  console.log(uniquePoverty);

  //styling the choropleth
  function style(feature) {
    return {
      fillColor: getColor(feature.properties.PopInPover),
      weight: 1,
      opacity: 0.3,
      color: "#000",
      dashArray: "1",
      fillOpacity: 0.3
    };
  };

  //add poverty data
  var addPovertyData = L.geoJson(povertyData, {
    style: style
  });

  //checkbox event to overlay poverty data
  $(".checkbox-primary").click(function() {
    if (this.checked) {
      console.log("checked!");
      addPovertyData.addTo(map);
    } else {
      console.log("unchecked!");
      addPovertyData.clearLayers();
    };
  });
});

Answer 1

使用

map.removeLayer(addPovertyData);

而不是

addPovertyData.clearLayers();

例如：http://codepen.io/anon/pen/obwZEq

show/hide 使用 mapbox 的地图叠加层的复选框？

Checkbox to show/hide a map overlay using mapbox?

javascript

checkbox

jquery

geojson

mapbox