最近利用MapboxGL進行前端地圖可視化的相關研究，對MapboxGL的源碼研究了一兩個月，終於弄清楚其數據模型及程序結構。MapboxGL在前端運行的只是一個js文件，但實際上它包括大量的後端代碼和模塊。
1、MapboxGL的安裝
對於一般使用者而言直接下載官網的mapbox-gl.js引入到瀏覽器就可以了，不過該代碼爲壓縮和簡化過的代碼。對於開發者而言一般需要查看和調試其源碼，有兩種方式：一種方式是直接從github克隆其項目代碼到本地，按照其中的測試方法進行調試；另一種方法是直接在自己的項目中安裝mapboxgl，在nodejs項目中運行“npm install mapbox-gl"即可將mapbox-gl安裝到本地。（注：該方法在windows下可能出現C++編譯問題，安裝會出錯但是能安裝，本人在ubuntu系統安裝）
2、前端文件的生成
MapboxGL是一個使用WebGL前端渲染的地圖引擎，但是其代碼包含大量的後臺模塊，是無法直接在瀏覽器運行的，這時需要browserify模塊。在命令行運行"npm install -g browserify"進行全局安裝，運行相關的命令即可生成相關的文件，具體命令可以查看mapbox-gl模塊的package.json文件，如下圖：
當然也可以cd進mapbox-gl文件夾內直接使用其命令生成。其中”build“命令生成開發者模式的文件，”production“命令生成瀏覽器使用的文件，這兩者的區別就是後者會對文件進行壓縮對變量進行簡化。生成玩的文件直接引入html頁面就可以使用了。
3、調試方法
MapboxGL的壓縮方式採用了JavaScript Source Map技術（參見大神博客），因此應該採用Source Map調試，這樣雖然引入的是壓縮和簡化的文件，瀏覽器依然可以根據source map文件找到其源碼對應的位置。目前火狐、chrome等主流瀏覽器都支持source map調試。以chrome瀏覽器爲例，需要在瀏覽開發者模式中設置一下，打開”Enable Source Map“，如下圖所示：
這樣就可以在瀏覽器看到mapbox-gl的源碼了，並且可以在源碼直接設置斷點。當需要對源碼進行修改時，只需要安裝第2條對修改後的源碼重新生成前端js文件就可以了。