【项目实战】基于离线部署Mapbox的地理信息系统（持续更新）

一、基于Element-Plus的Vue3框架搭建

由于Vue3框架的搭建部分较为简单，故本文对此不作赘述，可参考：Vue3.0项目实战+ElementUI从入门到实战。

二、天地图Token的申请

进入天地图官网，按流程申请即可。

三、Mapbox的离线部署

1.Mapbox-gl的引入

终端执行：

npm i maxbox-gl

在head标签中引入：

<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.0/mapbox-gl.css' rel='stylesheet' />

2.Mapbox-gl的离线部署

先来看官网的一个例子：

mapboxgl.accessToken = '<your access token here>';
const map = new mapboxgl.Map({
    container: 'map', // container ID
    style: 'mapbox://styles/mapbox/streets-v12', // style URL
    center: [-74.5, 40], // starting position [lng, lat]
    zoom: 9 // starting zoom
});

在地图加载成功时，可以通过F12的Network看到该例子调用Mapbox数据的请求，因为这些请求的存在，使得我们需要申请Mapbox的Token，所以我们首先要做的就是找出这些请求分别对应哪些内容，并将其本地化。

2.1 本地化配置

需要实现本地化配置的部分为sprite（图标）、glyphs（地图标注字体）、sources（数据源）、layers（图层），由于项目要求使用天地图作为数据源，且图层可以通过配置信息实现，故最终需要实现的部分为sprite（图标）、glyphs（地图标注字体）。

2.1.1 sprite（图标）

点开Mapbox的图标请求，分别为png文件的请求以及json文件的请求。复制png文件请求的URL地址，粘贴到浏览器后另存至项目的public文件夹下，更名为[email protected]即可。
png图片
复制json文件请求的内容，在项目的public文件夹下创建[email protected]，粘贴进去即可。

