fix switch Landscape -> Portrait
This commit is contained in:
parent
ec22714f01
commit
e9d28197df
5 changed files with 964 additions and 279 deletions
|
|
@ -1,10 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { nextTick, onBeforeUnmount, onMounted, shallowRef, ref } from 'vue'
|
||||
import { loadModules } from 'esri-loader'
|
||||
import axios from 'axios'
|
||||
|
||||
import type { LocationObject } from '@/interface/index/Main'
|
||||
|
||||
const emit = defineEmits(['update:location'])
|
||||
|
||||
function updateLocation(latitude: number, longitude: number, namePOI: string) {
|
||||
|
|
@ -20,8 +18,67 @@ const apiKey = ref<string>(
|
|||
// 'AAPK4f700a4324d04e9f8a1a134e0771ac45FXWawdCl-OotFfr52gz9XKxTDJTpDzw_YYcwbmKDDyAJswf14FoPyw0qBkN64DvP'
|
||||
)
|
||||
const zoomMap = ref<number>(18)
|
||||
const mapViewRef = shallowRef<any>(null)
|
||||
const mapContainerRef = ref<HTMLElement | null>(null)
|
||||
const mapRenderKey = ref<number>(0)
|
||||
let resizeTimer: ReturnType<typeof setTimeout> | null = null
|
||||
let resizeRetryCount = 0
|
||||
const MAX_RESIZE_RETRY = 8
|
||||
const isRecreatingMap = ref<boolean>(false)
|
||||
|
||||
function scheduleMapResize() {
|
||||
if (resizeTimer) {
|
||||
clearTimeout(resizeTimer)
|
||||
}
|
||||
|
||||
// Delay a little to wait for viewport + CSS layout to settle after rotation.
|
||||
resizeTimer = setTimeout(async () => {
|
||||
await nextTick()
|
||||
|
||||
if (!mapViewRef.value || !mapContainerRef.value) {
|
||||
return
|
||||
}
|
||||
|
||||
const container = mapContainerRef.value
|
||||
const mapView = mapViewRef.value
|
||||
|
||||
if (container.clientWidth === 0 || container.clientHeight === 0) {
|
||||
if (resizeRetryCount < MAX_RESIZE_RETRY) {
|
||||
resizeRetryCount += 1
|
||||
scheduleMapResize()
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
resizeRetryCount = 0
|
||||
|
||||
// Force canvas to bind to the current element after repeated rotations.
|
||||
if (mapView.container !== container) {
|
||||
mapView.container = null
|
||||
await nextTick()
|
||||
mapView.container = container
|
||||
}
|
||||
|
||||
mapView.resize()
|
||||
mapView
|
||||
.goTo(
|
||||
{
|
||||
center: mapView.center,
|
||||
zoom: mapView.zoom,
|
||||
},
|
||||
{ animate: false }
|
||||
)
|
||||
.catch(() => {
|
||||
// Ignore interruption errors from rapid orientation changes.
|
||||
})
|
||||
}, 300)
|
||||
}
|
||||
|
||||
async function initializeMap() {
|
||||
if (mapViewRef.value || !mapContainerRef.value) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
// Load modules of ArcGIS
|
||||
loadModules([
|
||||
|
|
@ -67,7 +124,7 @@ async function initializeMap() {
|
|||
|
||||
// สร้าง MapView
|
||||
const mapView = new MapView({
|
||||
container: 'mapViewDisplay', // div ที่จะแสดงแผนที่
|
||||
container: mapContainerRef.value, // div ที่จะแสดงแผนที่
|
||||
map: map,
|
||||
center: {
|
||||
latitude: latitude,
|
||||
|
|
@ -79,6 +136,7 @@ async function initializeMap() {
|
|||
components: [], // Empty array to remove all default UI components
|
||||
},
|
||||
})
|
||||
mapViewRef.value = mapView
|
||||
|
||||
// สร้างสัญลักษณ์ของหมุด
|
||||
const markerSymbol = new PictureMarkerSymbol({
|
||||
|
|
@ -98,9 +156,42 @@ async function initializeMap() {
|
|||
position: 'top-right', // ตำแหน่งของ Search widget
|
||||
})
|
||||
|
||||
// ถ้าได้ token จาก กทม. มา
|
||||
// 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,
|
||||
// },
|
||||
// }
|
||||
// )
|
||||
// .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,
|
||||
// })
|
||||
|
||||
// updateLocation(latitude, longitude, poiPlaceName.value)
|
||||
// })
|
||||
// .catch(async () => {
|
||||
await axios
|
||||
.get(
|
||||
'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
|
||||
'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
|
||||
{
|
||||
params: {
|
||||
f: 'json', // Format JSON response
|
||||
|
|
@ -111,52 +202,20 @@ async function initializeMap() {
|
|||
x: longitude,
|
||||
y: latitude,
|
||||
},
|
||||
token: apiKey.value,
|
||||
},
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
console.log('poi', response.data.location)
|
||||
// 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,
|
||||
})
|
||||
|
||||
updateLocation(latitude, longitude, poiPlaceName.value)
|
||||
})
|
||||
.catch(async () => {
|
||||
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
|
||||
: 'ไม่พบข้อมูล'
|
||||
|
||||
updateLocation(longitude, latitude, poiPlaceName.value)
|
||||
})
|
||||
updateLocation(longitude, latitude, poiPlaceName.value)
|
||||
})
|
||||
// })
|
||||
|
||||
let searchMarker: any = null
|
||||
|
||||
|
|
@ -186,9 +245,41 @@ async function initializeMap() {
|
|||
symbol: markerSymbol,
|
||||
})
|
||||
if (searchMarker) {
|
||||
// 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,
|
||||
// },
|
||||
// }
|
||||
// )
|
||||
// .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,
|
||||
// })
|
||||
|
||||
// updateLocation(latitude, longitude, poiPlaceName.value)
|
||||
// })
|
||||
// .catch(async () => {
|
||||
await axios
|
||||
.get(
|
||||
'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
|
||||
'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
|
||||
{
|
||||
params: {
|
||||
f: 'json', // Format JSON response
|
||||
|
|
@ -199,52 +290,20 @@ async function initializeMap() {
|
|||
x: longitude,
|
||||
y: latitude,
|
||||
},
|
||||
token: apiKey.value,
|
||||
},
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
console.log('poi', response.data.location)
|
||||
// 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,
|
||||
})
|
||||
|
||||
updateLocation(latitude, longitude, poiPlaceName.value)
|
||||
})
|
||||
.catch(async () => {
|
||||
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
|
||||
: 'ไม่พบข้อมูล'
|
||||
|
||||
updateLocation(longitude, latitude, poiPlaceName.value)
|
||||
})
|
||||
updateLocation(longitude, latitude, poiPlaceName.value)
|
||||
})
|
||||
// })
|
||||
}
|
||||
|
||||
mapView.graphics.add(searchMarker)
|
||||
|
|
@ -275,9 +334,41 @@ async function initializeMap() {
|
|||
} else {
|
||||
searchMarker.geometry = point // ย้ายหมุดไปยังตำแหน่งใหม่
|
||||
if (searchMarker) {
|
||||
// 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: lon,
|
||||
// y: lat,
|
||||
// },
|
||||
// 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,
|
||||
// })
|
||||
|
||||
// updateLocation(latitude, longitude, poiPlaceName.value)
|
||||
// })
|
||||
// .catch(async () => {
|
||||
await axios
|
||||
.get(
|
||||
'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
|
||||
'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
|
||||
{
|
||||
params: {
|
||||
f: 'json', // Format JSON response
|
||||
|
|
@ -288,52 +379,20 @@ async function initializeMap() {
|
|||
x: lon,
|
||||
y: lat,
|
||||
},
|
||||
token: apiKey.value,
|
||||
},
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
console.log('poi', response.data.location)
|
||||
// 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,
|
||||
})
|
||||
|
||||
updateLocation(latitude, longitude, poiPlaceName.value)
|
||||
})
|
||||
.catch(async () => {
|
||||
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: lon,
|
||||
y: lat,
|
||||
},
|
||||
},
|
||||
}
|
||||
)
|
||||
.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
|
||||
: 'ไม่พบข้อมูล'
|
||||
|
||||
updateLocation(lat, lon, poiPlaceName.value)
|
||||
})
|
||||
updateLocation(lat, lon, poiPlaceName.value)
|
||||
})
|
||||
// })
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -350,14 +409,64 @@ async function initializeMap() {
|
|||
}
|
||||
}
|
||||
|
||||
async function recreateMapOnOrientationChange() {
|
||||
if (isRecreatingMap.value) {
|
||||
return
|
||||
}
|
||||
|
||||
isRecreatingMap.value = true
|
||||
|
||||
try {
|
||||
if (resizeTimer) {
|
||||
clearTimeout(resizeTimer)
|
||||
resizeTimer = null
|
||||
}
|
||||
|
||||
if (mapViewRef.value) {
|
||||
mapViewRef.value.destroy()
|
||||
mapViewRef.value = null
|
||||
}
|
||||
|
||||
mapRenderKey.value += 1
|
||||
await nextTick()
|
||||
await initializeMap()
|
||||
scheduleMapResize()
|
||||
} finally {
|
||||
isRecreatingMap.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await initializeMap()
|
||||
|
||||
window.addEventListener('resize', scheduleMapResize)
|
||||
window.addEventListener('orientationchange', recreateMapOnOrientationChange)
|
||||
window.addEventListener('pageshow', scheduleMapResize)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', scheduleMapResize)
|
||||
window.removeEventListener(
|
||||
'orientationchange',
|
||||
recreateMapOnOrientationChange
|
||||
)
|
||||
window.removeEventListener('pageshow', scheduleMapResize)
|
||||
|
||||
if (resizeTimer) {
|
||||
clearTimeout(resizeTimer)
|
||||
resizeTimer = null
|
||||
}
|
||||
|
||||
if (mapViewRef.value) {
|
||||
mapViewRef.value.destroy()
|
||||
mapViewRef.value = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card bordered flat class="col-12 bg-grey-2 shadow-0">
|
||||
<div id="mapViewDisplay" style="height: 35vh"></div>
|
||||
<div :key="mapRenderKey" ref="mapContainerRef" style="height: 35vh"></div>
|
||||
|
||||
<div
|
||||
:class="
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue