mapbox控制点线面图层，点永远在线上，线永远在面上

贴个群号

WebGIS学习交流群461555818，欢迎大家。

思路

核心思路就是加载底图的时候，添加三个空的定位图层，分别是点线面，然后以后再加点线面图层的时候，用moveLayer这个函数，将点线面图层都放在这个定位图层的下面，这样就可以保证点永远在线上，线永远在面上了。

代码实现

这是我的点线面定位图层，空的。加载底图之后，就立马把这三个空的定位图层加上去。

export const controlLocationLayer = [
    {
        id: "pointLocation",
        name:'点',
        source: "pointLocation",
        type:'circle',
        paint: {
        },
        layout: {
            visibility: 'visible'
        },
    },
    {
        id: "lineLocation",
        name:'线',
        source: "lineLocation",
        type:'line',
        paint: {
        },
        layout: {
            visibility: 'visible'
        },
    },
    {
        id: "fillLocation",
        name:'面',
        source: "fillLocation",
        type:'fill',
        paint: {
        },
        layout: {
            visibility: 'visible'
        },
    }
]

然后再添加我们的数据的时候，调用这个方法

      controlPointLineFillLocation(data){
        this.map.on('style.load',e=>{
          switch(data.type){
            case 'symbol':
              this.map.moveLayer(data.id,'pointLocation')
              break
            case 'line':
              this.map.moveLayer(data.id,'lineLocation')
              break
            case 'fill':
              this.map.moveLayer(data.id,'fillLocation')
              break
          }
        })
      },