Examples
COPC Streaming
Cloud-Optimized Point Cloud (COPC) with dynamic viewport-based loading. Only points visible in the current view are loaded, dramatically reducing memory usage for large datasets.
Installation
$ npx shadcn-vue@latest add https://mapcn-vue.geoql.in/r/map-control-lidarUsage
<script setup lang="ts">
import { VMap, VControlNavigation } from '@geoql/v-maplibre';
import { VControlLidar } from '@geoql/v-maplibre/lidar';
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" class="h-125 w-full">
<VControlNavigation position="top-right" />
<VControlLidar
position="top-right"
:options="lidarOptions"
:default-url="copcUrl"
@load="(info) => console.log('Loaded:', info)"
/>
</VMap>
</template> Components 3
<VMap />@geoql/v-maplibre<VControlNavigation />@geoql/v-maplibre<VControlLidar />@geoql/v-maplibre/lidar