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
- 安装命令:
npm install gl
- 复制相关文件到指定文件夹:
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即可。