maskMap

src/components/AscGISMap.vue

@@ -70,28 +70,21 @@ async function initializeMap() {
           },
         })
 
-        // Create a Point object with the coordinates
-        const point = new Point({
-          longitude,
-          latitude,
-        })
-
-        // Pin icon
-        const pinSymbol = {
+        // ตำแหน่งของผู้ใช้
+        const userPoint = new Point({ longitude, latitude })
+        const userSymbol = {
           type: 'picture-marker',
           url: 'http://maps.google.com/mapfiles/ms/icons/red.png',
           width: '32px',
           height: '32px',
         }
-
-        // Create a graphic using the point and symbol
-        const pointGraphic = new Graphic({
-          geometry: point,
-          symbol: pinSymbol,
+        const userGraphic = new Graphic({
+          geometry: userPoint,
+          symbol: userSymbol,
         })
-        mapView.graphics.add(pointGraphic)
-
+        mapView.graphics.add(userGraphic)
         // Get POI place
+        // https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/
         await axios
           .get(
             'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
@@ -110,12 +103,32 @@ async function initializeMap() {
             }
           )
           .then((response) => {
-            // console.log('poi', response.data.address)
+            // 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)
           })