如何按状态过滤功能

Question

我想在我的地图上显示群集层中是否按打开或不打开的过滤条件。怎么办我应该创建两个图层吗？

一个带过滤器：filter["has", "opened"]，另一个带过滤器：filter["!", ["has", "opened"]]？

export const clusterLayerOpened = {
    id: "clusters",
    type: "circle",
    source: "earthquakes",
    filter: ["has", "opened"],
    paint: {
        "circle-color": [ "step", ["get", "opened"], "#51bbd6",100,"#f1f075",750,"#f28cb1", ],
        "circle-radius": ["step", ["get", "opened"], 20, 100, 30, 750, 40],
    },
};

export const clusterLayerNoOpened = {
    id: "clusters",
    type: "circle",
    source: "earthquakes",
    filter: ["!", ["has", "opened"]],
    paint: {
        "circle-color": [ "step", ["get", "opened"], "#51bbd6",100,"#f1f075",750,"#f28cb1", ],
        "circle-radius": ["step", ["get", "opened"], 20, 100, 30, 750, 40],
    },
};

这是我的geojson：

{
    "type": "FeatureCollection",
    "features": [{
            "type": "Feature",
            "properties": {
                "id": "ak16994521",
                "mag": 2.3,
                "time": 1507425650893,
                "felt": null,
                "tsunami": 0,
                "opened": true
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-151.5129, 63.1016, 0.0]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "id": "ak16994519",
                "mag": 1.7,
                "time": 1507425289659,
                "felt": null,
                "tsunami": 0,
                "opened": false
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-150.4048, 63.1224, 105.5]
            }
        }
    ]
}

Answer 1

不必创建两个单独的图层来根据该点是否已打开进行过滤。以下代码显示了如何添加一个图层，该图层显示具有属性"opened": true的所有点，并隐藏具有"opened": false的所有点：

map.addLayer({
  'id': 'opened',
  'type': 'circle',
  'source': 'points',
  'paint': {
    'circle-radius': 10,
    'circle-opacity': ["match", ["to-string", ["get", "opened"]], 'true', 1 , 'false', 0, 0]
  }
});

要改为显示具有属性"opened": false的所有点，可以将'circle-opacity'表达式切换为：

["match", ["to-string", ["get", "opened"]], 'true', 0 , 'false', 1, 0]

此代码利用了一些Mapbox expressions。我已将文档链接到此处的每个相关表达式：match，match和to-string。

这里是一个JSFiddle，其中在地图上添加了两层：to-string。具有get的点以红色显示，具有get的点以蓝色显示。请注意，您需要在指示的位置添加自己的Mapbox访问令牌，才能查看结果。这是一个屏幕截图，作为预览：

https://jsfiddle.net/hpkzrm4n/