fix track mock location
All checks were successful
Build & Deploy on Dev / build (push) Successful in 2m47s
All checks were successful
Build & Deploy on Dev / build (push) Successful in 2m47s
This commit is contained in:
parent
7fdece0a28
commit
859d74056a
2 changed files with 206 additions and 158 deletions
|
|
@ -32,7 +32,7 @@ const apiKey = ref<string>(
|
|||
)
|
||||
const zoomMap = ref<number>(18)
|
||||
|
||||
async function initializeMap() {
|
||||
async function initializeMap(position: GeolocationPosition) {
|
||||
try {
|
||||
// Load modules of ArcGIS
|
||||
loadModules([
|
||||
|
|
@ -43,159 +43,146 @@ async function initializeMap() {
|
|||
'esri/Graphic',
|
||||
'esri/layers/TileLayer',
|
||||
]).then(async ([esriConfig, Map, MapView, Point, Graphic, TileLayer]) => {
|
||||
// Set apiKey
|
||||
// esriConfig.apiKey =
|
||||
// 'AAPK4f700a4324d04e9f8a1a134e0771ac45FXWawdCl-OotFfr52gz9XKxTDJTpDzw_YYcwbmKDDyAJswf14FoPyw0qBkN64DvP'
|
||||
|
||||
// Create a FeatureLayer using a custom server URL
|
||||
// const hillshadeLayer = new TileLayer({
|
||||
// url: `https://bmagis.bangkok.go.th/arcgis/rest/services/cache/BMA_3D_2D_Cache/MapServer`,
|
||||
// })
|
||||
|
||||
const map = new Map({
|
||||
basemap: 'streets',
|
||||
// basemap: 'arcgis-topographic',
|
||||
// layers: [hillshadeLayer],
|
||||
})
|
||||
|
||||
navigator.geolocation.getCurrentPosition(async (position) => {
|
||||
const { latitude, longitude } = position.coords
|
||||
const { latitude, longitude } = position.coords
|
||||
|
||||
const mapView = new MapView({
|
||||
container: 'mapViewDisplay',
|
||||
map: map,
|
||||
center: {
|
||||
latitude: latitude,
|
||||
longitude: longitude,
|
||||
}, // Set the initial map center current position
|
||||
const mapView = new MapView({
|
||||
container: 'mapViewDisplay',
|
||||
map: map,
|
||||
center: {
|
||||
latitude: latitude,
|
||||
longitude: longitude,
|
||||
}, // Set the initial map center current position
|
||||
|
||||
zoom: zoomMap.value,
|
||||
constraints: {
|
||||
snapToZoom: false, // Disables snapping to the zoom level
|
||||
minZoom: zoomMap.value, // Set minimum zoom level
|
||||
maxZoom: zoomMap.value, // Set maximum zoom level (same as minZoom for fixed zoom)
|
||||
},
|
||||
zoom: zoomMap.value,
|
||||
constraints: {
|
||||
snapToZoom: false, // Disables snapping to the zoom level
|
||||
minZoom: zoomMap.value, // Set minimum zoom level
|
||||
maxZoom: zoomMap.value, // Set maximum zoom level (same as minZoom for fixed zoom)
|
||||
},
|
||||
|
||||
ui: {
|
||||
components: [], // Empty array to remove all default UI components
|
||||
},
|
||||
})
|
||||
ui: {
|
||||
components: [], // Empty array to remove all default UI components
|
||||
},
|
||||
})
|
||||
|
||||
// ตำแหน่งของผู้ใช้
|
||||
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',
|
||||
}
|
||||
const userGraphic = new Graphic({
|
||||
geometry: userPoint,
|
||||
symbol: userSymbol,
|
||||
})
|
||||
mapView.graphics.add(userGraphic)
|
||||
// Get POI place ยิงไปขอที่ server ของกทม.ก่อน
|
||||
await axios
|
||||
.get(
|
||||
'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
|
||||
{
|
||||
params: {
|
||||
f: 'json', // Format JSON response
|
||||
distance: 2000,
|
||||
category: 'POI',
|
||||
location: {
|
||||
spatialReference: { wkid: 4326 },
|
||||
x: longitude,
|
||||
y: latitude,
|
||||
},
|
||||
token: apiKey.value,
|
||||
// ตำแหน่งของผู้ใช้
|
||||
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',
|
||||
}
|
||||
const userGraphic = new Graphic({
|
||||
geometry: userPoint,
|
||||
symbol: userSymbol,
|
||||
})
|
||||
mapView.graphics.add(userGraphic)
|
||||
// Get POI place ยิงไปขอที่ server ของกทม.ก่อน
|
||||
await axios
|
||||
.get(
|
||||
'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/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)
|
||||
token: apiKey.value,
|
||||
},
|
||||
}
|
||||
)
|
||||
.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,
|
||||
})
|
||||
.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,
|
||||
},
|
||||
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(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,
|
||||
})
|
||||
},
|
||||
}
|
||||
)
|
||||
.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)
|
||||
})
|
||||
})
|
||||
})
|
||||
updateLocation(latitude, longitude, poiPlaceName.value)
|
||||
})
|
||||
.catch((error) => {
|
||||
// console.error('Error fetching points of interest:', error)
|
||||
})
|
||||
})
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Error loading the map', error)
|
||||
|
|
@ -236,7 +223,7 @@ const requestLocationPermission = () => {
|
|||
}
|
||||
|
||||
// Check for critical errors (invalid coordinates) that prevent showing location
|
||||
const hasCriticalErrors = validationResult.errors.some(error =>
|
||||
const hasCriticalErrors = validationResult.errors.some((error) =>
|
||||
error.includes('พิกัดตำแหน่งไม่ถูกต้อง')
|
||||
)
|
||||
|
||||
|
|
@ -261,7 +248,7 @@ const requestLocationPermission = () => {
|
|||
|
||||
// Center map on user's location if map is initialized
|
||||
if (privacyStore.isAccepted) {
|
||||
await initializeMap()
|
||||
await initializeMap(position)
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue