Vicemene funkcni mapova cast planovace

src/components/map/MapWrapper.vue

@@ -58,6 +58,7 @@ const displayAirspaceLayers = ref({
   TMA: true,
   RMZ: false,
   ATZ: true,
+  PARA: false,
   DANGER: false,
   PROHIBIT: true,
   RESTRICT: true,
@@ -68,29 +69,29 @@ const displayAirspaceLayers = ref({
 
 const airspaces = computed(() => {
   const colorsMap = {
-    C: "#800080",
-    D: "#800080",
-    CTR: "#00ff00",
-    P: "#FF0000",
+    TMA: "#800080",
+    CTR: "#366e36",
+    PROHIBIT: "#FF0000",
     RMZ: "#FFdd00",
-    R: "#ff6a00",
-    Q: "#FFA500",
-    PGZ: "#008000",
-    GSEC: "#008000",
+    RESTRICT: "#ff6a00",
+    DANGER: "#FFA500",
+    TRAGA: "#008000",
     ATZ: "#4e7cfc",
-    FIR: '#ffffff'
+    FIR: '#ffffff',
+    PARA: "#000000"
   }
 
   return props.airspacesData
     .filter(airspace => !!colorsMap[airspace.type])
     .filter(airspace => {
-      if (['C', 'D'].includes(airspace.type)) return displayAirspaceLayers.value.TMA;
-      if (['PGZ', 'GSEC'].includes(airspace.type)) return displayAirspaceLayers.value.TRAGA;
+      if (['TMA'].includes(airspace.type)) return displayAirspaceLayers.value.TMA;
+      if (['TRAGA'].includes(airspace.type)) return displayAirspaceLayers.value.TRAGA;
       if (airspace.type === 'CTR') return displayAirspaceLayers.value.CTR;
       if (airspace.type === 'RMZ') return displayAirspaceLayers.value.RMZ;
-      if (airspace.type === 'Q') return displayAirspaceLayers.value.DANGER;
-      if (airspace.type === 'P') return displayAirspaceLayers.value.PROHIBIT;
-      if (airspace.type === 'R') return displayAirspaceLayers.value.RESTRICT;
+      if (airspace.type === 'DANGER') return displayAirspaceLayers.value.DANGER;
+      if (airspace.type === 'PROHIBIT') return displayAirspaceLayers.value.PROHIBIT;
+      if (airspace.type === 'RESTRICT') return displayAirspaceLayers.value.RESTRICT;
+      if (airspace.type === 'PARA') return displayAirspaceLayers.value.PARA;
       if (airspace.type === 'ATZ') return displayAirspaceLayers.value.ATZ;
       return true;
     })
@@ -101,7 +102,7 @@ const airspaces = computed(() => {
         strokeOpacity: 0.3,
         strokeWeight: 3,
         fillColor: colorsMap[airspace.type],
-        fillOpacity: 0,
+        fillOpacity: ["PROHIBIT", "RESTRICT"].includes(airspace.type) ? 0.1 : 0,
       };
 
       if (airspace.mapBounds.length > 0) {
@@ -146,6 +147,11 @@ const handleMapClick = (e) => {
   emits("map-click", {airspaces: getAirspacesAtCoordinates(clickCoordinates), clickCoordinates});
 }
 
+const handleReportingPointClick = (airport, reportingPoint) => {
+  const position = {lat: reportingPoint.gpsLatitude, lng: reportingPoint.gpsLongitude};
+  emits("map-click", {clickCoordinates: position, airport, reportingPoint})
+}
+
 const handleAirportClick = (airport) => {
   const position = {lat: airport.gpsLatitude, lng: airport.gpsLongitude};
   emits("map-click", {clickCoordinates: position, airport})
@@ -163,24 +169,35 @@ const handleAirportClick = (airport) => {
     ref="mapRef"
   >
     <template v-for="airspace in airspaces" :key="airspace.name">
-      <Polygon :options="airspace" @click=handleMapClick v-if="airspace.path"/>
-      <Circle :options="airspace" @click=handleMapClick v-if="airspace.center && airspace.radius"/>
+      <Polygon :options="airspace" @click="handleMapClick" />
     </template>
 
+    <slot/>
+
     <template v-for="airport in airportsOnMap" :key="airport.icaoCode">
       <CustomMarker
         :options="{position: {lat: airport.gpsLatitude, lng: airport.gpsLongitude}, anchorPoint: 'CENTER'}"
         @click.stop="handleAirportClick(airport)"
       >
-          <q-chip size="xs">{{ airport.icaoCode }}</q-chip>
+        <q-chip size="xs">{{ airport.icaoCode }}</q-chip>
       </CustomMarker>
+
+      <template v-if="displayAirspaceLayers.CTR">
+        <CustomMarker
+          v-for="reportingPoint in airport.reportingPoints" :key="reportingPoint.id"
+          :options="{position: {lat: reportingPoint.gpsLatitude, lng: reportingPoint.gpsLongitude, anchorPoint: 'CENTER'}}"
+          @click.stop="handleReportingPointClick(airport, reportingPoint)"
+          :title="`${airport.icaoCode}: ${reportingPoint.name}`"
+        >
+          <q-icon name="mdi-triangle"/>
+        </CustomMarker>
+      </template>
     </template>
 
-    <slot/>
 
     <CustomControl position="BOTTOM_CENTER" class="text-center" v-if="showLayerControls">
       <q-card class="q-my-md q-mx-auto q-px-lg" style="max-width: 98%;">
-        <q-checkbox v-model="displayAirspaceLayers.CTR" label="M/CTR"/>
+        <q-checkbox v-model="displayAirspaceLayers.CTR" label="CTR"/>
         <q-checkbox v-model="displayAirspaceLayers.TMA" label="TMA"/>
         <q-checkbox v-model="displayAirspaceLayers.RMZ" label="RMZ"/>
         <q-checkbox v-model="displayAirspaceLayers.ATZ" label="ATZ"/>
@@ -188,6 +205,7 @@ const handleAirportClick = (airport) => {
         <q-checkbox v-model="displayAirspaceLayers.PROHIBIT" label="Zakázané prostory"/>
         <q-checkbox v-model="displayAirspaceLayers.RESTRICT" label="TRA"/>
         <q-checkbox v-model="displayAirspaceLayers.TRAGA" label="TRAGA"/>
+        <q-checkbox v-model="displayAirspaceLayers.PARA" label="PARA"/>
         <q-checkbox v-model="displayAirspaceLayers.AIRPORTS" label="Letiště"/>
         <q-checkbox v-model="displayAirspaceLayers.FIELDSTRIP" label="SLZ plochy"/>
       </q-card>