如何仅在具有美国世界观的国家边界上设置过滤器？答案

【问题标题】：How to set filter only on country boundaries with US worldview?如何仅在具有美国世界观的国家边界上设置过滤器？
【发布时间】：2021-04-09 15:27:46
【问题描述】：

我正在使用 Mapbox GL 为国家动态着色。有些国家是红色的，有些是绿色的。

为此，我使用 country-boundaries-v1 源，然后使用 country-boundaries 中的 iso_3166-1 数据在使用 country-boundaries 源的图层上设置过滤器。

这是我添加图层的代码：

addLayers (map, layers) {
  layers.forEach((layer) => {
    map.addLayer({
      id: layer.id,
      source: layer.source,
      'source-layer': layer.sourceLayer,
      layout: {
        visibility: 'none'
      },
      type: 'fill',
      paint: {
        'fill-opacity': 0.5
      }
    }, 'country-label')
  })
},

我可以在其中显示我的图层，添加颜色并将我的过滤器设置在 iso_3166-1 代码列表中：

map.setLayoutProperty(state.id, 'visibility', 'visible')
map.setPaintProperty(state.id, 'fill-color', this.layerColor(formattedState))
map.setFilter('positive-countries', ['in', 'iso_3166_1', 'FR', 'BE', 'IN', 'CN', 'JP'])

问题在于，当我在降低不透明度的图层上添加“填充颜色”属性时，具有不同世界观的国家（如中国、日本、印度）因此会有重叠的图层。结果是，一些国家不是有一个不透明度为 0.6 的图层，而是有 3 个不透明度为 0.6 的图层，这使得它们不透明。

我试图添加这个：

map.setFilter('positive-countries', ['match', ['get', 'worldview'], ['all', 'US'], true, false])

希望 Mapbox 只使用美国的世界观，但它不起作用。

这是我的地图截图，你可以看到问题：

如您所见，中国、印度和日本等国家有多个层次，因为这些国家有多种世界观，因此它们看起来与其他国家不同。

有人知道我想做的事是否可行吗？

编辑：

我试过了：

const filters = [
  'any',
  ['in', 'iso_3166_1', 'MA', 'BR'],
  ['==', 'all', ['get', 'worldview']],
  ['in', 'US', ['get', 'worldview']]
]

map.setFilter('positive-countries', filters)

但我收到了这些错误：

mapbox-gl.js:31 Error: layers.positive-countries.filter[2][2]: string, number, or boolean expected, array found
mapbox-gl.js:31 Error: layers.positive-countries.filter[3][2]: string, number, or boolean expected, array found

如果我删除['in', 'iso_3166_1', 'MA', 'BR'],，则不会再出现错误，但我的地图上当然没有应用过滤器。

所以，我尝试了这个：

const filters = [
  'any',
  ['==', 'all', ['get', 'worldview']],
  ['in', 'US', ['get', 'worldview']]
]

map.setFilter(params['id'], filters)
map.setFilter(params['id'], ['in', 'iso_3166_1', 'MA', 'BR'])

但结果与世界观没有过滤器的结果相同......

【问题讨论】：

标签： mapbox mapbox-gl

【解决方案1】：

如果其他人面临同样的问题，这就是解决方案：

const filters = [
  'all',
  ['match', ['get', 'worldview'], ['all', 'US'], true, false],
  ['match', ['get', 'iso_3166_1'], ['MA', 'BR'], true, false]
]

this.map.setFilter(layerId, filters)

只有美国看到的国家/地区才可见

【讨论】：