mapbox图层层级问题

如果在项目之初我们没有设计好图层的问题，那么大概率我们会与到预期图层在别的图层下面的问题，这是需要使用addlayer、movelayer方法来调整图层的位置了。

一般而言先添加的图层在显示的时候在后添加图层的下面，例如下面的代码：

map.addLayer({
    'id': 'wholesearch_pologonborder_layer',
    'type': 'line',
    'source': 'wholeSearch_geojson_border',
    'paint': {
        'line-color': '#cedbf2',
        'line-width': 2,
        'line-dasharray': [2, 1],
    },
    'layout': {
        'visibility': 'visible'
    }
})
map.addLayer({
    'id': 'wholesearch_line_layer',
    'type': 'line',
    'source': 'wholeSearch_geojson_info',
    'paint': {
        'line-color': '#f6cccc',
        'line-width': 3,
        'line-dasharray': [2, 2]
    },
    'layout': {
        'visibility': 'visible'
    }
})

我用map.getStyle() 方法获取mapbox的所有图层：

console.log('图层', map.getStyle())

 可以看到'wholesearch_pologonborder_layer' 在 'wholesearch_line_layer' 之前。

如果我们调用movelayer 方法可以看到二者的位置发生了变化，会将第一个参数的图层放到后一个参数之前。

addLayer原理是相同的不过是在图层创建的时候变化位置。