119 lines
3 KiB
Vue
119 lines
3 KiB
Vue
<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>
|