Classification Filter

<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: [-123.075, 44.05],
  zoom: 14,
  pitch: 60,
  maxPitch: 85,
  };

  const lidarOptions = {
  collapsed: false,
  pointSize: 2,
  colorScheme: 'classification', // Use classification color scheme
  pickable: true,
  autoZoom: true,
  };

  const copcUrl = 'https://s3.amazonaws.com/hobu-lidar/autzen-classified.copc.laz';

  // Programmatic classification control
  const showOnlyBuildings = () => {
  lidarRef.value?.hideAllClassifications();
  lidarRef.value?.setClassificationVisibility(6, true); // Building
  };

  const showOnlyGround = () => {
  lidarRef.value?.hideAllClassifications();
  lidarRef.value?.setClassificationVisibility(2, true); // Ground
  };

  const showAll = () => {
  lidarRef.value?.showAllClassifications();
  };
</script>

<template>
  <VMap :options="mapOptions" class="h-125 w-full">
    <VControlNavigation position="top-right" />
    <VControlLidar
      ref="lidarRef"
      position="top-right"
      :options="lidarOptions"
      :default-url="copcUrl"
    />
  </VMap>

  <!-- Classification controls -->
  <div class="mt-4 flex gap-2">
    <button @click="showOnlyBuildings">Buildings Only</button>
    <button @click="showOnlyGround">Ground Only</button>
    <button @click="showAll">Show All</button>
  </div>
</template>