如何按状态过滤功能

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

没有必要创建两个单独的层来过滤a点是否已打开。下面是一些代码，展示了如何添加一个图层，该图层使用属性 "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. I've linked the documentation to each relevant expression here: match, to-string, and get。

这是一个 JSFiddle，其中向地图添加了两个图层：https://jsfiddle.net/hpkzrm4n/。 "opened": true 的点显示为红色，"opened": false 的点显示为蓝色。请注意，您需要在指示的位置添加自己的 Mapbox 访问令牌才能查看结果。这是一个截图，作为预览：

如何按状态过滤功能

How filter features by status

mapbox

mapbox-gl-js