Fullscreen u planovace

src/components/map/MapWrapper.vue

@@ -83,26 +83,22 @@ const airspaces = computed(() => {
 
   return props.airspacesData
     .filter(airspace => !!colorsMap[airspace.type])
-    .filter(airspace => {
-      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 === '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;
-    })
+    .filter(airspace => displayAirspaceLayers.value[airspace.type])
     .map(airspace => {
+
+      let fillOpacity = 0;
+      if (["PROHIBIT", "RESTRICT"].includes(airspace.type))
+        fillOpacity = 0.1;
+      if (highlightedAirspaces.value.includes(airspace.name))
+        fillOpacity = 0.2;
+
       const data = {
         name: airspace.name,
         strokeColor: colorsMap[airspace.type],
-        strokeOpacity: 0.3,
-        strokeWeight: 3,
         fillColor: colorsMap[airspace.type],
-        fillOpacity: ["PROHIBIT", "RESTRICT"].includes(airspace.type) ? 0.1 : 0,
+        strokeOpacity: 0.5,
+        strokeWeight: 1,
+        fillOpacity,
       };
 
       if (airspace.mapBounds.length > 0) {
@@ -125,6 +121,7 @@ const airportsOnMap = computed(() => {
 const {isPointInPolygon, vectorDistanceToKm} = useVectorUtilities();
 const {vectorDistance} = useBasicVectorOperations();
 
+const highlightedAirspaces = ref([]);
 
 const getAirspacesAtCoordinates = (clickCoordinates) => {
   const airspacesUnderClick = []
@@ -144,7 +141,11 @@ const getAirspacesAtCoordinates = (clickCoordinates) => {
 }
 const handleMapClick = (e) => {
   const clickCoordinates = {lat: e.latLng.lat(), lng: e.latLng.lng()}
-  emits("map-click", {airspaces: getAirspacesAtCoordinates(clickCoordinates), clickCoordinates});
+
+  const airspacesUnderClick = getAirspacesAtCoordinates(clickCoordinates);
+  highlightedAirspaces.value = airspacesUnderClick.map(a => a.name);
+
+  emits("map-click", {airspaces: airspacesUnderClick, clickCoordinates});
 }
 
 const handleReportingPointClick = (airport, reportingPoint) => {
@@ -169,7 +170,7 @@ const handleAirportClick = (airport) => {
     ref="mapRef"
   >
     <template v-for="airspace in airspaces" :key="airspace.name">
-      <Polygon :options="airspace" @click="handleMapClick" />
+      <Polygon :options="airspace" @click="handleMapClick"/>
     </template>
 
     <slot/>