Mapbox自定义图层设置minZoom和maxZoom的方法

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       })

这是一种方案，如果大家有更好的方法欢迎一起交流~

标签：map,自定义,render,minZoom,threebox,Mapbox,图层
来源： https://www.cnblogs.com/jyughynj/p/12361717.html