SDK JS
    Preparing search index...

    Class Measure3dOverlay

    The measurement tool's 3D graphics as a standalone MapLibre custom layer — round vertex sprites drawn AT their heights, the 3D segments between them, vertical droplines to the ground, and (for Volume) the translucent fill map. You feed it Measure3dVertex positions through setData; measure3dVertices builds those from a DrawState plus a ground-elevation lookup. Drawn with depth testing off, so the graphics stay visible through buildings, and it needs a WebGL2 context (the shaders are #version 300 es).

    MeasurementWidget already owns one of these — reach for the layer directly when you are building your own measurement UI. The piece such a UI most needs is projectToScreen: a height-aware map.project that lands a floating HTML label exactly on a vertex sprite, under any terrain exaggeration.

    import { Measure3dOverlay } from '@bitruvius/sdk-maplibre';
    const overlay = new Measure3dOverlay('measure-3d');
    map.addLayer(overlay);
    overlay.setData(
      [
        { lng: -157.8163, lat: 21.2972, height: 48, groundHeight: 3 },
        { lng: -157.8151, lat: 21.2981, height: 12, groundHeight: 3 },
      ],
      false, // `true` closes the ring (area / volume shapes)
    );

    Implements

    • CustomLayerInterface
    Index

    Constructors

    constructor

    Properties

    color fill fillOpacity id pointSizePx renderingMode type

    Methods

    clearFill hasFrame onAdd onRemove projectToScreen render setData setFillData

    Constructors

    Properties

    color: [number, number, number, number] = ...

    Line/ring color (straight RGBA 0..1).

    fill: [number, number, number, number] = ...

    Point core fill.

    fillOpacity: number = 0.68

    Fill-map surface opacity (0–1).

    id: string

    A unique layer id.

    pointSizePx: number = 11

    Point sprite diameter in CSS px (multiplied by the device pixel ratio at draw).

    renderingMode: "3d" = ...

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

    type: "custom" = ...

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

    Methods

    • Hide the fill map.

      Returns void

    • True once a frame matrix has been captured (i.e. the layer has rendered at least once).

      Returns boolean

    • MapLibre custom-layer hook — compiles the three tiny programs + their buffers.

      Parameters

      Returns void

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

      Returns void

    • Project a 3D position (lng/lat degrees, height metres above the rendered ground datum) to CSS-pixel screen coordinates using the LAST rendered frame's matrix — height-aware, unlike map.project. Exactly the projection the overlay draws its vertex sprites with, so a label positioned through this coincides with the sprite under any terrain exaggeration.

      Parameters

      • lng: number
      • lat: number
      • height: number

      Returns [number, number] | null

      [x, y] CSS px (top-left origin), or null when behind the camera / no frame yet.

    • 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

    • Rebuild the 3D graphics from the measured vertices (each carries height + ground height).

      Parameters

      Returns void

    • Show the Volume fill map (heatmap surface + contours) for a computed raster; rebuilds on the current origin. A later setData with the same polygon keeps it aligned.

      Parameters

      • raster: FillRaster
      • opts: FillGeometryOptions

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods