问使用.setFilter和Mapbox的Javascript问题
EN

Stack Overflow用户

提问于 2014-06-22 18:08:17

回答 2查看 1.8K关注 0票数 1

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

我的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，则将显示带有指定功能集的标记。否则，标记就不会显示。

这是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()？

javascript

jquery

mapbox

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-06-23 11:33:09

好吧，那么回顾一下时间维度：

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

因此，在click()中使用setFilter的想法是反向的。做相反的事：

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;
  }
}

票数 1

Stack Overflow用户

发布于 2014-06-22 19:23:14

对于事件处理程序，请尝试如下

function (feature){
    $('.filter').on('change', function(){
        alert($(this).val() + " has changed"); //You can remove this line after testing
        //do stuff to map
    })
}