vue项目mapboxgl本地化部署

一.说明

1.下载json和png文件保存到一个目录文件下。
2.下载字体库（.pbf文件）。
3.下载mapboxgl.css和mapboxgl.js文件。
4.下载路径以上所有文件下载 提取码 2vrh 。
5.如有问题欢迎留言讨论。

二.目录文件

三.引用css和js文件

四.加载底图代码

      var that=this;
      this.map=new mapboxgl.Map({
        style:{
          "version" : 8,
          "name" : "maobox streets",
          "sources" : {
            "osm-tiles": {
              "type": "raster",
              "tiles":[
                mapSourceUrl+'/rastermap-data/data/raster/{z}/{x}/{y}'//瓦片地址
              ],
              "tileSize": 256
            },
            "osm-text": {
              "type": "raster",
              "tiles":[
                mapSourceUrl+'/rastermap-data/data/text/{z}/{x}/{y}'//瓦片地址
              ],
            }
          },
          "glyphs":baseRoot + "data/map/{fontstack}/{range}.pbf",//改成你存在本地的地址
          "sprite" :baseRoot +  "data/map/spriteNewO/sprite",//改成你存在本地的地址
          "layers":[
            {
              "id": "osm-tiles-layer",
              "type": "raster",
              "source": "osm-tiles",
              "source-layer": "osmtiles",
              "minzoom": 3,
              "maxZoom": 19,
            },
            {
              "id": "osm-text-layer",
              "type": "raster",
              "source": "osm-text",
              "source-layer": "osmtext",
              "minzoom": 3,
              "maxZoom": 19,
            }
          ]
        },//图层样式
        container: 'map',
        center: [110.216246, 35.098066],
        zoom: 4,
        maxZoom:20,//最大缩放等级
        minZoom:3//最小缩放等级
      });