Mapbox提供了自定义图层(CustomLayer)的接口,可以方便地利用创建自定义图层利用three.js在图中添加模型,可以参考官方案例:https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/
但是自定义图层没有minZoom、maxZoom属性,那么就不能像普通图层那样设置自定义图层的可视范围了。
不过根据定义,自定义图层必须实现render方法,该方法将要显示的内容绘制在GL context,那么可以在该render函数中判断地图的zoom,如果在minZoom - maxZoom的范围,正常绘制,否则该函数将直接返回。示例如下:
1 map.addLayer({ 2 id: 'custom-layer-id', 3 type: 'custom', 4 renderingMode: '3d', 5 onAdd: function (map, mbxContext) { 6 let Threebox = window.Threebox 7 that.threebox = new Threebox(map, mbxContext, { defaultLights: true }) 8 that.__loadLamp() 9 }, 10 render: function (gl, matrix) { 11 if (that.map.getZoom() < minZoom) { 12 return 13 } 14 that.threebox && that.threebox.update() 15 that.map.triggerRepaint() 16 } 17 })
这是一种方案,如果大家有更好的方法欢迎一起交流~