Zakladni verze planovace

src/components/map/MapWrapper.vue

@@ -1,6 +1,7 @@
 <script setup>
-import {Circle, GoogleMap, Marker, Polygon} from "vue3-google-map";
+import {Circle, GoogleMap, CustomMarker, Polygon} from "vue3-google-map";
 import {computed, ref, watch} from "vue";
+import {useBasicVectorOperations, useVectorUtities} from "src/graphql/fragments/vectorUtilities";
 
 const props = defineProps({
   bounds: {
@@ -87,46 +88,56 @@ const atzs = computed(() => {
 
 // TODO: pridat letiste
 
-function isPointInPolygon(clickPoint, polygonCoords) {
-    var count = 0;
-    var x = clickPoint.lng, y = clickPoint.lat;
+const {isPointInPolygon} = useVectorUtities();
+const {vectorDistance} = useBasicVectorOperations();
 
-    for (var i = 0; i < polygonCoords.length; i++) {
-        var iNext = (i + 1) % polygonCoords.length;
+const handleLayerClick = (e) => {
+  const clickCoordinates = {lat: e.latLng.lat(), lng: e.latLng.lng()}
 
-        var xi = polygonCoords[i].lng, yi = polygonCoords[i].lat;
-        var xiNext = polygonCoords[iNext].lng, yiNext = polygonCoords[iNext].lat;
+  const airspacesUnderClick = []
 
-        var test = ((yi > y) !== (yiNext > y)) && (x < (xiNext - xi) * (y - yi) / (yiNext - yi) + xi);
-        if (test) count++;
+  for (const atz of atzs.value) {
+    const distance = vectorDistance(
+      {gpsLatitude: e.latLng.lat(), gpsLongitude: e.latLng.lng()},
+      {gpsLatitude: atz.center.lat, gpsLongitude: atz.center.lng},
+    );
+
+    if (distance < 0.079) {  // tohle je nejaka bulharska konstanta, +- 5km od stredu letiste
+      airspacesUnderClick.push(atz);
     }
-
-    return count % 2 === 1; // Lichý počet průsečíků = bod uvnitř
-}
-
-const showInfo = (e) => {
-  for (const airspace of airspaces.value) {
-    const clickCoords = {lat: e.latLng.lat(), lng: e.latLng.lng()}
-
-    if (airspace.path)
-      console.log(airspace.name, isPointInPolygon(clickCoords, airspace.path));
-    else {
-      // console.log(airspace);
-    }
-
   }
+
+  for (const airspace of airspaces.value) {
+    if (airspace.path && isPointInPolygon(clickCoordinates, airspace.path)) {
+      airspacesUnderClick.push(airspace);
+    }
+  }
+  emits("map-click", {airspaces: airspacesUnderClick, clickCoordinates});
 }
 
+const emits = defineEmits(["map-click"]);
+
+const handleMapClick = (e) => {
+  const clickCoordinates = {lat: e.latLng.lat(), lng: e.latLng.lng()}
+  emits("map-click", {clickCoordinates});
+};
+
 </script>
 
 <template>
-  <GoogleMap :api-key="key" v-bind="$attrs" map-type-id="terrain" :max-zoom="13" ref="mapRef">
+  <GoogleMap :api-key="key" v-bind="$attrs" @click="handleMapClick" map-type-id="terrain" :max-zoom="13" ref="mapRef">
     <slot/>
 
     <template v-for="airspace in airspaces" :key="airspace">
-      <Polygon :options="airspace" @click=showInfo  v-if="airspace.path"/>
-      <Circle :options="airspace"  @click=showInfo  v-if="airspace.center && airspace.radius"/>
+      <Polygon :options="airspace" @click=handleLayerClick v-if="airspace.path"/>
+      <Circle :options="airspace" @click=handleLayerClick v-if="airspace.center && airspace.radius"/>
+    </template>
+
+    <template v-for="atz in atzs" :key="atz">
+      <Circle :options="atz" @click=handleLayerClick />
+      <CustomMarker :options="{position: atz.center, anchorPoint: 'CENTER'}" @click="handleLayerClick">
+        <q-icon name="local_airport" style="font-size: 24px" class="text-primary"/>
+      </CustomMarker>
     </template>
-    <Circle :options="atz" v-for="atz in atzs" @click=showInfo :key="atz"/>
   </GoogleMap>
 </template>