如果在项目之初我们没有设计好图层的问题,那么大概率我们会与到预期图层在别的图层下面的问题,这是需要使用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原理是相同的不过是在图层创建的时候变化位置。