CustomRenderContext

帧内绘制上下文。只在 onReady / onRender / onDestroy 回调里作为入参拿到 (也可以用 layer.getContext() 取到同一个对象)。

它与 WebGLCustomLayer 有一批同名方法,区别只在生效时机:

图层方法(layer.xxx) 上下文方法(ctx.xxx)
何时可调 任何时候 只在回调内
生效时机 记账并触发重绘,下一帧生效 当场下发 GL 调用
适用场景 外部事件驱动的更新 每帧都要算的几何 / 多次绘制
draw() 没有 有,且只有它有

也就是说:从按钮点击、请求回调里改数据用 layer.setXxx(); 在 onRender 里逐帧算几何、想画多遍,用 ctx.setXxx() + ctx.draw()。

interface CustomRenderContext {
    gl: WebGLRenderingContext;
    layer: WebGLCustomLayer;
    map: Map;
    draw(options?: WebGLCustomLayerDraw): CustomRenderContext;
    drawIndexed(options?: WebGLCustomLayerDraw): CustomRenderContext;
    getCenter(): Point;
    getHeading(): number;
    getMVPMatrix(): Float32Array;
    getPixelRatio(): number;
    getProgramInfo(): object;
    getSize(): { height: number; width: number };
    getTilt(): number;
    getTime(): number;
    getUnitsPerPixel(): number;
    getZoom(): number;
    projectToLayer(lngLat: [number, number]): [number, number];
    projectToLayer(lngLat: [number, number][]): [number, number][];
    setAttribute(
        name: string,
        spec: WebGLCustomLayerAttributeInput,
    ): CustomRenderContext;
    setAttributes(attributes: WebGLCustomLayerAttributes): CustomRenderContext;
    setDraw(spec: WebGLCustomLayerDraw): CustomRenderContext;
    setIndices(data: ArrayLike<number>): CustomRenderContext;
    setRenderState(state: WebGLCustomLayerRenderState): CustomRenderContext;
    setTexture(
        name: string,
        source: WebGLCustomLayerTextureSource,
        options?: WebGLCustomLayerTextureOptions,
    ): CustomRenderContext;
    setTextures(textures: WebGLCustomLayerTextures): CustomRenderContext;
    setUniform(
        name: string,
        value: WebGLCustomLayerUniformValue,
    ): CustomRenderContext;
    setUniforms(uniforms: WebGLCustomLayerUniforms): CustomRenderContext;
    setVertices(spec: WebGLCustomLayerVertices): CustomRenderContext;
    unprojectFromLayer(xy: [number, number]): [number, number];
    unprojectFromLayer(xy: [number, number][]): [number, number][];
}

数据(当场生效)

相机与坐标

  • 相机朝向,度

    返回值 number

  • 当前帧的 mvp 矩阵(图层局部坐标 → 裁剪空间)。 返回复用的 Float32Array,不要跨帧缓存这个引用

    返回值 Float32Array

  • 设备像素比

    返回值 number

  • 画布尺寸,CSS 像素

    返回值 { height: number; width: number }

  • 相机倾斜角,度

    返回值 number

  • 图层加入地图起算的秒数,做动画用

    返回值 number

  • 一个屏幕像素等于多少个图层局部坐标单位。 想让某个尺寸在屏幕上恒定 N 像素就用 N * getUnitsPerPixel()

    返回值 number

  • 当前缩放级别

    返回值 number

  • 经纬度 → 图层局部坐标

    参数类型说明
    lngLat[number, number]

    返回值 [number, number]

  • 参数类型说明
    lngLat[number, number][]

    返回值 [number, number][]

  • 图层局部坐标 → 经纬度

    参数类型说明
    xy[number, number]

    返回值 [number, number]

  • 参数类型说明
    xy[number, number][]

    返回值 [number, number][]

绘制

逃生口

白名单 GL 门面。资源类调用(buffer / texture / shader / uniform / draw)直通, 会改写地图共享状态的调用(enable / blendFunc / depthMask / clear / viewport / bindFramebuffer / pixelStorei 等)会告警一次后忽略。 需要原生上下文请在构造时传 unsafeGL: true

所属图层

所属地图

  • 编译好的 program 反射信息,写 gl 逃生路径时用

    返回值 object