离线部署mapbox

阳光男孩~Taner

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

阅读量1.8k

点赞数 19

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

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

本文链接：https://blog.youkuaiyun.com/qq_37750030/article/details/142479203

版权

前言

我们在使用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"