mapbox-gl-V50版本開(kāi)始用戶(hù)可以添加自己的WebGL代碼呈現(xiàn)到自定義的圖層。在GitHub上的功能改進(jìn)中如圖1顯示。
所以我們就能在mapbox圖層中添加自己需要的webGL圖層了婆排。
那么如何添加呢？我們先來(lái)看一下APIMapbox GL JS API出嘹。其中說(shuō)明了我們可以通過(guò)Map#addLayer來(lái)添加我們需要的圖層。而且必須使用render方法咬崔∷凹冢看到render我們應(yīng)該很清楚想到webGL中的渲染方法烦秩，mapbox中我們需要兩個(gè)參數(shù)分別是gl（地圖的gl上下文）以及matrix（地圖的相機(jī)矩陣）。同時(shí)我們還要初始化和添加我們的WebGL圖層通過(guò)onAdd方法需要的參數(shù)為map（添加的自定義圖層的地圖）和gl（地圖的上下文）郎仆。同時(shí)指定其圖層的id和他的類(lèi)型只祠，注意此類(lèi)型必須為“custom”才可以使用。如圖2.
圖2 添加圖層
那么如何添加我們的threejs對(duì)象呢扰肌？這里就要用到我們的threeboxjs了抛寝。目前threeboxjs網(wǎng)上的教程很少，初學(xué)的只能從其例子中學(xué)習(xí)曙旭，這里給出我使用threeboxjs版本的GitHub下載地址盗舰。GitHub - peterqliu/threebox: A three.js plugin for Mapbox GL JS, with support for basic animation and advanced 3D rendering.以后的版本可能有較大改動(dòng)，以當(dāng)時(shí)的版本為主桂躏。此版本給我的感覺(jué)是與threejs混合起來(lái)的感覺(jué)钻趋。我們只要初始化threebox然后添加我們的threejs代碼就行了。首先我們初始化我們的threeboxjs剂习。
window.threebox = new Threebox(map, mbxContext);//初始化
我截一段初始化的源碼大家就能知道與threejs的聯(lián)系了蛮位。
是不是特別親切？然后我們需要添加場(chǎng)景的系統(tǒng)光源鳞绕，讓obj呈現(xiàn)在地圖中的光照效果失仁。
threebox.setupDefaultLights();//設(shè)置系統(tǒng)光
之后直接添加我們的threejs對(duì)象，這里的代碼需要理解的可以看我的threejs的發(fā)光半球的博客猾昆。
接著把創(chuàng)建好的obj添加到threebox場(chǎng)景中
threebox.addAtCoordinate(cube1.clone(), origin);
第一個(gè)參數(shù)是添加的obj對(duì)象陶因，第二個(gè)參數(shù)為添加在地圖上的坐標(biāo)（經(jīng)度骡苞、緯度垂蜗、高度）之后我們添加動(dòng)畫(huà)
最后在更新時(shí)添加跟新threebox的代碼。
threebox.update();
這是他更新的源碼的大致流程
最后效果
