Question

我正在使用Mapbox创建我的第一张地图，我希望能够按类别过滤标记。我在mapbox文档页面上关注此示例：

https://www.mapbox.com/mapbox.js/example/v1.0.0/multiple-marker-filters/

我为每个标记都有一个属性，其中包含以下键：CAT_CODE。我似乎无法让我的传奇出现，所以我可以关闭和打开标记。

任何人都有线索吗？

L.mapbox.accessToken = 'pk.eyJ1IjoiZG9zcyIsImEiOiI1NFItUWs4In0.-9qpbOfE3jC68WDUQA1Akg';
var map = L.mapbox.map('map', 'mapbox.light');

var featureLayer = {
 "type": "FeatureCollection",
 "features": [
  {
  "type": "Feature",
  "properties": {
    "marker-color": "#7e7e7e",
    "marker-size": "medium",
    "marker-symbol": "heliport",
    "CAT_CODE": "12311"
  },
  "geometry": {
    "type": "Point",
    "coordinates": [
      46.40625,
      53.54030739150022
    ]
  }
},
{
  "type": "Feature",
  "properties": {
    "marker-color": "#7e7e7e",
    "marker-size": "medium",
    "marker-symbol": "",
    "CAT_CODE": "1231566"
  },
  "geometry": {
    "type": "Point",
    "coordinates": [
      58.00781249999999,
      55.97379820507658
    ]
  }
},
{
  "type": "Feature",
  "properties": {
    "marker-color": "#7e7e7e",
    "marker-size": "medium",
    "marker-symbol": "",
    "CAT_CODE": "12311"
  },
  "geometry": {
    "type": "Point",
    "coordinates": [
      45.3515625,
      62.431074232920906
    ]
  }
 }
 ]
};

// Find and store a variable reference to the list of filters.
var filters = document.getElementById('filters');

 // Wait until the marker layer is loaded in order to build a list of  possible
// types. If you are doing this with another featureLayer, you should change
// map.featureLayer to the variable you have assigned to your  featureLayer.
map.featureLayer.on('ready', function() {
// Collect the types of symbols in this layer. you can also just
// hardcode an array of types if you know what you want to filter on,
// like var types = ['foo', 'bar'];
var typesObj = {}, types = [];
var features = map.featureLayer.getGeoJSON().features;
for (var i = 0; i < features.length; i++) {
typesObj[features[i].properties['CAT_CODE']] = true;
}
for (var k in typesObj) types.push(k);

var checkboxes = [];
// Create a filter interface.
for (var i = 0; i < types.length; i++) {
// Create an an input checkbox and label inside.
var item = filters.appendChild(document.createElement('div'));
var checkbox = item.appendChild(document.createElement('input'));
var label = item.appendChild(document.createElement('label'));
checkbox.type = 'checkbox';
checkbox.id = types[i];
checkbox.checked = true;
// create a label to the right of the checkbox with explanatory text
label.innerHTML = types[i];
label.setAttribute('for', types[i]);
// Whenever a person clicks on this checkbox, call the update().
checkbox.addEventListener('change', update);
checkboxes.push(checkbox);
}

// This function is called whenever someone clicks on a checkbox and changes
// the selection of markers to be displayed.
function update() {
var enabled = {};
// Run through each checkbox and record whether it is checked. If it is,
// add it to the object of types to display, otherwise do not.
for (var i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].checked) enabled[checkboxes[i].id] = true;
}
map.pois.setFilter(function(feature) {
  // If this symbol is in the list, return true. if not, return false.
  // The 'in' operator in javascript does exactly that: given a string
  // or number, it says if that is in a object.
  // 2 in { 2: true } // true
  // 2 in { } // false
  return (feature.properties['CAT_CODE'] in enabled);
});
}
});

Answer 1

您从未将GeoJSON加载到地图的featureLayer上，只是将其保留为原始形式的对象。我做了一些重命名并在此fiddle中为您修复了它。

Mapbox：如何按类别过滤标记？

1 个答案: