mapbox-gl-js学习之重新编译【零基础】

最近项目中用到了mapbox.gl进行大数据可视化。因为自己学前端时间不长，所以遇到了许多问题，现在此做一个总结。

1.mapbox-gl-js的获取

mapbox-gl-js可以在浏览器中显示一个可交互的地图，它是用WebGL实现的。在官网里注册一个账户，获取accessToken，根据提示就可以快速实现它的一些例子。

api地址：https://www.mapbox.com/mapbox-gl-js/api/

guihub里源代码地址：https://github.com/mapbox/mapbox-gl-js

2.开发环境的配置（windows环境下）

1.安装python 2.7(注意Python3不可以，只能是2.7)

2.安装  git       地址：https://git-scm.com/downloads

3.安装最新版本node.js  （注意，版本必须大于6.4.0）  地址：https://nodejs.org/en/download/

4.安装yarn     地址：https://yarnpkg.com/zh-Hans/

5.安装npm   注意，一般安装好node.js后会自动把npm装好

6.管理员身份执行cmd命令：npm install --global --production windows-build-tools

7.安装npm-gyp   执行cmd命令： npm install -g node-gyp

8..去github上下载mapbox-gl-js的源代码  

   (1)打开cmd

   (2)输入命令：git clone https://github.com/mapbox/mapbox-gl-js.git

9.安装Visual Studio 2015或以上

10.安装headless-gl   执行cmd命令：npm install gl   （这一步很容易出现错误，出错后先不用管，运行11步，如果11能成功就算了，不能成功就要找原因）

11.cd进入第六步下载好的mapbox-gl-js文件夹路径，在此路径下执行cmd命令：yarn install

到这一步为止，你已经成功配置好环境~~

3.调试

在mapbox-gl-js文件夹路径下执行命令：yarn run start-debug

之后打开浏览器，输入地址http://localhost:9966/debug就可以调试了。

但是这里需要key,我把mapbox-gl-js\src\util\config.js里加上了自己的key，但还是提示说缺少key....暂时没解决。

4.重新编译--Creating a Standalone Build

在mapbox-gl-js文件夹路径下执行命令： yarn run build-min

结束后在mapbox-gl-js\dist路径下就能找到编译好的mapbox-gl.js与mapbox-gl.css