Multiple Point Clouds

<script setup lang="ts">
  import { ref } from 'vue';
  import { VMap, VControlNavigation } from '@geoql/v-maplibre';
  import { VControlLidar } from '@geoql/v-maplibre/lidar';
  import 'maplibre-gl-lidar/style.css';

  const lidarRef = ref<InstanceType<typeof VControlLidar> | null>(null);

  const mapOptions = {
  style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
  center: [-105.205048, 39.6653],
  zoom: 15.5,
  pitch: 45,
  maxPitch: 85,
  };

  const lidarOptions = {
  collapsed: false,
  pointSize: 2,
  colorScheme: 'elevation',
  pickable: true,
  autoZoom: false, // Don't auto-zoom to keep view stable
  pointBudget: 2_000_000,
  };

  // Sample datasets
  const datasets = [
  {
    name: 'Autzen',
    url: 'https://s3.amazonaws.com/hobu-lidar/autzen-classified.copc.laz'
  },
  {
    name: 'Red Rocks',
    url: 'https://na-c.entwine.io/red-rocks/ept.json'
  },
  ];

  // Load multiple datasets programmatically
  const loadDataset = async (url: string) => {
  await lidarRef.value?.loadPointCloud(url);
  };

  // The control is created asynchronously, so wait for it before
  // handing over the dataset URLs.
  const waitForControl = async () => {
  for (let attempt = 0; attempt < 100; attempt++) {
  if (lidarRef.value?.getControl()) return true;
  await new Promise((resolve) => setTimeout(resolve, 100));
  }
  return false;
  };

  // Load them all once the control is ready
  onMounted(async () => {
  await waitForControl();
  for (const dataset of datasets) {
  await loadDataset(dataset.url);
  }
  });

  // Get list of loaded point clouds
  const getPointClouds = () => {
  return lidarRef.value?.getPointClouds() || [];
  };

  // Unload a specific point cloud
  const unloadPointCloud = (id: string) => {
  lidarRef.value?.unloadPointCloud(id);
  };

  // Fly to a specific point cloud
  const flyTo = (id: string) => {
  lidarRef.value?.flyToPointCloud(id);
  };
</script>

<template>
  <VMap :options="mapOptions" class="h-125 w-full">
    <VControlNavigation position="top-right" />
    <VControlLidar
      ref="lidarRef"
      position="top-right"
      :options="lidarOptions"
      @load="(info) => console.log('Loaded:', info.pointCloud.name)"
    />
  </VMap>
</template>