背景

很多Giser同行在学习mapboxgl开发时大概率会遇到这个问题：mapbox怎么跳过token验证？mapbox怎么离线使用？百度搜了一大堆，很多回答都不靠谱。笔者已经遇到过n多小伙伴有这样的疑惑了，于是写下这篇文章统一回复，以后再遇到有人问直接甩链接，以便为本站增加流量😏；

❌token验证报错：

解决方法：

在引入mapboxgl后，添加下面这行代码：

1
mapboxgl.baseApiUrl = ""

demo：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      mapboxgl.baseApiUrl = "" //跳过token验证
      const map = new mapboxgl.Map({
        container: "map",
        style: {
          center:[109,31],
          zoom:2,
          version: 8,
          sources: {
            satellite: {
              type: "raster",
              tiles: [
                 //arcgis底图，可改为自己的底图切片服务路径
                "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png",
              ],
            },
          },
          layers: [
            {
              id: "satellite",
              type: "raster",
              source: "satellite",
            },
          ],
        },
        projection: "globe",
      })
      
      //地图加载完成后设置大气效果美化(非必须)
      map.on("style.load", () => {
        map.setFog({
          range: [-1, 2],
          "horizon-blend": 0.05,
          color: "rgba(0,0,0,0)",
          "high-color": "#fff",
          "space-color": "#0B1026",
          "star-intensity": 0.5,
        })
      })
    </script>
  </body>
</html>