离线部署mapbox

阳光男孩~Taner

已于 2024-09-24 12:35:37 修改

阅读量567

点赞数 15

分类专栏： mapbox教程文章标签： javascript

于 2024-09-24 12:04:48 首次发布

本文链接：https://blog.csdn.net/qq_37750030/article/details/142479203

版权

mapbox教程专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

我们在使用mapbox过程中，会遇到在内网部署的情况，在内网环境且不能访问外网的情况下我们是无法使用mapbox的在线资源的，这就需要我们进行离线化部署。
注意：离线化部署只用于学习交流，Mapbox GL JS > v2.0.0 需要收费的，注意查看mapbox协议内容

一、下载资源

其实如何下载资源和离线部署我在之前一篇博客有介绍原地址，只不过现在一些下载器失效了，写的也不够详细，现在详细说明。

字体及雪碧图下载

使用下载工具，地址,注意该下载工具下载的矢量瓦片可能会失效，不过没关系，我们只要下载字体及雪碧图就可以了。如果不想下载，我这边有现成下载好的，下载地址
在这里插入图片描述

矢量瓦片下载

下载工具
该下载工具在原工具基础上新增了输入范围及导入geojson范围下载
在这里插入图片描述
提示:不要一次性下载范围过大或者级别过大,瓦片数量根据级别成指数型增加，下载全国范围可以一次性下载到10级，11级往后瓦片数量会很大，建议一个省范围下载11-12级。下载级别越大选择范围越小，多分区域下载完合并就可以了

下载完以后将瓦片放到source/composite/tiles文件夹下
在这里插入图片描述

样式配置

样式配置可以直接在mapbox studio中直接配置好下载，没有账号的话需要先注册一个，目前注册mapbox账号有点麻烦。我这里提供了一个自己在mapbox下载的样式文件。下载地址
我们只需要style.json文件就可以了，修改里面的sources、sprite、glyphs地址，换成自己部署的地址就可以啦，最终样式类似如下

{
  "owner": "",
  "metadata": {
    "mapbox:trackposition": true,
    "mapbox:autocomposite": true,
    "mapbox:origin": "basic-v1",
    "mapbox:groups": {
      "Walking, cycling, etc., surface": {
        "collapsed": true,
        "name": "Walking, cycling, etc., surface"
      },
      "Transit, built": {
        "collapsed": true,
        "name": "Transit, built"
      },
      "Road network, tunnels": {
        "collapsed": false,
        "name": "Road network, tunnels"
      },
      "Land & water, water": {
        "collapsed": true,
        "name": "Land & water, water"
      },
      "Natural features, natural-labels": {
        "collapsed": true,
        "name": "Natural features, natural-labels"
      },
      "Place labels, place-labels": {
        "collapsed": true,
        "name": "Place labels, place-labels"
      },
      "Buildings, extruded": {
        "collapsed": true,
        "name": "Buildings, extruded"
      },
      "Buildings, built": {
        "collapsed": false,
        "name": "Buildings, built"
      },
      "Road network, surface": {
        "collapsed": false,
        "name": "Road network, surface"
      },
      "Point of interest labels, poi-labels": {
        "collapsed": true,
        "name": "Point of interest labels, poi-labels"
      },
      "Administrative boundaries, admin": {
        "collapsed": true,
        "name": "Administrative boundaries, admin"
      },
      "Transit, transit-labels": {
        "collapsed": false,
        "name": "Transit, transit-labels"
      },
      "Road network, road-labels": {
        "collapsed": false,
        "name": "Road network, road-labels"
      },
      "Walking, cycling, etc., barriers-bridges": {
        "collapsed": true,
        "name": "Walking, cycling, etc., barriers-bridges"
      },
      "Buildings, building-labels": {
        "collapsed": true,
        "name": "Buildings, building-labels"
      },
      "Land & water, land": {
        "collapsed": false,
        "name": "Land & water, land"
      },
      "Road network, bridges": {
        "collapsed": true,
        "name": "Road network, bridges"
      },
      "Walking, cycling, etc., tunnels": {
        "collapsed": true,
        "name": "Walking, cycling, etc., tunnels"
      },
      "Land & water, built": {
        "collapsed": true,
        "name": "Land & water, built"
      },
      "Walking, cycling, etc., walking-cycling-labels": {
        "collapsed": true,
        "name": "Walking, cycling, etc., walking-cycling-labels"
      }
    },
    "mapbox:sdk-support": {
      "android": "10.6.0",
      "js": "2.0.0",
      "ios": "10.6.0"
    },
    "mapbox:type": "default"
  },
  "sources": {
    "composite": {
      "type": "vector",
      "url": "source/composite/mapbox.mapbox-streets-v8.json" // 
    }
  },
  "visibility": "private",
  "bearing": 0,
  "created": "2023-11-09T12:03:12.872Z",
  "center": [
    117.50608674907221,
    30.726162664416478
  ],
  "zoom": 10,
  "glyphs": "fonts/{fontstack}/{range}.pbf",
  "version": 8,
  "protected": false,
  "draft": false,
  "name": "wzq",
  "sprite": "sprites/sprite",
  "layers":[
  {
        "id": "land",
        "type": "background",
        "metadata": {
            "mapbox:featureComponent": "land-and-water",
            "mapbox:group": "Land & water, land"
        },
        "layout": {},
        "paint": {
            "background-color": [
                "interpolate",
                ["linear"],
                ["zoom"],
                9,
                "hsl(20, 20%, 95%)",
                11,
                "hsl(20, 18%, 91%)"
            ]
        }
    },
  	...
  ]
  "modified": "2023-11-09T12:17:44.654Z",
  "pitch": 0,
  "id": "clor53zhk00mp01pm0ip9eti5",
  "fog": {
    "high-color": [
      "interpolate",
      [
        "exponential",
        1.2
      ],
      [
        "zoom"
      ],
      5.5,
      "hsl(205, 76%, 5%)",
      6,
      "hsl(205, 76%, 78%)"
    ],
    "color": [
      "interpolate",
      [
        "exponential",
        1.2
      ],
      [
        "zoom"
      ],
      5.5,
      "hsl(205, 76%, 90%)",
      6,
      "hsl(57, 99%, 99%)"
    ],
    "range": [
      -1,
      10
    ],
    "horizon-blend": [
      "interpolate",
      [
        "exponential",
        1.2
      ],
      [
        "zoom"
      ],
      5.5,
      0.04,
      6,
      0.1
    ],
    "space-color": [
      "interpolate",
      [
        "exponential",
        1.2
      ],
      [
        "zoom"
      ],
      5.5,
      "hsl(205, 76%, 10%)",
      6,
      "hsl(205, 76%, 90%)"
    ],
    "star-intensity": [
      "interpolate",
      [
        "exponential",
        1.2
      ],
      [
        "zoom"
      ],
      5.5,
      0.3,
      6,
      0
    ]
  }
}