Sensor Network & EW Coverage

<script setup lang="ts">
  import { VMap, VControlNavigation, VControlScale } from '@geoql/v-maplibre';
  import { useDeckLayers } from '@geoql/v-maplibre/deck.gl';
  import { ScatterplotLayer, PolygonLayer, TextLayer } from '@deck.gl/layers';

  const mapOptions = computed(() => ({
    style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
    center: [93.5, 27.5] as [number, number],
    zoom: 9,
  }));

  const { updateLayer } = useDeckLayers();

  const sensors = ref([
    { id: 'RAD-01', position: [93.35, 27.52], radius: 12000, color: [0, 255, 100, 40] },
    { id: 'AS-01', position: [93.3, 27.55], radius: 4000, color: [0, 200, 220, 40] },
  ]);

  function syncLayers() {
    updateLayer('detection', new ScatterplotLayer({
      id: 'detection',
      data: sensors.value,
      getPosition: (d) => d.position,
      getRadius: (d) => d.radius,
      getFillColor: (d) => d.color,
      radiusUnits: 'meters',
      filled: true,
      stroked: true,
    }));
  }
</script>

<template>
  <VMap :options="mapOptions" class="h-125 w-full">
    <VControlNavigation position="top-right" />
    <VControlScale position="bottom-left" />
  </VMap>
</template>