diff --git a/src/components/AscGISMap.vue b/src/components/AscGISMap.vue index dfc1ff0..dbcc7f6 100644 --- a/src/components/AscGISMap.vue +++ b/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) })