ArcGisMap

src/components/AscMaps.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { loadModules } from 'esri-loader'
+// import http from '@/plugins/http'
+// import config from '@/app.config'
+
+async function initMap() {
+  const [esriConfig, Map, MapView, Locate, Graphic, Locator] = await (
+    loadModules as any
+  )([
+    'esri/config',
+    'esri/Map',
+    'esri/views/MapView',
+    'esri/widgets/Locate',
+    'esri/Graphic',
+    'esri/tasks/Locator',
+    'esri/rest/locator',
+  ])
+
+  esriConfig.apiKey =
+    'AAPK2385005bb90a4410ae22d55f6f735877JmnPjYMAxBHQFYLGaXAbZc39AdiWjFKpt-mbsaP50ceZwVH9FdT7WMZ80VanLLWs' // Replace with your actual API key
+
+  //typeMap
+  const map = new Map({
+    basemap: 'osm-streets-relief',
+  })
+
+  // // Check if the container element exists
+  const view = new MapView({
+    map: map,
+    center: [0, 0],
+    zoom: 13, // scale: 72223.819286
+    container: 'viewDiv',
+    constraints: {
+      snapToZoom: false,
+    },
+  })
+
+  // หาตำแหน่ง
+  const locateWidget = new Locate({
+    view: view,
+    useHeadingEnabled: false,
+  })
+  view.ui.add(locateWidget, 'top-left')
+
+  navigator.geolocation.getCurrentPosition(
+    (position) => {
+      const [longitude, latitude] = [
+        position.coords.longitude,
+        position.coords.latitude,
+      ]
+      const locator = new Locator(
+        'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/'
+      )
+      findNearestPlaceFromAPI(position, locator)
+
+      // Create a graphic for the current location
+      const point = {
+        type: 'point',
+        longitude: longitude,
+        latitude: latitude,
+      }
+
+      const marker = new Graphic({
+        geometry: point,
+        symbol: {
+          type: 'simple-marker',
+          color: [226, 119, 59],
+          outline: {
+            color: [255, 255, 255],
+            width: 2,
+          },
+        },
+      })
+
+      // Add the graphic to the view
+      view.graphics.removeAll() // ลบกราฟิกทั้งหมดก่อนเพื่อป้องกันการทับซ้อน
+      view.graphics.add(marker)
+
+      // Center the view on the current location
+      view.goTo({
+        center: [longitude, latitude],
+        zoom: 18,
+      })
+    },
+
+    (error) => {
+      console.error('Error getting current location:', error)
+    }
+  )
+}
+
+async function findNearestPlaceFromAPI(currentPosition: any, locator: any) {
+  console.log(currentPosition, locator)
+  // ทำการค้นหาสถานที่ใกล้ที่สุด
+  const result = await locator.addressToLocations({
+    location: {
+      x: currentPosition.coords.longitude,
+      y: currentPosition.coords.latitude,
+    },
+
+    distance: 5000, // รัศมีค้นหา 5 กิโลเมตร (ปรับตามต้องการ)
+    category: 'POI', //
+  })
+  console.log('test', result)
+}
+
+onMounted(async () => {
+  // Load the ArcGIS API modules
+  await initMap()
+})
+</script>
+<template>
+  <div>
+    <div id="viewDiv" style="height: 50vh"></div>
+  </div>
+</template>
+
+<style scoped></style>