最近项目中用到了mapbox.gl进行大数据可视化。因为自己学前端时间不长,所以遇到了许多问题,现在此做一个总结。
1.mapbox-gl-js的获取
mapbox-gl-js可以在浏览器中显示一个可交互的地图,它是用WebGL实现的。在官网里注册一个账户,获取accessToken,根据提示就可以快速实现它的一些例子。
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
(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