博客地址：博客地址

参考了以下内容：

https://www.jianshu.com/p/693f38ec5730https://zhuanlan.zhihu.com/p/30967394

感谢两位大大的无私贡献。

先上代码，篇幅略长。

<!DOCTYPE html>
<html>
<head><meta charset='utf-8' /><title></title><meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /><script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script><link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' /><style>body { margin:0; padding:0; }#map { position:absolute; top:0; bottom:0; width:100%; }</style>
</head>
<body>
<div id='map'></div>
<script>var map = new mapboxgl.Map({container: 'map', // container idstyle: {"version": 8,"name": "Mapbox Streets","sprite": "http://localhost/images/sprite",//本地的json及图片"glyphs": "http://localhost/font/{fontstack}/{range}.pbf",//字体文件"sources": {"osm-tiles": {"type": "raster",'tiles': ["http://mt2.google.cn/vt/lyrs=s@167000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}"//谷歌地图切片服务],'tileSize': 256},},"layers": [{"id": "simple-tiles","type": "raster","source": "osm-tiles","minzoom": 0,"maxzoom": 22}]}, //hosted style idcenter: [121, 31], // starting positionzoom: 0 // starting zoom});
</script>
</body>
</html>

接下来详细的操作步骤：

1：打开官网案例，获取图片及json文件

案例可以在如下链接进行查看：

https://www.mapbox.cn/mapbox-gl-js/examples/

MapBox的官方API，只需要拷贝代码，并且将 mapbox的 token复制到

打开网页，确保网络情况正常的情况下即可访问。

2：style样式本地化，

打开我们刚刚获取到的mapbox网页，在network中查看网络请求。

在这里我们过滤下请求，

就可以看到sprite.json 与 sprite.png了

sprite.png里面包含的是图标

sprite.json则是包含了图标的位置。

3：设置页面

保存下来sprite.json及sprite.png图片。

保存路径：

字体存放目录：

下载地址：https://pan.baidu.com/s/1lv69EP5QlaUnlKZlH4-qlA

{fontstack}与{range}是占位符

4：瓦片

加载的为google地图瓦片：

            "sources": {"osm-tiles": {"type": "raster",'tiles': ["http://mt2.google.cn/vt/lyrs=s@167000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}"],'tileSize': 256},},

这里加载的是 google 的地图服务。

可以将瓦片进行本地化，再下载好上文中html中的Mapbox的CSS与JS样式

实现真正的本地化操作。

5：github下载本地展示

已经将项目上传到github

地址：https://github.com/xiaofsu/MapBox

修改nginx的文件用来打开本地化项目

MapBox本地化部署相关推荐

vue中Mapbox的字体本地化部署解决方案
(1)Mapbox示例理解 <!DOCTYPE html> <html><head><meta charset="utf-8" /> ...
Mapbox网络GIS开发第一步——Mapbox本地化
对于使用mapbox_gl_js来进行的前端地图页面的开发,通常我们可以直接调用在线的mapbox组件资源,轻易的使用mapbox_gl_js提供的前端开发框架,但是由于网络延迟等一些列网络上的不确定 ...
ad域控如何建立在云端_呼叫中心哪家好？选择云端呼叫中心还是本地化部署呼叫中心好？...
呼叫中心哪家比较好? 适用于企业的呼叫中心主要可分为3种方案:自建型呼叫中心系统.Saas云端呼叫中心和混合云呼叫中心.这三种部署方案分别是:本地化部署.Saas云部署.混合云部署.对于这三种部署方式 ...
在本地机房享受专属公共云服务，详解阿里云本地化部署服务云盒
简介:作为软硬一体的公共云本地化部署服务,阿里云云盒使用与公共云一致的架构,为用户提供了与公共云一致的产品.一致的体验,同时满足客户数据本地部署.海量数据就近处理.业务低延时等需求. 阿里云云盒更多内 ...
jqgrid本地数据例子_办公系统私有云公有云和本地化部署，你选哪个？
随着互联网和云计算技术的发展,我们常常会听到: 私有云.公有云和本地化部署,它们分别代表什么意思? 无论是国企.民企还是外企,只要有数据,就要思考:到底将数据储存在哪里? 选择轻流进行企业管理的用户, ...
chatgpt平替，清华chatglm本地化部署教程（aigc大模型风口，校招找工作必备），包含weiui部署，api部署，对话框部署
ChatGLM-6B 是一个开源的.支持中英双语的对话语言模型,基于 General Language Model (GLM) 架构,具有 62 亿参数.结合模型量化技术,用户可以在消费级的显卡上进行 ...
本地化部署大语言模型 ChatGLM
本地化部署大语言模型 ChatGLM 本地化部署大语言模型 ChatGLM 前期筹备 GitHub 基础包语言模型文件基础配置显存查看方法 Anaconda 模块 ChatGLM-6B 网页部署 ...
云端部署 vs 本地化部署
CIO在帮所在组织(甲方)从软件服务商(乙方)购买业务所需的应用程序时,会面临一个问题,到底把应用部署在本地还是部署在公有云上?本文结合作者自身经验,就这个问题有几点看法,给各位一个参考. 首先,我们 ...
阿里云联合鼎捷软件发布云上数字工厂解决方案，实现云MES系统本地化部署
5月18日,阿里云与鼎捷软件联合主办的"云上数字工厂与中小企业数字化转型创新论坛"于线上举行.本次创新论坛上,阿里云弹性计算解决方案及运营负责人胡晓博与鼎捷软件上海事业部总经理袁能 ...
GLM联合go-cqhttp实现qq群GLM机器人服务器的本地化部署笔记
GLM qq群服务器的本地化部署笔记一. 概述 1.1 整体结构 1.2 目标 1.3 需求 1.4 流程说明二. 部署流程 2.1 使用GPT转发程序帮助文档 2.1.1 使用git安装GLM ...

MapBox本地化部署