（一）Mapbox GL源码本地部署、打包、调试

1.前言

1.1.关于本文

       地理信息应用相关技术的学习，特别是在提升相关技术能力及知识面来说，源码的学习是技术能力提升的捷径。

1.2.关于MapBox GL

什么是MapBox GL

• MapBox GL是MapBox提供的JavaScript SDK，可用于地理信息应用系统的开发；
• MapBoxGL有较强的渲染性能，强劲的海量数据渲染能力，使其在各类GIS开发框架中脱颖而出；
• 可在支持WebGL的移动端浏览器上运行；
• 使用方便，可视化效果较好、扩展性高、拥有众多的插件使之可以满足开发者的各种需求。

MapBox GL的特点

MapBox GL的GL指的是WebGL，这是它最大的特点。WebGL是一种3D绘图协议，允许把JavaScript和OpenGL ES2.0结合在一起，为HTML5的Canvas元素提供硬件3D加速渲染。大多数PC和移动端浏览器支持WebGL。
MapBox GL使用WebGL渲染地图和图层，所以可以知道这对前端GIS开发者来说意味着什么：超越以往浏览器局限的硬件级渲染图形能力。 令无数前端GIS开发者头疼的大数据量GIS数据渲染、交互问题，若使用MapBoxGL，只要不超过当前硬件的渲染能力就都能实现。同时，MapBoxGL也顺理成章地支持一些3D效果：可以倾斜、旋转地图；可在地图上添加3D要素、呈现立体地图等。
简单的来说：MapBox GL支持包括底图的各类地图要素的WEB端渲染。

1.3.环境说明

操作系统：windows 7 64位
MapBox GL版本:

2.Mapbox源码下载

2.1.基础环境准备

GIT环境搭建：
详细点击：（一）windows 安装 git
Node.JS环境搭建：
详细点击：（一）Node.JS 安装说明
Yarn环境搭建：
详细点击：（一）Yarn安装、配置、镜像源修改
Npm and node-gyp依赖安装
详细点击：（二）Node.js安装本地插件构建工具node-gyp
其他地址：
GitHub Mapbox源码地址：https://github.com/mapbox/mapbox-gl-js

2.2.克隆项目至本地

注意：需要提前安装好GIT、Node.JS、Yarn、Npm and node-gyp
1:GIT、Node.JS、Yarn按照基础环境准备安装即可,Npm and node-gyp安装说明如下:

1：打开GitHub mapbox源码地址，点击第2步的按钮，出现弹出框点击第3步复制地址（一定要看源码的说明，例如查看MapBox安装步骤，如下第2张图）；


2：新建一个项目文件夹（尽量不要用中文），右键点击Git Bash Here；

3：弹出窗口后输入git clone + 复制的地址，然后回车下载源码，如下：

4:cmd 进入下载后的mapbox GL源码文件夹，Yarn命令安装源码依赖，如下图：

 yarn install

5： 安装headless-gl，并将node_modules/headless-gl/deps/windows/dll/x64/*.dll 复制到c:\windows\system32

1. 安装命令:

  npm install gl

2. 复制相关文件到指定文件夹:
   

3.Mapbox本地编译

注意: 基础环境准备相关工作要全部完成,在win7 和win10系统都安装过，都可以顺利完成的，如果哪个步骤出错了，可以重新再来一遍，特变是一键安装vs相关环境的时候，安装包比较大，下载都需要很长时间（保证镜像源是国内的还），要有耐心，但是基本上安装进度都是可见的，如果卡到安装过程某个环节，果断重新开始那一步骤地安装即可。

按照github mapbox-gl操作指南编译项目是YARN模式，命令如下：

   yarn run start-debug 

当然也可以用npm相关命令安装依赖，编译项目，本文按照github mapbox-gl操作指南安装依赖，编译项目，各位也可以用npm相关命令管理项目。

4.Mapbox源码调试

简单说明package两个命令，其他命令不熟悉的可以自己试下或者查下材料：
以源码模式启动项目

   yarn run start-debug 

以开发模式构建源码

   yarn run build-dev

出现下图这种情况，在mapbox申请token，然后在代码中添加token后再次访问即可

在mapbox官网申请token后，在debug/index.html中代码最上方增加token即可。