mapbox-gl-V50版本开始用户可以添加自己的WebGL代码呈现到自定义的图层。在GitHub上的功能改进中如图1显示。
图1 代码的更新所以我们就能在mapbox图层中添加自己需要的webGL图层了。
那么如何添加呢？我们先来看一下APIMapbox GL JS API。其中说明了我们可以通过Map#addLayer来添加我们需要的图层。而且必须使用render方法。看到render我们应该很清楚想到webGL中的渲染方法，mapbox中我们需要两个参数分别是gl（地图的gl上下文）以及matrix（地图的相机矩阵）。同时我们还要初始化和添加我们的WebGL图层通过onAdd方法需要的参数为map（添加的自定义图层的地图）和gl（地图的上下文）。同时指定其图层的id和他的类型，注意此类型必须为“custom”才可以使用。如图2.
图2 添加图层
那么如何添加我们的threejs对象呢？这里就要用到我们的threeboxjs了。目前threeboxjs网上的教程很少，初学的只能从其例子中学习，这里给出我使用threeboxjs版本的GitHub下载地址。GitHub - peterqliu/threebox: A three.js plugin for Mapbox GL JS, with support for basic animation and advanced 3D rendering.以后的版本可能有较大改动，以当时的版本为主。此版本给我的感觉是与threejs混合起来的感觉。我们只要初始化threebox然后添加我们的threejs代码就行了。首先我们初始化我们的threeboxjs。
window.threebox = new Threebox(map, mbxContext);//初始化
我截一段初始化的源码大家就能知道与threejs的联系了。
图3 初始化是不是特别亲切？然后我们需要添加场景的系统光源，让obj呈现在地图中的光照效果。
threebox.setupDefaultLights();//设置系统光
之后直接添加我们的threejs对象，这里的代码需要理解的可以看我的threejs的发光半球的博客。
图4 设置对象接着把创建好的obj添加到threebox场景中
threebox.addAtCoordinate(cube1.clone(), origin);
第一个参数是添加的obj对象，第二个参数为添加在地图上的坐标（经度、纬度、高度）之后我们添加动画
图5 设置动画最后在更新时添加跟新threebox的代码。
threebox.update();
这是他更新的源码的大致流程
图6 更新流程最后效果
图7 最后效果
网友评论