From 91c8d4a8e9144be07973f82bbf2b47285745de2c Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 7 Nov 2024 13:49:42 +0700
Subject: [PATCH] updated POI

---
 src/components/AscGISMap.vue | 57 +++++++++++++++++++++++++++++++++---
 1 file changed, 53 insertions(+), 4 deletions(-)

diff --git a/src/components/AscGISMap.vue b/src/components/AscGISMap.vue
index dbcc7f6..d49d1fc 100644
--- a/src/components/AscGISMap.vue
+++ b/src/components/AscGISMap.vue
@@ -83,8 +83,7 @@ async function initializeMap() {
           symbol: userSymbol,
         })
         mapView.graphics.add(userGraphic)
-        // Get POI place
-        // https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/
+        // Get POI place ยิงไปขอที่ server ของกทม.ก่อน
         await axios
           .get(
             'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
@@ -132,8 +131,58 @@ async function initializeMap() {
 
             updateLocation(latitude, longitude, poiPlaceName.value)
           })
-          .catch((error) => {
-            console.error('Error fetching points of interest:', error)
+          .catch(async (error) => {
+            // console.error('Error fetching points of interest:', error)
+            // Get POI place ยิงไปขอที่ server arcgis ไม่ต้องใช้ token
+            await axios
+              .get(
+                'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
+                {
+                  params: {
+                    f: 'json', // Format JSON response
+                    distance: 2000,
+                    category: 'POI',
+                    location: {
+                      spatialReference: { wkid: 4326 },
+                      x: longitude,
+                      y: latitude,
+                    },
+                  },
+                }
+              )
+              .then((response) => {
+                // console.log('poi', response.data.location)
+                poiPlaceName.value = response.data.address
+                  ? response.data.address.PlaceName === ''
+                    ? response.data.address.ShortLabel
+                    : response.data.address.PlaceName
+                  : 'ไม่พบข้อมูล'
+                const poiPoint = new Point({
+                  longitude: response.data.location.x,
+                  latitude: response.data.location.y,
+                })
+                const poiSymbol = {
+                  type: 'picture-marker',
+                  url: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
+                  width: '32px',
+                  height: '32px',
+                }
+                const poiGraphic = new Graphic({
+                  geometry: poiPoint,
+                  symbol: poiSymbol,
+                })
+                mapView.graphics.add(poiGraphic)
+                // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
+                mapView.goTo({
+                  target: [userPoint, poiPoint],
+                  zoom: zoomMap.value,
+                })
+
+                updateLocation(latitude, longitude, poiPlaceName.value)
+              })
+              .catch((error) => {
+                // console.error('Error fetching points of interest:', error)
+              })
           })
       })
     })