图标仍然不重叠，而重叠设置为 true

Question

在我的地图框样式中，我有一个用于数据点的自定义图标图像。即使在“位置”选项卡中

icon-allow-overlap

设置为

true

，当缩小到 12 级或更高级别时，其中一个图标会隐藏。

数据点通过geojson加载：

var geojson = {
    "features": [
        {
          "type": "Feature",
          "properties": {
            "title": "Name of location",
            "description": "address"
          },
          "geometry": {
            "coordinates": [long, lat],
            "type": "Point"
          }
        },
        { more features here }
    ],
};

<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
<script>
    mapboxgl.accessToken = 'token';
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'my style',
        center: [long, lat],
        zoom: 11.5
    });
    map.scrollZoom.disable();
</script>

为了更好地衡量，我还尝试向标签添加文本（空字符串），并将

text-allow-overlap

设置为

true

，但无济于事。聚类不是我想要的。

我发现了几个其他问题描述了这个问题（即使我没有使用图块而是geojson），但是给定的解决方案都没有改变我的用例。

我错过了什么？

Answer 1

找到了解决方法。 现在，我不再将数据点作为图层添加到 Mapbox Studio 样式，而是将它们添加到我的嵌入式地图用户端。

首先使功能可用：

var geojson = {
    "features": [
        {
            "type": "Feature",
            "properties": {
                "title": "Name of feature",
                "anything": "anything you like, really",
                "this_data": "was used to add information to map popups"
            },
            "geometry": {
                "coordinates": [long, lat],
                "type": "Point"
            }
        }
    ]
};

然后将它们添加到地图中：

geojson.features.forEach(function(marker) {
    var el = document.createElement('div');
    el.className = 'marker';
    new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);
});

最后按照你喜欢的方式设置div的样式，例如：

.marker {
    background-color: #fff;
    border-radius: 100%;
    width: 16px;
    height: 16px;
    border: 2px solid #000;
}

因为它们是在嵌入地图后在 html 中定义的，所以根据我的经验，它们不会在不同的缩放级别隐藏。

Answer 2

这似乎成功了：

在 Mapbox 地图上，无论缩放级别如何，如何保持图层始终可见？

        "icon-allow-overlap": true,
        "icon-ignore-placement": true,
        "text-allow-overlap": true,
        "text-ignore-placement": true,