The VControlLidar component wraps maplibre-gl-lidar, providing a full-featured LiDAR point cloud viewer with:
Install the required dependency:
bun add maplibre-gl-lidar
Import the CSS in your app:
import 'maplibre-gl-lidar/style.css';
<script setup lang="ts">
import { VMap, VControlLidar } from '@geoql/v-maplibre';
import 'maplibre-gl-lidar/style.css';
const mapOptions = {
style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
center: [-123.075, 44.05],
zoom: 14,
pitch: 60,
maxPitch: 85,
};
const lidarOptions = {
collapsed: false,
pointSize: 2,
colorScheme: 'elevation',
pickable: true,
autoZoom: true,
};
const copcUrl = 'https://s3.amazonaws.com/hobu-lidar/autzen-classified.copc.laz';
</script>
<template>
<VMap :options="mapOptions" style="height: 500px">
<VControlLidar
position="top-right"
:options="lidarOptions"
:default-url="copcUrl"
@load="(info) => console.log('Loaded:', info)"
/>
</VMap>
</template>
LidarControlOptionsfalseConfiguration options for the LiDAR control.
interface LidarControlOptions {
collapsed?: boolean; // Start collapsed (default: true)
title?: string; // Panel title (default: 'LiDAR Viewer')
panelWidth?: number; // Panel width in pixels (default: 365)
panelMaxHeight?: number; // Panel max height (default: 500)
pointSize?: number; // Point size in pixels (default: 2)
opacity?: number; // Opacity 0-1 (default: 1.0)
colorScheme?: ColorScheme; // Color scheme (default: 'elevation')
usePercentile?: boolean; // Use 2-98% percentile for coloring
pointBudget?: number; // Max points to display (default: 1000000)
pickable?: boolean; // Enable point picking (default: false)
autoZoom?: boolean; // Auto zoom to data (default: true)
copcLoadingMode?: 'full' | 'dynamic'; // Loading mode for COPC
streamingPointBudget?: number; // Max points for streaming (default: 5000000)
}
type ColorScheme = 'elevation' | 'intensity' | 'classification' | 'rgb';
'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'false'top-right'Position of the control on the map.
stringfalseURL of a point cloud file to auto-load on mount.
Emitted when a point cloud has been successfully loaded.
{ pointCloud: PointCloudInfo }interface PointCloudInfo {
id: string;
name: string;
pointCount: number;
bounds: PointCloudBounds;
hasRGB: boolean;
hasIntensity: boolean;
hasClassification: boolean;
source: string;
wkt?: string;
}
Emitted when loading begins.
Emitted when loading fails.
{ error: Error }Emitted when a point cloud is unloaded.
Emitted when control state changes.
Emitted when styling changes (point size, color scheme, etc.).
Emitted when COPC streaming starts or stops.
Emitted during streaming with progress info.
Emitted when point budget limit is reached.
Access methods via template ref:
<script setup lang="ts">
import { ref } from 'vue';
const lidarRef = ref();
const loadFile = async (url: string) => {
await lidarRef.value.loadPointCloud(url);
};
</script>
<template>
<VControlLidar ref="lidarRef" />
</template>
Load a point cloud from URL, File, or ArrayBuffer.
await lidarRef.value.loadPointCloud('https://example.com/data.copc.laz');
Unload a point cloud by ID, or all if no ID provided.
Fly to a point cloud's bounds.
Set the point size in pixels.
Set the color scheme: 'elevation', 'intensity', 'classification', or 'rgb'.
Set opacity (0-1).
Toggle, expand, or collapse the control panel.
Get the current control state.
Get array of loaded point clouds.
Stop streaming for a specific dataset or all.
Check if streaming is active.
For large COPC files, dynamic streaming loads only visible points:
<VControlLidar
:options="{
copcLoadingMode: 'dynamic',
streamingPointBudget: 10_000_000,
}"
/>
Features:
import type {
LidarControlOptions,
ColorScheme,
CopcLoadingMode,
PointCloudInfo,
PointCloudBounds,
} from '@geoql/v-maplibre';