CustomRenderContext
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][];
}
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][];
}
数据(当场生效)
设置一个顶点属性,当场重建 buffer 并绑定指针
参数 类型 说明 namestringspecWebGLCustomLayerAttributeInput返回值 CustomRenderContext
- #setTexture(
name: string,
source: WebGLCustomLayerTextureSource,
options?: WebGLCustomLayerTextureOptions,
): CustomRenderContext设置纹理,传 null 清除
参数 类型 说明 namestringsourceWebGLCustomLayerTextureSourceoptions可选WebGLCustomLayerTextureOptions属性 类型 说明 filter"linear" | "nearest"采样方式 flipYboolean是否上下翻转 mipmapboolean是否生成 mipmap premultiplyAlphaboolean是否预乘 alpha。注意开启后会影响后续所有纹理上传(pixelStorei 是全局状态) wrap"clamp" | "repeat" | "mirror"环绕方式。WebGL1 下 repeat / mirror 要求 2 的整次幂尺寸,否则会告警并缩放上传 返回值 CustomRenderContext
相机与坐标
地图中心点
返回值 Point
相机朝向,度
返回值 number
当前帧的 mvp 矩阵(图层局部坐标 → 裁剪空间)。 返回复用的 Float32Array,不要跨帧缓存这个引用
返回值 Float32Array
设备像素比
返回值 number
画布尺寸,CSS 像素
返回值 { height: number; width: number }
相机倾斜角,度
返回值 number
图层加入地图起算的秒数,做动画用
返回值 number
一个屏幕像素等于多少个图层局部坐标单位。 想让某个尺寸在屏幕上恒定 N 像素就用
N * getUnitsPerPixel()返回值 number
当前缩放级别
返回值 number
经纬度 → 图层局部坐标
参数 类型 说明 lngLat[number, number]返回值 [number, number]
- projectToLayer(lngLat: [number, number][]): [number, number][]
参数 类型 说明 lngLat[number, number][]返回值 [number, number][]
图层局部坐标 → 经纬度
参数 类型 说明 xy[number, number]返回值 [number, number]
- unprojectFromLayer(xy: [number, number][]): [number, number][]
参数 类型 说明 xy[number, number][]返回值 [number, number][]
绘制
提交一次绘制。设过 indices 就自动走 drawElements。 只有上下文有这个方法,图层上没有
参数 类型 说明 options可选WebGLCustomLayerDraw省略则用构造参数里的 draw 返回值 CustomRenderContext
帧内绘制上下文。只在
onReady/onRender/onDestroy回调里作为入参拿到 (也可以用layer.getContext()取到同一个对象)。它与 WebGLCustomLayer 有一批同名方法,区别只在生效时机:
layer.xxx)ctx.xxx)draw()也就是说:从按钮点击、请求回调里改数据用
layer.setXxx(); 在onRender里逐帧算几何、想画多遍,用ctx.setXxx()+ctx.draw()。