SDK JS
    Preparing search index...

    Class SlicePlaneLayer

    The slice gizmo as a standalone MapLibre custom layer — the translucent cut face (faded to nothing at both ends, because the clip volume is unbounded vertically), its two side rails, the ground footprint of the cut, and the back wall's edges. It only DRAWS: the clipping happens in the 3D layers' shaders, so a pose set here changes the picture of the cut, never the cut. Requires WebGL2. Where the scene sits in front of the gizmo it still draws, dimmed to an x-ray, so a plane behind a facade stays visible and grabbable.

    createSliceController creates and drives one of these, and SliceWidget is a UI over that — add the layer yourself only when your own code owns the clipping planes and just needs the visual. Drive it with setPose(pose), hide it with setPose(null) or setVisible(false), and recolor via fillColor / outlineColor.

    import { SlicePlaneLayer } from '@bitruvius/sdk-maplibre';
    const gizmo = new SlicePlaneLayer('slice-plane');
    map.addLayer(gizmo);
    gizmo.setPose({
      position: { lng: -157.8163, lat: 21.2972, height: 0 },
      headingDeg: 90,
      tiltDeg: 0,
      halfWidthM: 300,
      depthM: 600,
      flipped: false,
    });

    SlicePlanePose for the pose fields.

    Implements

    • CustomLayerInterface
    Index

    Constructors

    constructor

    Properties

    fillColor id outlineColor renderingMode type

    Methods

    onAdd onRemove render setPose setVisible

    Constructors

    Properties

    fillColor: [number, number, number, number] = ...

    Fill / outline colors (straight RGBA 0..1; premultiplied at draw).

    id: string

    A unique layer id.

    outlineColor: [number, number, number, number] = ...
    renderingMode: "3d" = ...

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

    type: "custom" = ...

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

    Methods

    • MapLibre custom-layer hook — compiles the quad program + buffers.

      Parameters

      Returns void

    • MapLibre custom-layer hook — releases the GL resources.

      Returns void

    • Called during a render frame allowing the layer to draw into the GL context.

      The layer can assume blending and depth state is set to allow the layer to properly blend and clip other layers. The layer cannot make any other assumptions about the current GL state.

      If the layer needs to render to a texture, it should implement the prerender method to do this and only use the render method for drawing directly into the main framebuffer.

      The blend function is set to gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA). This expects colors to be provided in premultiplied alpha form where the r, g and b values are already multiplied by the a value. If you are unable to provide colors in premultiplied form you may want to change the blend function to gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA).

      Parameters

      Returns void

    • Show/hide without losing the pose.

      Parameters

      • on: boolean

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods