Mapbox Filter : 想要根据属性键单独显示显示图层

Question

使用 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']]，无济于事。

最好的方法是什么？

谢谢，

斯图尔特

Answer 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 访问令牌以在此处查看结果。

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

Mapbox Filter : 想要根据 属性 键单独显示显示图层

Mapbox Filter : Wanting to display display layers separately based on a property key

geojson

mapbox

Mapbox Filter : 想要根据属性键单独显示显示图层