mapbox实现底图切换

贴个群号

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

底图配置文件

const token ='你的token'
//负载均衡解决天地图调用经典底图切片加载丢失，418与404报错问题
const servers = [...Array(8).keys()];
const rand = (min = 0, max = 1) => (
  Math.round(Math.random() * (max - min) + min)
)
const serversProxy = new Proxy(servers, {
    get(target, prop){
        if (prop === 'server') {
            return target[rand(1, target.length - 1)]
        }
        return target[prop]
    }
})
const tiandituHeader = 'https://t'+serversProxy.server+'.tianditu.gov.cn/'
const tiandituCenter = '/wmts?&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER='
const tiandituEnd = '&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles&tk='
export const baseMapLayer ={
    '影像':{
        map:{
            source:{
                id:'tdtImg',
                source:{
                    "type": "raster",
                    'tiles': [
                        tiandituHeader+'img_w'+tiandituCenter+'img'+tiandituEnd+token,
                    ],
                    'tileSize': 256
                }
            },
            layer:{
                "id": "tdtImg",
                "type": "raster",
                "source": "tdtImg",
                "minzoom": 0,
                "maxzoom": 17
            }
        },
        note:{
            source:{
                id:'tdtCia',
                source:{
                    "type": "raster",
                    'tiles': [
                        tiandituHeader+'cia_w'+tiandituCenter+'cia'+tiandituEnd+token,
                    ],
                    'tileSize': 256
                }
            },
            layer:{
                "id": "tdtCia",
                "type": "raster",
                "source": "tdtCia",
                "minzoom": 0,
                "maxzoom": 17
            }
        },
    },
    '经典':{
        map:{
            source:{
                id:'tdtVec',
                source:{
                    "type": "raster",
                    'tiles': [
                        tiandituHeader+'vec_w'+tiandituCenter+'vec'+tiandituEnd+token,
                    ],
                    'tileSize': 256
                }
            },
            layer:{
                "id": "tdtVec",
                "type": "raster",
                "source": "tdtVec",
                "minzoom": 0,
                "maxzoom": 17
            }
        },
        note:{
            source:{
                id:'tdtCva',
                source:{
                    "type": "raster",
                    'tiles': [
                        tiandituHeader+'cva_w'+tiandituCenter+'cva'+tiandituEnd+token,
                    ],
                    'tileSize': 256
                }
            },
            layer:{
                "id": "tdtCva",
                "type": "raster",
                "source": "tdtCva",
                "minzoom": 0,
                "maxzoom": 17
            }
        },
    },
    '地形':{
        map:{
            source:{
                id:'tdtTer',
                source:{
                    "type": "raster",
                    'tiles': [
                        tiandituHeader+'ter_w'+tiandituCenter+'ter'+tiandituEnd+token,
                    ],
                    'tileSize': 256
                }
            },
            layer:{
                "id": "tdtTer",
                "type": "raster",
                "source": "tdtTer",
                "minzoom": 0,
                "maxzoom": 17
            }
        },
        note:{
            source:{
                id:'tdtCta',
                source:{
                    "type": "raster",
                    'tiles': [
                        tiandituHeader+'cta_w'+tiandituCenter+'cta'+tiandituEnd+token,
                    ],
                    'tileSize': 256
                }
            },
            layer:{
                "id": "tdtCta",
                "type": "raster",
                "source": "tdtCta",
                "minzoom": 0,
                "maxzoom": 17
            }
        },
    }
}

初始化底图

        mapboxgl.accessToken = '你的token';
        const style = {
          container: this.mapId,
          projection:'globe',
          // style: 'mapbox://styles/mapbox/streets-zh-v1',
          style: {
            version: 8,
            center: [110, 36],
            zoom: 3,
            "sprite": baseUrlMVT+tilesUrlDC+"/sprites/sprite",
            "glyphs":  baseUrlMVT+tilesUrlDC+"/fonts/{fontstack}/{range}.pbf",
            "version": 8,
            "sources": {
                'tdtImg':baseMapLayer['影像'].map.source.source,
                'tdtCia':baseMapLayer['影像'].note.source.source
                // 'tdtVec':baseMapLayer['经典'].map.source.source,
                // 'tdtCva':baseMapLayer['经典'].note.source.source
            },
            "layers": [
              baseMapLayer['影像'].map.layer,
              baseMapLayer['影像'].note.layer
              // baseMapLayer['经典'].map.layer,
              // baseMapLayer['经典'].note.layer
            ],
          },
          maxZoom: 19.9,
          minZoom: 0.1,
          // dragRotate: false,
          trackResize: true,
          attributionControl: false,
          preserveDrawingBuffer: true,
          renderWorldCopies: true, // 地图不重复
          locale: {
            'NavigationControl.ZoomIn': '放大',
            'NavigationControl.ZoomOut': '缩小'
          }
        }
        //存一份旧的底图，用来进行moverlayer，来当beforeLayer
        this.baseMapId = {'mapId':baseMapLayer['影像'].map.source.id,'noteId':baseMapLayer['影像'].note.source.id}
        
        const map = this.map = new mapboxgl.Map(style)

底图切换方法

type就是经典，影像这几个文字

    baseMapsChange(type){
        console.log(type,this.map)
        //选到同样的底图了那就不操作
        if(this.map.getSource(baseMapLayer[type].map.source.id)){
        }else{
            //选到别的底图了，先添加新的底图
            this.map.addSource(baseMapLayer[type].map.source.id,baseMapLayer[type].map.source.source)
            this.map.addLayer(baseMapLayer[type].map.layer)
            this.map.addSource(baseMapLayer[type].note.source.id,baseMapLayer[type].note.source.source)
            this.map.addLayer(baseMapLayer[type].note.layer)
            //移动新底图到旧底图前面，保证底图都是在最底层
            this.map.moveLayer(baseMapLayer[type].map.source.id,this.baseMapId.mapId)
            this.map.moveLayer(baseMapLayer[type].note.source.id,this.baseMapId.noteId)
            //移除旧底图
            this.map.removeLayer(this.baseMapId.mapId)
            this.map.removeLayer(this.baseMapId.noteId)
            this.map.removeSource(this.baseMapId.mapId)
            this.map.removeSource(this.baseMapId.noteId)
            this.baseMapId = {'mapId':baseMapLayer[type].map.source.id,'noteId':baseMapLayer[type].note.source.id}
        }
    }