使用 .setFilter 和 Mapbox API 的 Javascript 问题

Question

我正在使用 Mapbox 的 API 在 map 上加载标记，并且我希望根据是否选中与其标记颜色对应的复选框来显示不同的标记。

我的 data.geoJSON 文件看起来像这样:

{ 
  "type": "FeatureCollection",
  "features": [ { 
    "type": "Feature",
    "geometry": { 
      "type": "Point", 
      "coordinates": [13.353323936462402, 38.11200434622822]
    },
    "properties": {
      "marker-color": "#9c89cc", 
      "marker-color": "#3b5998"
    }
  } ]
}

我的 HTML 看起来像这样:

<div id='filters' class='ui-select'>
  <input type='checkbox' checked=checked class='filter' name='filter' id='blue' value='blue'/>
  <label for='blue'>
    Blue marker checkbox
  </label>
</div>

<div id='map'></div>

但是，我无法弄清楚如何让 .change() 函数在内部 .setFilter( function(feature) {} 工作)。

var featureLayer = L.mapbox.featureLayer()
  .loadURL('/map/getjson/')
  .addTo(map)
  .setFilter(
    function (feature) {
      //$("input[type='checkbox']").click(function() {
        if ($("#blue").prop("checked")) {
          return (feature.properties["marker-color"] === "#3b5998");
        } else {
          return false;
        }
      //});
    }
  );

基本上，如果 return(feature.properties["marker-color"] === "#3b5998") 计算结果为 true，则具有指定集的标记将显示功能。否则，标记将不会显示。

This是 Mapbox 提供的一些示例 javascript(不使用 jQuery)。

map.featureLayer.setFilter(function(feature) {
  return (feature.properties['marker-symbol'] in enabled);
}

但是我对如何在这里使用 .change() 或 .click() 感到困惑，因为我希望标记的显示取决于它们是否相应的复选框被选中。

我尝试使用.click():

function (feature) {
  //$("input[type='checkbox']").click(function() {
    if ($("#blue").prop("checked")) {
      return (feature.properties["marker-color"] === "#3b5998");
    } else {
      return false;
    }
  //});
}

...但这不起作用!我想我不能在这个函数中使用 .click() 吗？

Answer 1

好吧，回顾一下时间维度:

• 调用setFilter()将立即设置标记过滤器。
• jQuery 的 .click() 将在有人点击时触发。

因此，在 setFilter 内部使用 click() 的想法是倒退的。做相反的事情:

var featureLayer = L.mapbox.featureLayer()
  .loadURL('/map/getjson/')
  .addTo(map)
  // initially set the filter
  .setFilter(showBlueIfChecked);

$("input[type='checkbox']").click(function() {
  // refilter items when people click the checkbox
  featureLayer.setFilter(showBlueIfChecked);
});

function showBlueIfChecked(feature) {
  if ($("#blue").prop("checked")) {
    return (feature.properties["marker-color"] === "#3b5998");
  } else {
    return false;
  }
}