{"airfield-15":{"width":21,"height":21,"x":0,"y":0,"pixelRatio":1,"visible":true},"airport-15":{"width":21,"height":21,"x":21,"y":0,"pixelRatio":1,"visible":true},"alcohol-shop-15":{"width":21,"height":21,"x":0,"y":21,"pixelRatio":1,"visible":true},"american-football-15":{"width":21,"height":21,"x":21,"y":21,"pixelRatio":1,"visible":true},"amusement-park-15":{"width":21,"height":21,"x":42,"y":0,"pixelRatio":1,"visible":true},"aquarium-15":{"width":21,"height":21,"x":63,"y":0,"pixelRatio":1,"visible":true},"art-gallery-15":{"width":21,"height":21,"x":42,"y":21,"pixelRatio":1,"visible":true},"attraction-15":{"width":21,"height":21,"x":63,"y":21,"pixelRatio":1,"visible":true},"bakery-15":{"width":21,"height":21,"x":0,"y":42,"pixelRatio":1,"visible":true},"bank-15":{"width":21,"height":21,"x":21,"y":42,"pixelRatio":1,"visible":true},"bar-15":{"width":21,"height":21,"x":42,"y":42,"pixelRatio":1,"visible":true},"basketball-15":{"width":21,"height":21,"x":63,"y":42,"pixelRatio":1,"visible":true},"beach-15":{"width":21,"height":21,"x":0,"y":63,"pixelRatio":1,"visible":true},"beer-15":{"width":21,"height":21,"x":21,"y":63,"pixelRatio":1,"visible":true},"bicycle-15":{"width":21,"height":21,"x":42,"y":63,"pixelRatio":1,"visible":true},"bowling-alley-15":{"width":21,"height":21,"x":63,"y":63,"pixelRatio":1,"visible":true},"bridge-15":{"width":21,"height":21,"x":84,"y":0,"pixelRatio":1,"visible":true},"cafe-15":{"width":21,"height":21,"x":105,"y":0,"pixelRatio":1,"visible":true},"campsite-15":{"width":21,"height":21,"x":126,"y":0,"pixelRatio":1,"visible":true},"car-15":{"width":21,"height":21,"x":147,"y":0,"pixelRatio":1,"visible":true},"car-rental-15":{"width":21,"height":21,"x":84,"y":21,"pixelRatio":1,"visible":true},"car-repair-15":{"width":21,"height":21,"x":105,"y":21,"pixelRatio":1,"visible":true},"casino-15":{"width":21,"height":21,"x":126,"y":21,"pixelRatio":1,"visible":true},"castle-15":{"width":21,"height":21,"x":147,"y":21,"pixelRatio":1,"visible":true},"cemetery-15":{"width":21,"height":21,"x":84,"y":42,"pixelRatio":1,"visible":true},"charging-station-15":{"width":21,"height":21,"x":105,"y":42,"pixelRatio":1,"visible":true},"cinema-15":{"width":21,"height":21,"x":126,"y":42,"pixelRatio":1,"visible":true},"clothing-store-15":{"width":21,"height":21,"x":147,"y":42,"pixelRatio":1,"visible":true},"college-15":{"width":21,"height":21,"x":84,"y":63,"pixelRatio":1,"visible":true},"communications-tower-15":{"width":21,"height":21,"x":105,"y":63,"pixelRatio":1,"visible":true},"confectionery-15":{"width":21,"height":21,"x":126,"y":63,"pixelRatio":1,"visible":true},"convenience-15":{"width":21,"height":21,"x":147,"y":63,"pixelRatio":1,"visible":true},"dentist-15":{"width":21,"height":21,"x":0,"y":84,"pixelRatio":1,"visible":true},"doctor-15":{"width":21,"height":21,"x":21,"y":84,"pixelRatio":1,"visible":true},"dog-park-15":{"width":21,"height":21,"x":42,"y":84,"pixelRatio":1,"visible":true},"drinking-water-15":{"width":21,"height":21,"x":63,"y":84,"pixelRatio":1,"visible":true},"embassy-15":{"width":21,"height":21,"x":84,"y":84,"pixelRatio":1,"visible":true},"farm-15":{"width":21,"height":21,"x":105,"y":84,"pixelRatio":1,"visible":true},"fast-food-15":{"width":21,"height":21,"x":126,"y":84,"pixelRatio":1,"visible":true},"fire-station-15":{"width":21,"height":21,"x":147,"y":84,"pixelRatio":1,"visible":true},"fitness-centre-15":{"width":21,"height":21,"x":0,"y":105,"pixelRatio":1,"visible":true},"fuel-15":{"width":21,"height":21,"x":21,"y":105,"pixelRatio":1,"visible":true},"furniture-15":{"width":21,"height":21,"x":42,"y":105,"pixelRatio":1,"visible":true},"garden-15":{"width":21,"height":21,"x":63,"y":105,"pixelRatio":1,"visible":true},"globe-15":{"width":21,"height":21,"x":84,"y":105,"pixelRatio":1,"visible":true},"golf-15":{"width":21,"height":21,"x":105,"y":105,"pixelRatio":1,"visible":true},"grocery-15":{"width":21,"height":21,"x":126,"y":105,"pixelRatio":1,"visible":true},"harbor-15":{"width":21,"height":21,"x":147,"y":105,"pixelRatio":1,"visible":true},"hardware-15":{"width":21,"height":21,"x":0,"y":126,"pixelRatio":1,"visible":true},"heliport-15":{"width":21,"height":21,"x":21,"y":126,"pixelRatio":1,"visible":true},"horse-riding-15":{"width":21,"height":21,"x":42,"y":126,"pixelRatio":1,"visible":true},"hospital-15":{"width":21,"height":21,"x":63,"y":126,"pixelRatio":1,"visible":true},"ice-cream-15":{"width":21,"height":21,"x":84,"y":126,"pixelRatio":1,"visible":true},"information-15":{"width":21,"height":21,"x":105,"y":126,"pixelRatio":1,"visible":true},"jewelry-store-15":{"width":21,"height":21,"x":126,"y":126,"pixelRatio":1,"visible":true},"laundry-15":{"width":21,"height":21,"x":147,"y":126,"pixelRatio":1,"visible":true},"library-15":{"width":21,"height":21,"x":0,"y":147,"pixelRatio":1,"visible":true},"lodging-15":{"width":21,"height":21,"x":21,"y":147,"pixelRatio":1,"visible":true},"mobile-phone-15":{"width":21,"height":21,"x":42,"y":147,"pixelRatio":1,"visible":true},"monument-15":{"width":21,"height":21,"x":63,"y":147,"pixelRatio":1,"visible":true},"mountain-15":{"width":21,"height":21,"x":84,"y":147,"pixelRatio":1,"visible":true},"museum-15":{"width":21,"height":21,"x":105,"y":147,"pixelRatio":1,"visible":true},"music-15":{"width":21,"height":21,"x":126,"y":147,"pixelRatio":1,"visible":true},"optician-15":{"width":21,"height":21,"x":147,"y":147,"pixelRatio":1,"visible":true},"park-15":{"width":21,"height":21,"x":168,"y":0,"pixelRatio":1,"visible":true},"parking-15":{"width":21,"height":21,"x":189,"y":0,"pixelRatio":1,"visible":true},"parking-garage-15":{"width":21,"height":21,"x":210,"y":0,"pixelRatio":1,"visible":true},"pharmacy-15":{"width":21,"height":21,"x":231,"y":0,"pixelRatio":1,"visible":true},"picnic-site-15":{"width":21,"height":21,"x":252,"y":0,"pixelRatio":1,"visible":true},"pitch-15":{"width":21,"height":21,"x":273,"y":0,"pixelRatio":1,"visible":true},"place-of-worship-15":{"width":21,"height":21,"x":294,"y":0,"pixelRatio":1,"visible":true},"playground-15":{"width":21,"height":21,"x":315,"y":0,"pixelRatio":1,"visible":true},"police-15":{"width":21,"height":21,"x":168,"y":21,"pixelRatio":1,"visible":true},"post-15":{"width":21,"height":21,"x":189,"y":21,"pixelRatio":1,"visible":true},"prison-15":{"width":21,"height":21,"x":210,"y":21,"pixelRatio":1,"visible":true},"ranger-station-15":{"width":21,"height":21,"x":231,"y":21,"pixelRatio":1,"visible":true},"religious-buddhist-15":{"width":21,"height":21,"x":252,"y":21,"pixelRatio":1,"visible":true},"religious-christian-15":{"width":21,"height":21,"x":273,"y":21,"pixelRatio":1,"visible":true},"religious-jewish-15":{"width":21,"height":21,"x":294,"y":21,"pixelRatio":1,"visible":true},"religious-muslim-15":{"width":21,"height":21,"x":315,"y":21,"pixelRatio":1,"visible":true},"restaurant-15":{"width":21,"height":21,"x":168,"y":42,"pixelRatio":1,"visible":true},"restaurant-noodle-15":{"width":21,"height":21,"x":189,"y":42,"pixelRatio":1,"visible":true},"restaurant-pizza-15":{"width":21,"height":21,"x":210,"y":42,"pixelRatio":1,"visible":true},"restaurant-seafood-15":{"width":21,"height":21,"x":231,"y":42,"pixelRatio":1,"visible":true},"rocket-15":{"width":21,"height":21,"x":252,"y":42,"pixelRatio":1,"visible":true},"school-15":{"width":21,"height":21,"x":273,"y":42,"pixelRatio":1,"visible":true},"shoe-15":{"width":21,"height":21,"x":294,"y":42,"pixelRatio":1,"visible":true},"shop-15":{"width":21,"height":21,"x":315,"y":42,"pixelRatio":1,"visible":true},"skateboard-15":{"width":21,"height":21,"x":168,"y":63,"pixelRatio":1,"visible":true},"slipway-15":{"width":21,"height":21,"x":189,"y":63,"pixelRatio":1,"visible":true},"stadium-15":{"width":21,"height":21,"x":210,"y":63,"pixelRatio":1,"visible":true},"suitcase-15":{"width":21,"height":21,"x":231,"y":63,"pixelRatio":1,"visible":true},"swimming-15":{"width":21,"height":21,"x":252,"y":63,"pixelRatio":1,"visible":true},"table-tennis-15":{"width":21,"height":21,"x":273,"y":63,"pixelRatio":1,"visible":true},"tennis-15":{"width":21,"height":21,"x":294,"y":63,"pixelRatio":1,"visible":true},"theatre-15":{"width":21,"height":21,"x":315,"y":63,"pixelRatio":1,"visible":true},"toilet-15":{"width":21,"height":21,"x":168,"y":84,"pixelRatio":1,"visible":true},"town-hall-15":{"width":21,"height":21,"x":189,"y":84,"pixelRatio":1,"visible":true},"veterinary-15":{"width":21,"height":21,"x":210,"y":84,"pixelRatio":1,"visible":true},"viewpoint-15":{"width":21,"height":21,"x":231,"y":84,"pixelRatio":1,"visible":true},"volcano-15":{"width":21,"height":21,"x":252,"y":84,"pixelRatio":1,"visible":true},"volleyball-15":{"width":21,"height":21,"x":273,"y":84,"pixelRatio":1,"visible":true},"watch-15":{"width":21,"height":21,"x":294,"y":84,"pixelRatio":1,"visible":true},"waterfall-15":{"width":21,"height":21,"x":315,"y":84,"pixelRatio":1,"visible":true},"watermill-15":{"width":21,"height":21,"x":168,"y":105,"pixelRatio":1,"visible":true},"windmill-15":{"width":21,"height":21,"x":189,"y":105,"pixelRatio":1,"visible":true},"zoo-15":{"width":21,"height":21,"x":210,"y":105,"pixelRatio":1,"visible":true},"marker-11":{"width":12,"height":20,"x":231,"y":105,"pixelRatio":1,"visible":true},"marker-15":{"width":12,"height":20,"x":243,"y":105,"pixelRatio":1,"visible":true},"airfield-11":{"width":17,"height":17,"x":255,"y":105,"pixelRatio":1,"visible":true},"airport-11":{"width":17,"height":17,"x":272,"y":105,"pixelRatio":1,"visible":true},"alcohol-shop-11":{"width":17,"height":17,"x":289,"y":105,"pixelRatio":1,"visible":true},"american-football-11":{"width":17,"height":17,"x":306,"y":105,"pixelRatio":1,"visible":true},"amusement-park-11":{"width":17,"height":17,"x":168,"y":126,"pixelRatio":1,"visible":true},"aquarium-11":{"width":17,"height":17,"x":185,"y":126,"pixelRatio":1,"visible":true},"art-gallery-11":{"width":17,"height":17,"x":202,"y":126,"pixelRatio":1,"visible":true},"attraction-11":{"width":17,"height":17,"x":219,"y":126,"pixelRatio":1,"visible":true},"bakery-11":{"width":17,"height":17,"x":236,"y":126,"pixelRatio":1,"visible":true},"bank-11":{"width":17,"height":17,"x":253,"y":126,"pixelRatio":1,"visible":true},"bar-11":{"width":17,"height":17,"x":270,"y":126,"pixelRatio":1,"visible":true},"basketball-11":{"width":17,"height":17,"x":287,"y":126,"pixelRatio":1,"visible":true},"beach-11":{"width":17,"height":17,"x":304,"y":126,"pixelRatio":1,"visible":true},"beer-11":{"width":17,"height":17,"x":168,"y":147,"pixelRatio":1,"visible":true},"bicycle-11":{"width":17,"height":17,"x":185,"y":147,"pixelRatio":1,"visible":true},"bicycle-share":{"width":17,"height":17,"x":202,"y":147,"pixelRatio":1,"visible":true},"bowling-alley-11":{"width":17,"height":17,"x":219,"y":147,"pixelRatio":1,"visible":true},"bridge-11":{"width":17,"height":17,"x":236,"y":147,"pixelRatio":1,"visible":true},"bus":{"width":17,"height":17,"x":253,"y":147,"pixelRatio":1,"visible":true},"cafe-11":{"width":17,"height":17,"x":270,"y":147,"pixelRatio":1,"visible":true},"campsite-11":{"width":17,"height":17,"x":287,"y":147,"pixelRatio":1,"visible":true},"car-11":{"width":17,"height":17,"x":304,"y":147,"pixelRatio":1,"visible":true},"car-rental-11":{"width":17,"height":17,"x":0,"y":168,"pixelRatio":1,"visible":true},"car-repair-11":{"width":17,"height":17,"x":17,"y":168,"pixelRatio":1,"visible":true},"casino-11":{"width":17,"height":17,"x":34,"y":168,"pixelRatio":1,"visible":true},"castle-11":{"width":17,"height":17,"x":51,"y":168,"pixelRatio":1,"visible":true},"cemetery-11":{"width":17,"height":17,"x":68,"y":168,"pixelRatio":1,"visible":true},"charging-station-11":{"width":17,"height":17,"x":85,"y":168,"pixelRatio":1,"visible":true},"cinema-11":{"width":17,"height":17,"x":102,"y":168,"pixelRatio":1,"visible":true},"clothing-store-11":{"width":17,"height":17,"x":119,"y":168,"pixelRatio":1,"visible":true},"college-11":{"width":17,"height":17,"x":136,"y":168,"pixelRatio":1,"visible":true},"communications-tower-11":{"width":17,"height":17,"x":153,"y":168,"pixelRatio":1,"visible":true},"confectionery-11":{"width":17,"height":17,"x":170,"y":168,"pixelRatio":1,"visible":true},"convenience-11":{"width":17,"height":17,"x":187,"y":168,"pixelRatio":1,"visible":true},"dentist-11":{"width":17,"height":17,"x":204,"y":168,"pixelRatio":1,"visible":true},"doctor-11":{"width":17,"height":17,"x":221,"y":168,"pixelRatio":1,"visible":true},"dog-park-11":{"width":17,"height":17,"x":238,"y":168,"pixelRatio":1,"visible":true},"drinking-water-11":{"width":17,"height":17,"x":255,"y":168,"pixelRatio":1,"visible":true},"embassy-11":{"width":17,"height":17,"x":272,"y":168,"pixelRatio":1,"visible":true},"entrance":{"width":17,"height":17,"x":289,"y":168,"pixelRatio":1,"visible":true},"farm-11":{"width":17,"height":17,"x":306,"y":168,"pixelRatio":1,"visible":true},"fast-food-11":{"width":17,"height":17,"x":0,"y":185,"pixelRatio":1,"visible":true},"ferry":{"width":17,"height":17,"x":17,"y":185,"pixelRatio":1,"visible":true},"fire-station-11":{"width":17,"height":17,"x":34,"y":185,"pixelRatio":1,"visible":true},"fitness-centre-11":{"width":17,"height":17,"x":51,"y":185,"pixelRatio":1,"visible":true},"fuel-11":{"width":17,"height":17,"x":68,"y":185,"pixelRatio":1,"visible":true},"furniture-11":{"width":17,"height":17,"x":85,"y":185,"pixelRatio":1,"visible":true},"garden-11":{"width":17,"height":17,"x":102,"y":185,"pixelRatio":1,"visible":true},"globe-11":{"width":17,"height":17,"x":119,"y":185,"pixelRatio":1,"visible":true},"golf-11":{"width":17,"height":17,"x":136,"y":185,"pixelRatio":1,"visible":true},"grocery-11":{"width":17,"height":17,"x":153,"y":185,"pixelRatio":1,"visible":true},"harbor-11":{"width":17,"height":17,"x":170,"y":185,"pixelRatio":1,"visible":true},"hardware-11":{"width":17,"height":17,"x":187,"y":185,"pixelRatio":1,"visible":true},"heliport-11":{"width":17,"height":17,"x":204,"y":185,"pixelRatio":1,"visible":true},"horse-riding-11":{"width":17,"height":17,"x":221,"y":185,"pixelRatio":1,"visible":true},"hospital-11":{"width":17,"height":17,"x":238,"y":185,"pixelRatio":1,"visible":true},"ice-cream-11":{"width":17,"height":17,"x":255,"y":185,"pixelRatio":1,"visible":true},"information-11":{"width":17,"height":17,"x":272,"y":185,"pixelRatio":1,"visible":true},"jewelry-store-11":{"width":17,"height":17,"x":289,"y":185,"pixelRatio":1,"visible":true},"laundry-11":{"width":17,"height":17,"x":306,"y":185,"pixelRatio":1,"visible":true},"library-11":{"width":17,"height":17,"x":0,"y":202,"pixelRatio":1,"visible":true},"lodging-11":{"width":17,"height":17,"x":17,"y":202,"pixelRatio":1,"visible":true},"mobile-phone-11":{"width":17,"height":17,"x":34,"y":202,"pixelRatio":1,"visible":true},"monument-11":{"width":17,"height":17,"x":51,"y":202,"pixelRatio":1,"visible":true},"mountain-11":{"width":17,"height":17,"x":68,"y":202,"pixelRatio":1,"visible":true},"museum-11":{"width":17,"height":17,"x":85,"y":202,"pixelRatio":1,"visible":true},"music-11":{"width":17,"height":17,"x":102,"y":202,"pixelRatio":1,"visible":true},"optician-11":{"width":17,"height":17,"x":119,"y":202,"pixelRatio":1,"visible":true},"park-11":{"width":17,"height":17,"x":136,"y":202,"pixelRatio":1,"visible":true},"parking-11":{"width":17,"height":17,"x":153,"y":202,"pixelRatio":1,"visible":true},"parking-garage-11":{"width":17,"height":17,"x":170,"y":202,"pixelRatio":1,"visible":true},"pharmacy-11":{"width":17,"height":17,"x":187,"y":202,"pixelRatio":1,"visible":true},"picnic-site-11":{"width":17,"height":17,"x":204,"y":202,"pixelRatio":1,"visible":true},"pitch-11":{"width":17,"height":17,"x":221,"y":202,"pixelRatio":1,"visible":true},"place-of-worship-11":{"width":17,"height":17,"x":238,"y":202,"pixelRatio":1,"visible":true},"playground-11":{"width":17,"height":17,"x":255,"y":202,"pixelRatio":1,"visible":true},"police-11":{"width":17,"height":17,"x":272,"y":202,"pixelRatio":1,"visible":true},"post-11":{"width":17,"height":17,"x":289,"y":202,"pixelRatio":1,"visible":true},"prison-11":{"width":17,"height":17,"x":306,"y":202,"pixelRatio":1,"visible":true},"rail":{"width":17,"height":17,"x":0,"y":219,"pixelRatio":1,"visible":true},"rail-light":{"width":17,"height":17,"x":17,"y":219,"pixelRatio":1,"visible":true},"rail-metro":{"width":17,"height":17,"x":34,"y":219,"pixelRatio":1,"visible":true},"ranger-station-11":{"width":17,"height":17,"x":51,"y":219,"pixelRatio":1,"visible":true},"religious-buddhist-11":{"width":17,"height":17,"x":68,"y":219,"pixelRatio":1,"visible":true},"religious-christian-11":{"width":17,"height":17,"x":85,"y":219,"pixelRatio":1,"visible":true},"religious-jewish-11":{"width":17,"height":17,"x":102,"y":219,"pixelRatio":1,"visible":true},"religious-muslim-11":{"width":17,"height":17,"x":119,"y":219,"pixelRatio":1,"visible":true},"restaurant-11":{"width":17,"height":17,"x":136,"y":219,"pixelRatio":1,"visible":true},"restaurant-noodle-11":{"width":17,"height":17,"x":153,"y":219,"pixelRatio":1,"visible":true},"restaurant-pizza-11":{"width":17,"height":17,"x":170,"y":219,"pixelRatio":1,"visible":true},"restaurant-seafood-11":{"width":17,"height":17,"x":187,"y":219,"pixelRatio":1,"visible":true},"rocket-11":{"width":17,"height":17,"x":204,"y":219,"pixelRatio":1,"visible":true},"school-11":{"width":17,"height":17,"x":221,"y":219,"pixelRatio":1,"visible":true},"shoe-11":{"width":17,"height":17,"x":238,"y":219,"pixelRatio":1,"visible":true},"shop-11":{"width":17,"height":17,"x":255,"y":219,"pixelRatio":1,"visible":true},"skateboard-11":{"width":17,"height":17,"x":272,"y":219,"pixelRatio":1,"visible":true},"slipway-11":{"width":17,"height":17,"x":289,"y":219,"pixelRatio":1,"visible":true},"stadium-11":{"width":17,"height":17,"x":306,"y":219,"pixelRatio":1,"visible":true},"suitcase-11":{"width":17,"height":17,"x":0,"y":236,"pixelRatio":1,"visible":true},"swimming-11":{"width":17,"height":17,"x":17,"y":236,"pixelRatio":1,"visible":true},"table-tennis-11":{"width":17,"height":17,"x":34,"y":236,"pixelRatio":1,"visible":true},"tennis-11":{"width":17,"height":17,"x":51,"y":236,"pixelRatio":1,"visible":true},"theatre-11":{"width":17,"height":17,"x":68,"y":236,"pixelRatio":1,"visible":true},"toilet-11":{"width":17,"height":17,"x":85,"y":236,"pixelRatio":1,"visible":true},"town-hall-11":{"width":17,"height":17,"x":102,"y":236,"pixelRatio":1,"visible":true},"veterinary-11":{"width":17,"height":17,"x":119,"y":236,"pixelRatio":1,"visible":true},"viewpoint-11":{"width":17,"height":17,"x":136,"y":236,"pixelRatio":1,"visible":true},"volcano-11":{"width":17,"height":17,"x":153,"y":236,"pixelRatio":1,"visible":true},"volleyball-11":{"width":17,"height":17,"x":170,"y":236,"pixelRatio":1,"visible":true},"watch-11":{"width":17,"height":17,"x":187,"y":236,"pixelRatio":1,"visible":true},"waterfall-11":{"width":17,"height":17,"x":204,"y":236,"pixelRatio":1,"visible":true},"watermill-11":{"width":17,"height":17,"x":221,"y":236,"pixelRatio":1,"visible":true},"windmill-11":{"width":17,"height":17,"x":238,"y":236,"pixelRatio":1,"visible":true},"zoo-11":{"width":17,"height":17,"x":255,"y":236,"pixelRatio":1,"visible":true},"border-dot-13":{"width":13,"height":13,"x":323,"y":168,"pixelRatio":1,"visible":true},"dot-10":{"width":11,"height":11,"x":323,"y":185,"pixelRatio":1,"visible":true},"dot-11":{"width":11,"height":11,"x":323,"y":202,"pixelRatio":1,"visible":true},"dot-9":{"width":11,"height":11,"x":323,"y":219,"pixelRatio":1,"visible":true}}

