added googlemap and openlayer

Added Vue3 googlemap added Vue3 Openlayers ⭐
aiddin · May 6, 2024 · 479c878 · 479c878
1 parent f87a206
commit 479c878
Show file tree

Hide file tree

Showing 3 changed files with 241 additions and 114 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,12 +1,13 @@
 <template>
 
-
+<!-- <Vue3GoogleMap/> -->
   <VueOpenLayer/>
 </template>
 <script setup>
 import ArcGisMap from './components/ArcGisMap.vue'
-import LeafLetMap from './components/LeafLetMap.vue'
+// import LeafLetMap from './components/LeafLetMap.vue'
 import VueOpenLayer from './components/Vue3Openlayers.vue'
+import Vue3GoogleMap from './components/Vue3GoogleMap.vue';
 </script>
 <style>
 </style>
diff --git a/src/components/Vue3GoogleMap.vue b/src/components/Vue3GoogleMap.vue
@@ -0,0 +1,86 @@
+<template>
+    <div>
+      <GoogleMap  id="map"
+      api-key="AIzaSyBlUfgGLBFqjvv_NBCxxAsD7-HoIfE3l0w"
+      style="width: 100%; height: 500px"
+        :center="center"
+        :zoom="15"
+        @click="recordPath"
+      >
+        <Marker :options="{ position: center }" />
+        <Marker v-for="marker in markers" :key="marker.id" :options="{ position: marker.position }" />
+      </GoogleMap>
+      <button @click="startRecording" :disabled="isRecording">START</button>
+      <button @click="stopRecording" :disabled="!isRecording">STOP</button>
+      <button @click="addMarker" :disabled="!isRecording">+</button>
+    </div>
+  </template>
+
+  <script setup>
+  import { ref, onMounted } from 'vue';
+  import { GoogleMap, Marker } from 'vue3-google-map';
+  import html2canvas from "html2canvas";
+
+  const center = ref({ lat: 0, lng: 0 });
+  const path = ref([]);
+  const markers = ref([]);
+  const isRecording = ref(false);
+  
+  const startRecording = () => {
+    isRecording.value = true;
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        const { latitude, longitude } = position.coords;
+        const newPoint = { lat: latitude, lng: longitude };
+        path.value.push(newPoint);
+        center.value.lat = latitude;
+        center.value.lng = longitude;
+      },
+      (error) => {
+        console.error(error);
+      },
+      { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
+    );
+  };
+  
+  const stopRecording = () => {
+    isRecording.value = false;
+    captureMap()
+    path.value = [];
+    markers.value = [];
+  };
+  
+  const addMarker = (event) => {
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        const { latitude, longitude } = position.coords;
+        const newPoint = { lat: latitude, lng: longitude };
+        path.value.push(newPoint);
+        center.value.lat = latitude;
+        center.value.lng = longitude;
+      },
+      (error) => {
+        console.error(error);
+      },
+      { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
+    );
+    const newMarker = { id: markers.value.length + 1, position: { lat:  center.value.lat, lng: center.value.lng } };
+    markers.value.push(newMarker);
+  };
+
+  const captureMap = async () => {
+  const mapContainerElement = document.getElementById("map");
+
+  html2canvas(mapContainerElement).then((canvas) => {
+    const image = canvas.toDataURL();
+    const link = document.createElement('a');
+    link.href = image;
+    link.download = 'map_capture.png';
+    link.click();
+  });
+};
+  
+  onMounted(() => {
+    startRecording();
+  });
+  </script>
diff --git a/src/components/Vue3Openlayers.vue b/src/components/Vue3Openlayers.vue
@@ -1,141 +1,181 @@
 <template>
     <div>
