将水轮廓添加到我的“光”地图框图中

Question

我看到一些地图样式使用了一个名为“水轮廓”的图层。您可以在此图片中看到此图层为水旁边的蓝色轮廓。

我正在使用mapbox中的light-v9样式，我想知道如何将这个图层“导入”到我的地图上，这样我也可以有水轮廓。

以下是我设置地图的方法：

var map = new mapboxgl.Map({
    container: this.mapContainer,
    style: 'mapbox://styles/mapbox/light-v9',
    interactive: true,
    maxZoom: 16,
});

这就是我改变风格的方式：

map.on('load', function () {
    map.setPaintProperty('background','background-color', 'rgb(246, 246, 246)')
    map.setPaintProperty('parks','fill-color', 'rgb(217, 232, 222)')
    map.setPaintProperty('water','fill-color', 'rgb(224, 230, 230)')
    ...
})

Answer 1

看起来该图层来自Mapbox Streets v7矢量图块。如果要从该源创建新的线图层，则需要查询水图层的地图源，然后使用它来创建线图层。例如：

map.addLayer({
    'id': 'water-line-layer',
    'source': 'composite',
    'source-layer': 'water',
    'type': 'line',
    'minzoom': 15,
    'paint': {
        'line-color': '#000000',
        'line-width': 10
    }
}