Dalsi iterace planovace, snad jiz kompletni vrstvy mapy

2024-04-17 13:21:32 +02:00
parent cee979fec8
commit de0b75163d
10 changed files with 745 additions and 430 deletions
@@ -0,0 +1,120 @@
+<script setup>
+import {computed, ref, watch} from "vue";
+import {Marker, CustomMarker, Polyline} from "vue3-google-map";
+import MapWrapper from "components/map/MapWrapper.vue";
+import AirspaceInfoWindow from "components/map/AirspaceInfoWindow.vue";
+import {useFlightPlanObjects, useFlightPlanUtils} from "src/composables/flightPlan";
+import {useGeocode} from "src/composables/geocoding";
+
+const props = defineProps({
+  flightPlan: {
+    type: Object,
+    required: true
+  },
+  airspaceData: {
+    type: Array,
+    required: true
+  },
+  airports: {
+    type: Array,
+    required: true,
+  },
+  pointsOfInterest: {
+    type: Array,
+    required: true
+  }
+});
+const emits = defineEmits(["markers-changed"]);
+
+const {center} = useGeocode();
+
+const {markerObject, googleMapsCustomMarkerObject, googleMapsMarkerObject, infoWindowObject, editableNameTypes} = useFlightPlanObjects();
+const {getIcon, getMarkersFrom} = useFlightPlanUtils();
+
+const infoWindow = ref(infoWindowObject({}));
+
+const handleMapClick = ({clickCoordinates, airspaces, airport}) => {
+  console.log(clickCoordinates, airspaces, airport);
+  infoWindow.value = infoWindowObject({active: true, airspaces, position: clickCoordinates, airport})
+}
+
+const handleMarkerClick = (marker) => {
+  infoWindow.value = infoWindowObject({active: true, marker})
+}
+
+const handlePoiClick = (poi) => {
+  infoWindow.value = infoWindowObject({active: true, poi})
+}
+
+const markers = ref([]);
+
+watch(() => props.flightPlan.track, (newVal) => {
+  markers.value = getMarkersFrom(props.flightPlan);
+}, {immediate: true, deep: true});
+
+const track = computed(() => markers.value.map(m => ({lat: m.gpsLatitude, lng: m.gpsLongitude})));
+
+const addMarker = async (point) => {
+  if (!point) return;
+  markers.value.push(markerObject({...point}));
+
+  emits("markers-changed", markers.value);
+  infoWindow.value = infoWindowObject({active: false});
+}
+
+const {searchPlaceName} = useGeocode();
+const handleMarkerMove = async (idx, event) => {
+  markers.value[idx].name = await searchPlaceName(event.lat(), event.lng());
+  markers.value[idx].gpsLatitude = event.lat();
+  markers.value[idx].gpsLongitude = event.lng();
+  markers.value[idx].type = "mapPoint"
+
+  emits("markers-changed", markers.value);
+}
+</script>
+
+<template>
+  <MapWrapper
+    style="width: 100%; height: 100%; min-height: 500px"
+    :center="center"
+    :zoom="8"
+    :airspaces-data="airspaceData"
+    :airports="airports"
+    @map-click="handleMapClick"
+  >
+    <AirspaceInfoWindow
+      v-if="infoWindow.active"
+      :info-window="infoWindow"
+      @close="infoWindow.active=false"
+      @add-to-route="addMarker"
+    />
+
+    <template v-for="poi in pointsOfInterest" :key="poi">
+      <CustomMarker
+        v-if="poi.gpsLatitude && poi.gpsLongitude"
+        :options="{position: {lat: poi.gpsLatitude, lng: poi.gpsLongitude}, anchorPoint: 'BOTTOM_CENTER'}"
+        @click.stop="handlePoiClick(poi)"
+      >
+        <q-icon name="place" style="color: orange; font-size: 30px"/>
+      </CustomMarker>
+    </template>
+
+
+    <template v-for="(marker, i) in markers" :key="marker">
+      <Marker
+        v-if="editableNameTypes.includes(marker.type)"
+        :options="googleMapsMarkerObject(marker)"
+        @click="handleMarkerClick(marker)"
+        @dragend="handleMarkerMove(i, $event.latLng)"
+      />
+<!--      <CustomMarker-->
+<!--        v-else-if="['poi', 'airport']marker.type !== 'poi'"-->
+<!--        :options="googleMapsCustomMarkerObject(marker)"-->
+<!--        @click="handleMarkerClick(marker)"-->
+<!--      >-->
+<!--        <q-icon :name="getIcon(marker.type)" style="font-size: 30px;color: #810000"/>-->
+<!--      </CustomMarker>-->
+    </template>
+    <Polyline :options="{path: track, geodesic: true, strokeColor: '#ff0202', strokeOpacity: 0.5, strokeWeight: 5}"/>
+  </MapWrapper>
+</template>