Mapbox GL-JS：在标签下添加新的 tileset 覆盖

Question

我有一个要加载到我的地图中的图块集（地图称为 topleftmap）。我希望城市和其他标签加载到图块上，而不是下方 - 有点像 Mapbox 中的这个例子：https://docs.mapbox.com/mapbox-gl-js/example/geojson-layer-in-stack/

如何使用 tilesets 执行此操作？我有一个外部 JS 文件，用于加载像这样的 tilesets：

topleftmapbox.addLayer({
    "id": "currentProduct",
    "type": "raster",
    "source": {
        "type": "raster",
        "tiles": ["tiles/" + productSelection + "/" + productLocation + "/{z}/{x}/{y}.png"],
        "minzoom": 8,
        "maxzoom": 10,
        "scheme": "tms",
        "tileSize": 256,

    }});

所以当然可以正常工作，但标签在瓷砖下面。我在下面尝试过这个（使用 Mapbox 中的示例）但它似乎不起作用：

var layers = topleftmapbox.getStyle().layers;
    // Find the index of the first symbol layer in the map style
    var firstSymbolId;
    for (var i = 0; i < layers.length; i++) {
        if (layers[i].type === 'symbol') {
            firstSymbolId = layers[i].id;
            break;
        }
    }

topleftmapbox.addLayer({
    "id": "currentProduct",
    "type": "raster",
    "source": {
        "type": "raster",
        "tiles": ["tiles/" + productSelection + "/" + productLocation + "/{z}/{x}/{y}.png"],
        "minzoom": 8,
        "maxzoom": 10,
        "scheme": "tms",
        "tileSize": 256,

    },firstSymbolId});

最后，这是一张显示其外观的图片。我的图块略微透明，但标签应该是亮白色，就像远离数据的那些一样。有什么想法吗？

Answer 1

你做的一切都是对的。你只是有一个轻微的语法错误：

},firstSymbolId});

这应该是：

}}, firstSymbolId);

Mapbox GL-JS：在标签下添加新的 tileset 覆盖

Mapbox GL-JS : Adding new tileset overlay under labels

mapbox

mapbox-gl-js