ui/map/rendering/CustomLayer3D¶

Classes¶

abstract CustomLayer3D¶

Defined in: ui/map/rendering/CustomLayer3D.ts:25

Base class for Three.js custom layers in MapLibre GL

This class provides the foundation for rendering 3D content using Three.js within MapLibre GL maps. It handles the integration between Three.js and MapLibre's rendering pipeline.

Based on MapLibre example: https://maplibre.org/maplibre-gl-js/docs/examples/add-3d-model-threejs/

Extended by¶

• Aircraft3DCustomLayer

Implements¶

• CustomLayerInterface

Constructors¶

Constructor¶

new CustomLayer3D(id): CustomLayer3D;

Defined in: ui/map/rendering/CustomLayer3D.ts:39

Parameters¶

id¶

string

Returns¶

CustomLayer3D

Properties¶

id¶

id: string;

Defined in: ui/map/rendering/CustomLayer3D.ts:26

A unique layer id.

Implementation of¶

CustomLayerInterface.id

type¶

type: "custom";

Defined in: ui/map/rendering/CustomLayer3D.ts:27

The layer's type. Must be "custom".

Implementation of¶

CustomLayerInterface.type

renderingMode¶

renderingMode: "3d";

Defined in: ui/map/rendering/CustomLayer3D.ts:28

Either "2d" or "3d". Defaults to "2d".

Implementation of¶

CustomLayerInterface.renderingMode

camera¶

protected camera: Camera;

Defined in: ui/map/rendering/CustomLayer3D.ts:30

scene¶

protected scene: Scene;

Defined in: ui/map/rendering/CustomLayer3D.ts:31

renderer¶

protected renderer: WebGLRenderer;

Defined in: ui/map/rendering/CustomLayer3D.ts:32

map¶

protected map: Map$1;

Defined in: ui/map/rendering/CustomLayer3D.ts:33

directionalLight1¶

protected directionalLight1: DirectionalLight;

Defined in: ui/map/rendering/CustomLayer3D.ts:36

directionalLight2¶

protected directionalLight2: DirectionalLight;

Defined in: ui/map/rendering/CustomLayer3D.ts:37

Methods¶

onAdd()¶

onAdd(map, gl): void;

Defined in: ui/map/rendering/CustomLayer3D.ts:48

Initialize Three.js scene (called by MapLibre when layer is added)

Parameters¶

map¶

Map$1

MapLibre map instance

gl¶

WebGLRenderingContext | WebGL2RenderingContext

WebGL rendering context

Returns¶

void

Implementation of¶

CustomLayerInterface.onAdd

setupLighting()¶

protected setupLighting(): void;

Defined in: ui/map/rendering/CustomLayer3D.ts:116

Setup scene lighting Override this method to customize lighting for your scene

Returns¶

void

onSceneReady()¶

abstract protected onSceneReady(): void;

Defined in: ui/map/rendering/CustomLayer3D.ts:137

Called when scene is ready for subclass to add objects Override this to add your 3D objects to the scene

Returns¶

void

render()¶

Call Signature¶

render(gl, matrix): void;

Defined in: ui/map/rendering/CustomLayer3D.ts:144

Render the scene (called by MapLibre every frame)

Parameters¶

gl¶

WebGLRenderingContext | WebGL2RenderingContext

WebGL rendering context

matrix¶

number[]

Transformation matrix (deprecated, use args)

Returns¶

void

Implementation of¶

CustomLayerInterface.render

Call Signature¶

render(gl, args): void;

Defined in: ui/map/rendering/CustomLayer3D.ts:145

Render the scene (called by MapLibre every frame)

Parameters¶

gl¶

WebGLRenderingContext | WebGL2RenderingContext

WebGL rendering context

args¶

CustomRenderMethodInput

Returns¶

void

Implementation of¶

CustomLayerInterface.render

updateScene()¶

abstract protected updateScene(args?): void;

Defined in: ui/map/rendering/CustomLayer3D.ts:189

Update scene objects before rendering Override this to update your 3D objects each frame

Parameters¶

args?¶

Render3DArgs

Rendering arguments from MapLibre

Returns¶

void

lngLatToMercator()¶

protected lngLatToMercator(
   lng, 
   lat, 
   altitude?): object;

Defined in: ui/map/rendering/CustomLayer3D.ts:198

Convert longitude/latitude to Mercator coordinates

Parameters¶

lng¶

number

Longitude in degrees

lat¶

number

Latitude in degrees

altitude?¶

number = 0

Altitude in meters

Returns¶

object

Mercator coordinates and scale factor

x¶

x: number;

y¶

y: number;

z¶

z: number;

scale¶

scale: number;

createTransformMatrix()¶

protected createTransformMatrix(
   lng, 
   lat, 
   altitude, 
   heading?, 
   pitch?, 
   roll?, 
   scale?): Matrix4;

Defined in: ui/map/rendering/CustomLayer3D.ts:228

Create a transformation matrix for positioning an object on the map

Parameters¶

lng¶

number

Longitude in degrees

lat¶

number

Latitude in degrees

altitude¶

number

Altitude in meters

heading?¶

number = 0

Heading in radians (0 = North, clockwise)

pitch?¶

number = 0

Pitch in radians (rotation around X axis)

roll?¶

number = 0

Roll in radians (rotation around Y axis)

scale?¶

number = 1

Additional scale factor

Returns¶

Matrix4

Three.js transformation matrix

isGlobeProjection()¶

protected isGlobeProjection(): boolean;

Defined in: ui/map/rendering/CustomLayer3D.ts:272

Check if the current map projection is globe

Returns¶

boolean

True if globe projection is active

onRemove()?¶

optional onRemove(_map, _gl): void;

Defined in: ui/map/rendering/CustomLayer3D.ts:286

Cleanup when layer is removed (called by MapLibre) Override to cleanup any resources

Parameters¶

_map¶

Map$1

_gl¶

WebGLRenderingContext | WebGL2RenderingContext

Returns¶

void

Implementation of¶

CustomLayerInterface.onRemove

Interfaces¶

Render3DArgs¶

Defined in: ui/map/rendering/CustomLayer3D.ts:11

The slice of MapLibre's custom-layer render arguments our 3D layers consume. Wide enough to cover both the modern args object and the legacy matrix-array render call, narrow enough that subclasses don't depend on MapLibre's full ProjectionData internals.

Properties¶

defaultProjectionData¶

defaultProjectionData: object;

Defined in: ui/map/rendering/CustomLayer3D.ts:12

mainMatrix¶

mainMatrix: ArrayLike<number>;