Mapbox过滤器：想要根据属性键分别显示显示层答案

【问题标题】：Mapbox Filter : Wanting to display display layers separately based on a property keyMapbox过滤器：想要根据属性键分别显示显示层
【发布时间】：2020-02-26 09:07:35
【问题描述】：

以 geojson 集合中的两个对象为例：

{
  "type": "Feature",
 "properties": {
      "name": "Eau minérale Mélodie",
      "id_osm": 7041403159,
      "image": "File:Eau min%C3%A9rale M%C3%A9lodie.jpg",
      "refill" : "yes"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [
        6.1281257,
        46.3431274
      ]
    }
  },
  {
    "type": "Feature",
    "properties": {
      "id_osm": 7041937865,
      "id_wikidata": "Q55169831",
      "image": "File:Alterszentrum%20Bullinger-Hardau.jpg",
      "name": "Fountain by Retirement Home Bullinger-Hardau",
      "mergedOn": "id_wikidata"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [
        8.5098981,
        47.3803762
      ]
    }
  }

我想在单独的图层中显示带有键填充的点。永远不要聚集和不同的颜色。

我试过了：

过滤器：["==", ['get', 'refill']]，无济于事。

最好的方法是什么？

谢谢，

斯图尔特

【问题讨论】：

标签： mapbox geojson

【解决方案1】：

有几种方法可以根据数据中的属性为添加到地图的圆圈设置样式。推荐的做法是添加circle层，其中paint属性的circle-color由has表达式确定：

map.addLayer({
  'id': 'colored-circles',
  'type': 'circle',
  'source': 'points',
  'paint': {
    'circle-radius': 10,
    /**
     * color circles by the refill property, using a 'case' and 'has' expression
     * https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#case
     * https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#has
     */
    'circle-color': [
      'case',
      ['has', 'refill'],
      '#fbb03b',
      /* other */ '#3bb2d0'
     ]
   }
});

完整的实现细节可以在这个 JSFiddle 中找到：https://jsfiddle.net/3r8zxf17/3/。在指示的位置添加您自己的 Mapbox 访问令牌，以查看生成的地图和圆圈。

但是，使用上述方法，圆圈将全部位于同一层中。如果您希望具有refill 属性的所有要素都位于单独的图层中，您可以使用circle-opacity 属性将两个图层添加到地图中，如下所示。

/* Add a circle layer for features with the 'refill' property. */
map.addLayer({
  'id': 'has-refill',
  'type': 'circle',
  'source': 'points',
  'paint': {
    'circle-radius': 10,
    'circle-color': '#fbb03b',
    'circle-opacity': [
      'case',
      ['has', 'refill'],
      1,
      /* other */ 0
    ]
  }
});

/* Add a circle layer for features without the 'refill' property. */
map.addLayer({
  'id': 'no-refill',
  'type': 'circle',
  'source': 'points',
  'paint': {
    'circle-radius': 10,
    'circle-color': '#3bb2d0',
    'circle-opacity': [
      'case',
      ['has', 'refill'],
      0,
      /* other */ 1
    ]
  }
});

完整的代码在这个 JSFiddle 中：https://jsfiddle.net/9apcge3n/。您也可以在此处添加您的 Mapbox 访问令牌以查看结果。

以下是上述两种方法的视觉效果截图：

【讨论】：