Mapbox GL基础（十五）：初始化地图时的style

项目过程中经常会遇到不需要展示Mapbox默认底图的情况，因此时常自定义底图服务，设置style为自己定义的样式，代码和效果如下（代码中有详细的注解）：

let myStyle = {
  version: 8,
  name: "MapBoxStyle",
  glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  sources: {
    JL1Source: {
      type: "raster",
      scheme: "tms",
      tiles: [
        'https://api.jl1mall.com/getMap/{z}/{x}/{y}?mk=<your mk>&tk=<your tk>'
      ],	
      tileSize: 256,
    },
  },
  layers: [
   {
      id: "JL1影像底图",
      source: "JL1Source",
      type: "raster",
    },
  ],
};
//初始化地图
function initialMap() {
  mapboxgl.accessToken ="<your token>"
  mapBoxMap = new mapboxgl.Map({
    container: "map",
    style: myStyle, //可设置自己的底图服务
    minZoom: 0,
    maxZoom: 18,
    zoom: 5,
    center: [125.2,43.2],
  });
}

存在的问题

在定义底图加载之后，在load事件里面加载其他图层或其他操作。
但是最近在项目执行过程中，发现这样一个问题，由于网络或者服务响应时间的原因，会出现某一张或几张瓦片加载不出来的情况，进而造成load里面的图层加载和其他操作变慢甚至没办法继续进行。

解决方案

针对上面可能出现的问题，对初始化底图图层的位置和时间进行更改，在默认进入底图时的style设置为空，即不再加载任何sources和layers，想要加载的底图服务通过allSoures和addLayer方法进行加载，代码如下：

//设置空的sources和layers
let myStyle = {
  version: 8,
  name: "MapBoxStyle",
  glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  sources: {},
  layers: [],
};
//底图放在load里面进行加载
mapBoxMap.on("load", () => {
  //设置地形
  mapBoxMap.addSource('JL1Source', {
    type: 'raster',
    scheme: 'tms',
    tiles: [
      'https://api.jl1mall.com/getMap/{z}/{x}/{y}?mk=<your mk>&tk=<your tk>'
    ],
    tileSize: 256,
    maxzoom: 18
  })
  mapBoxMap.addLayer({
    id: 'JL1影像底图',
    source: 'JL1Source',
    type: 'raster'
  })
});

总结

本文针对初始化地图时的style的加载位置与时间可能发生的问题与解决方案进行了说明，以后如果遇到新的功能再进行补充，接下来的章节将继续探索Mapbox。
欢迎关注星林社区，文章将同步更新在星林社区中！