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

Question

我正在使用 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'])

问题是，当我在不透明度降低的图层上添加 'fill-color' 属性时，具有不同世界观的国家（如中国、日本、印度）因此具有重叠的图层。结果是一些国家没有一个不透明度为 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'])

但是世界观上没有过滤结果是一样的...

Answer 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)

然后只有美国看到的国家可见

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

How to set filter only on country boundaries with US worldview?

mapbox

mapbox-gl