基于数组的 Mapbox 过滤器

Question

我有以下数组：

test = ['a', 'b', 'c']

如果数组中存在地图上的对象，我想过滤它们。是否可以将此过滤器与数组一起使用：

mapObj.setFilter("hover", ['all', ["in", "letter", test[0]]]);

或者，过滤数组中存在的对象的最佳方法是什么？

Answer 1

嗯，mapbox 的setFilter 函数不接受数组作为参数。您将需要使用适合他们 API 的格式，这基本上在此处“设置成员资格过滤器”下进行了描述。

https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#filter

要过滤多个变量，Set Membership Filters 需要特定格式，即

["in", key, v0, ..., vn]

其中 v0 到 vn 是您的数组中产生的元素

["in", "letter", "a", "b", "c"]

可以编写一个函数将数组转换为这种格式。可能是这样的：

function buildFilter(arr) {
  var filter = ['in', 'letter'];

  if (arr.length === 0) {
     return filter;
  }
  
  for(var i = 0; i < arr.length; i += 1) {
    filter.push(arr[i]);
  }
  
  return filter;
}

var filterBy = ['a', 'b', 'c'];
var myFilter = buildFilter(filterBy);

console.log(myFilter);

// then you would use it like this:
// mapObj.setFilter("hover", buildFilter(['a', 'b', 'c']));

Answer 2

实际上有一种本机方法可以做到这一点，如 "Filter features within mapview" example 所示。

您必须使用元素的唯一属性（最好是唯一 ID）。在您的情况下，假定属性为 "letter"，代码将如下所示：

mapObj.setFilter('hover', ['match', ['get', 'letter'], test, true, false])

为了更好地理解代码，请查看 documentation about the match expression。

Answer 3

您还可以使用：

['in', 'letter'].concat(test);

其中 test 是您的值数组。

Answer 4

["in", "letter", ...test] ES6

应该可以。

Answer 5

我像 this 一样将它与 .map 一起使用。我认为你应该避免使用额外的连接方法。

         this.$store.map.setFilter(layerName, [
          'match',
          ['get', filterPropertyName],
          currentValues.map((feature) => {
            return feature;
          }),
          true,
          false
        ])

基于数组的 Mapbox 过滤器

Mapbox filters based on array

mapbox

mapbox-gl

mapbox-gl-js