Simple Mesh Layer (deck.gl)

<script setup lang="ts">
  import { VMap, VControlNavigation } from '@geoql/v-maplibre';
  import { VLayerDeckglSimpleMesh } from '@geoql/v-maplibre/deck.gl';
  import { CubeGeometry } from '@luma.gl/engine';

  const mapOptions = {
  style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
  center: [-122.4, 37.78],
  zoom: 13,
  pitch: 45,
  };

  // Create a cube mesh
  const cubeMesh = new CubeGeometry();

  interface CubeData {
  position: [number, number, number];
  color: [number, number, number, number];
  scale: number;
  orientation: [number, number, number];
  }

  const cubes: CubeData[] = [
  { position: [-122.405, 37.785, 0], color: [64, 192, 255, 255], scale: 100, orientation: [0, 0, 0] },
  { position: [-122.4, 37.78, 0], color: [255, 140, 64, 255], scale: 150, orientation: [0, 0, 45] },
  ];

  const legendItems: CategoryLegendItem[] = [
    { value: 'cube-1', label: 'Cube 1', color: '#40c0ff' },
    { value: 'cube-2', label: 'Cube 2', color: '#ff8c40' },
    { value: 'cube-3', label: 'Cube 3', color: '#80ff80' },
    { value: 'cube-4', label: 'Cube 4', color: '#ff4080' },
    { value: 'cube-5', label: 'Cube 5', color: '#c080ff' },
  ];

  const getPosition = (d: unknown) => (d as CubeData).position;
  const getColor = (d: unknown) => (d as CubeData).color;
  const getScale = (d: unknown) => {
  const scale = (d as CubeData).scale;
  return [scale, scale, scale];
  };
</script>

<template>
  <VMap :options="mapOptions" class="h-125 w-full">
    <VControlNavigation position="top-right" />
    <VLayerDeckglSimpleMesh
      id="simple-mesh-layer"
      :data="cubes"
      :mesh="cubeMesh"
      :get-position="getPosition"
      :get-color="getColor"
      :get-scale="getScale"
      :get-orientation="getOrientation"
      :pickable="true"
    />
  </VMap>
</template>