-      <div id="map" style="width: 100%; height: 400px;"></div>
-      <button @click="startRecording" v-if="!recording">START</button>
-      <button @click="stopRecording" v-if="recording">STOP</button>
+      <div id="map" style="width: 100%; height: 400px;"> </div>
+      <button @click="startRecording" style="margin-right:100px">START</button>
+      <button @click="stopRecording"  style="margin-right:100px">STOP</button>
       <button @click="dropMarker">(+)</button>
     </div>
   </template>
 
-  <script>
+  <script setup>
   import { ref, onMounted } from 'vue';
   import 'ol/ol.css';
   import { Map, View } from 'ol';
   import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
   import { OSM, Vector as VectorSource } from 'ol/source';
   import { Style, Circle, Fill, Stroke } from 'ol/style';
-  import { Point } from 'ol/geom';
   
-  export default {
-    name: 'Map',
-    data() {
-      return {
-        map: null,
-        recording: false,
-        pathCoordinates: [],
-        markers: [],
-      };
-    },
-    mounted() {
-      this.initializeMap();
-      this.getLocation();
-    },
-    methods: {
-      initializeMap() {
-        this.map = new Map({
+  import Feature from 'ol/Feature.js';
+  import { useGeographic } from 'ol/proj';
+  import  Overlay  from 'ol/Overlay';
+  import html2canvas from "html2canvas";
+  import marker from "../assets/vue.svg"
+  import LineString from 'ol/geom/LineString.js';
+  const map = ref(null);
+  const recording = ref(false);
+  const pathCoordinates = ref([]);
+  const markers = ref([]);
+  const vectorSource = new VectorSource(); // Create a VectorSource instance
+
+  onMounted(() => {
+    useGeographic();
+    initializeMap();
+  });
+  
+  const initializeMap = () => {
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        const { latitude, longitude } = position.coords;
+  
+        map.value = new Map({
           target: 'map',
           layers: [
             new TileLayer({
               source: new OSM(),
             }),
+            new VectorLayer({
+            source: vectorSource,
+          }),
           ],
           view: new View({
-            center: [0, 0],
-            zoom: 2,
+            center: [longitude, latitude],
+            zoom: 17,
           }),
         });
-      },
-
-     getLocation() {
-  if (navigator.geolocation) {
-    navigator.geolocation.getCurrentPosition(
-      (position) => {
-        const coords = [position.coords.longitude, position.coords.latitude];
-        const view = map.getView();
-        view.setCenter(coords);
-      },
-      (error) => {
-        console.error(error);
-      },
-      { timeout: 10000 }
+      }
     );
-  } else {
-    console.error("Geolocation is not supported by this browser.");
   }
-},
-      startRecording() {
-        this.recording = true;
-        this.pathCoordinates = [];
-        this.markers = [];
-  
-        this.map.on('click', this.recordCoordinate);
-      },
-      stopRecording() {
-        this.recording = false;
-        this.map.un('click', this.recordCoordinate);
-  
-        // Generate a static image of the map with the path and markers
-        const canvas = document.createElement('canvas');
-        const size = this.map.getSize();
-        canvas.width = size[0];
-        canvas.height = size[1];
-  
-        const context = canvas.getContext('2d');
-        const mapElement = document.getElementById('map');
-        const mapImage = new Image();
-  
-        mapImage.onload = () => {
-          context.drawImage(mapImage, 0, 0);
-  
-          // Draw the path
-          context.beginPath();
-          context.strokeStyle = 'red';
-          context.lineWidth = 2;
-  
-          const startPoint = this.pathCoordinates[0];
-          context.moveTo(startPoint[0], startPoint[1]);
-  
-          for (let i = 1; i < this.pathCoordinates.length; i++) {
-            const point = this.pathCoordinates[i];
-            context.lineTo(point[0], point[1]);
-          }
-  
-          context.stroke();
-  
-          // Draw the markers
-          context.fillStyle = 'blue';
-          context.strokeStyle = 'white';
-  
-          for (const marker of this.markers) {
-            context.beginPath();
-            context.arc(marker[0], marker[1], 6, 0, 2 * Math.PI);
-            context.fill();
-            context.stroke();
-          }
-  
-          // Save the image
-          const link = document.createElement('a');
-          link.href = canvas.toDataURL('image/png');
-          link.download = 'map_with_path.png';
-          link.click();
-        };
+  const dropMarker = () => {
+  navigator.geolocation.getCurrentPosition(
+    (position) => {
+      const coords = [position.coords.longitude, position.coords.latitude];
+      console.log(coords);
+
+      if (!map.value) {
+        console.error("Map is not initialized.");
+        return;
+      }
+
+      const view = map.value.getView();
+      view.setCenter(coords);
+
+      const markerElement = document.createElement('div');
+      markerElement.innerHTML = `<img src="${marker}" alt="Marker">`;
+
+      const markerOverlay = new Overlay({
+        position: coords,
+        element: markerElement,
+        stopEvent: false,
+      });
+
+      if (map.value) {
+        map.value.addOverlay(markerOverlay);
+      } else {
+        console.error("Map is not initialized.");
+      }
+
+      markers.value.push(coords);
+    },
+    (error) => {
+      console.error(error);
+    },
+    { timeout: 10000 }
+  );
+};
   
-        mapImage.src = this.map.getCanvas().toDataURL();
-      },
-      dropMarker(event) {
-        if (this.recording) {
-          const coordinate = this.map.getEventCoordinate(event);
-          this.markers.push(coordinate);
-        }
-      },
-      recordCoordinate(event) {
-        if (this.recording) {
-          const coordinate = this.map.getEventCoordinate(event);
-          this.pathCoordinates.push(coordinate);
-        }
-      },
+const startRecording = () => {
+  recording.value = true;
+  pathCoordinates.value = [];
+  markers.value = [];
+  recordCoordinate()
+  dropMarker();
+}
+let geolocationWatchId;
+const recordCoordinate = () => {
+  navigator.geolocation.watchPosition(
+    (position) => {
+      const coords = [position.coords.longitude, position.coords.latitude];
+
+      if (!map.value) {
+        console.error("Map is not initialized.");
+        return;
+      }
+
+      const view = map.value.getView();
+      view.setCenter(coords);
+
+      const markerElement = document.createElement('div');
+      markerElement.innerHTML = `<img src="${marker}" alt="Marker">`;
+
+      const markerOverlay = new Overlay({
+        position: coords,
+        element: markerElement,
+        stopEvent: false,
+      });
+
+      if (map.value) {
+        map.value.addOverlay(markerOverlay);
+      } else {
+        console.error("Map is not initialized.");
+      }
+
+      markers.value.push(coords);
+
+      // Add a connecting line between the current marker and the previous one
+      const previousCoord = markers.value[markers.value.length - 2];
+      console.log(markers.value)
+      if (previousCoord) {
+        const lineString = new LineString([previousCoord, coords]);
+const feature = new Feature({ geometry: lineString });
+
+const lineStyle = new Style({
+  stroke: new Stroke({
+    color: 'red', // Set the color of the line
+    width: 5, // Set the desired width of the line
+  }),
+});
+console.log(lineString)
+feature.setStyle(lineStyle);
+vectorSource.addFeature(feature);
+      }
+    },
+
+    (error) => {
+      console.error(error);
     },
-  };
+    { enableHighAccuracy: true, timeout: 10000 }
+  );
+};
+  const stopRecording = () => {
+    captureMap()
+    navigator.geolocation.clearWatch(geolocationWatchId);
+
+  }
+  
+ 
+
+ 
+
+  const captureMap = async () => {
+  const mapContainerElement = document.getElementById("map");
+  html2canvas(mapContainerElement).then((canvas) => {
+    const image = canvas.toDataURL();
+    const link = document.createElement('a');
+    link.href = image;
+    link.download = 'map_capture.png';
+    link.click();
+  });
+};
   </script>
 
   <style scoped>