2.1.2 glyphs（地图标注字体）

地图标注字体部分本地化需要将目标ttf或otf格式的字体转换为pbf格式，可以选用Mapbox发布的node-fontnik工具，参考：mapbox/node-fontnik工具使用介绍。
也可以直接使用vue中Mapbox的字体本地化部署解决方案，该文中提供了部分已转换的pbf格式字体。

2.1.3 代码展示

全局初始化方法：

this.globalLayers = [{
	'id': 'simple-tiles1',
	'type': 'raster',
	'source': 'osm-tiles1',
	'minzoom': 0,
	'maxzoom': 22
},
{
	'id': 'simple-tiles2',
	'type': 'raster',
	'source': 'osm-tiles2',
	'minzoom': 0,
	'maxzoom': 22
}];
this.globalSources.set('osm-tiles1', {
	'type': 'raster',
	'tiles': [
		'http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=天地图token'
	],
	'tileSize': 256
});
this.globalSources.set('osm-tiles2', {
	'type': 'raster',
	'tiles': [
		'http://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=天地图token'
	],
	'tileSize': 256
});
this.globalSources.forEach((value, key) => {
	mapSources[key] = value;
});
var mapLayers = [];
for (let n = this.globalLayers.length - 1; n >= 0; n--) {
	mapLayers.push(this.globalLayers[n]);
}
var map = this.initMap('map', mapSources, mapLayers, 5, url);

地图初始化方法：

initMap(container, sources, layers, zoom, url) {
	// mapboxgl.accessToken = 'null';
	var map = new mapboxgl.Map({
		container: container,
		style: {
			'version': 8,
			'sprite': url + '/sprite/sprite',
			'glyphs': url + '/font/{fontstack}/{range}.pbf',
			'sources': sources,
			'layers': layers
		},
		center: this.centerCoordinates,
		preserveDrawingBuffer: true,
		trackResize: false,
		zoom: zoom,
		maxZoom: 16,
		minZoom: 1
	});
	return map;
},

2.2 Mapbox-gl去除Token校验

在实现本地化部署后执行创建地图方法，会发现虽然此时已经不需要在获取Mapbox的数据了，但是仍无法去除Token，即使使用错误的Token，虽然展示了地图但是会报错。
找到node_modules包中的mapbox-gl.js文件，将以下内容：

(t=>{if(t&&(t.message===e.AUTH_ERR_MSG||401===t.status))

替换为：

(e=>{if(e&&(false))

重新运行项目，此时注释掉Mapbox的Token已能正常运行。