Mapbox GL加载在线瓦片地图

由于Mapbox 国内的服务器实在是很不稳定,在某些网络环境下总是无法访问其在线地图,所以需要需要脱离Mapbox平台不在依赖代码里面的accessToken,加载其他的在线瓦片底图。

修改style配置

Mapbox GL的map对象中的style是一个必需属性,demo中的

  • mapbox://styles/mapbox/streets-v10
  • mapbox://styles/mapbox/outdoors-v10
    都是一个url形式,其实这个参数也可以传入一个json对象,这个对象定义了地图的可视化样式。我们通过改造这个对象来实现加载其他在线地图的功能
    通过Mapbox GL 文档中对于style reference的说明作出如下改动:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    this.map = new mapboxgl.Map({
    container: 'map', // container id
    style: {
    "version": 8, // Style specification version number. Must be 8.
    "name": "customMap",// A human-readable name for the style.
    "sources": {}, // Data source specifications.
    "layers": [] //Layers will be drawn in the order of this array.
    },
    center: [116.406658,39.912363], // starting position [lng, lat]
    zoom: 9, // starting zoom
    })

这样设置的目的是为了让地图初始化的时候不去加载任何的图层

添加raster资源

Mapbox GL提供了一种Source类型 raster 可以让我们添加瓦片

1
2
3
4
5
6
7
8
9
this.map.addSource('geoq-map-source',
{
"type": "raster",
'tiles': [
"https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
],
'tileSize': 256
},
)

添加图层

1
2
3
4
5
6
7
this.map.addLayer({
"id": "geoq-map-layer",
"type": "raster",
"source": "geoq-map-source",
"minzoom": 0,
"maxzoom": 22
})

添加效果