ArcGisMap
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
dcc426268d
commit
b98076ac6c
5 changed files with 143 additions and 1 deletions
15
index.html
15
index.html
|
|
@ -5,10 +5,25 @@
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>BMA ระบบลงเวลาเข้า-ออกงาน</title>
|
<title>BMA ระบบลงเวลาเข้า-ออกงาน</title>
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#viewDiv {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
<script src="https://js.arcgis.com/4.19/"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://js.arcgis.com/4.19/esri/themes/light/main.css"
|
||||||
|
/>
|
||||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzPSF5NxUZ1G8DKBnJvJPTqCR0Ct2xf58&libraries=places"></script>
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzPSF5NxUZ1G8DKBnJvJPTqCR0Ct2xf58&libraries=places"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@
|
||||||
"format": "prettier . --write"
|
"format": "prettier . --write"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@arcgis/core": "^4.28.10",
|
||||||
"@fullcalendar/core": "^6.1.8",
|
"@fullcalendar/core": "^6.1.8",
|
||||||
"@fullcalendar/daygrid": "^6.1.8",
|
"@fullcalendar/daygrid": "^6.1.8",
|
||||||
"@fullcalendar/interaction": "^6.1.8",
|
"@fullcalendar/interaction": "^6.1.8",
|
||||||
|
|
@ -24,6 +25,8 @@
|
||||||
"@googlemaps/js-api-loader": "^1.16.2",
|
"@googlemaps/js-api-loader": "^1.16.2",
|
||||||
"@quasar/extras": "^1.15.8",
|
"@quasar/extras": "^1.15.8",
|
||||||
"@vuepic/vue-datepicker": "^5.2.1",
|
"@vuepic/vue-datepicker": "^5.2.1",
|
||||||
|
"arcgis-js-api": "^4.28.10",
|
||||||
|
"esri-loader": "^3.7.0",
|
||||||
"keycloak-js": "^22.0.2",
|
"keycloak-js": "^22.0.2",
|
||||||
"moment": "^2.29.4",
|
"moment": "^2.29.4",
|
||||||
"pinia": "^2.1.4",
|
"pinia": "^2.1.4",
|
||||||
|
|
@ -39,7 +42,7 @@
|
||||||
"@quasar/vite-plugin": "^1.3.0",
|
"@quasar/vite-plugin": "^1.3.0",
|
||||||
"@rushstack/eslint-patch": "^1.1.4",
|
"@rushstack/eslint-patch": "^1.1.4",
|
||||||
"@types/jsdom": "^20.0.1",
|
"@types/jsdom": "^20.0.1",
|
||||||
"@types/node": "^18.11.12",
|
"@types/node": "^18.18.10",
|
||||||
"@vitejs/plugin-vue": "^4.0.0",
|
"@vitejs/plugin-vue": "^4.0.0",
|
||||||
"@vitejs/plugin-vue-jsx": "^3.0.0",
|
"@vitejs/plugin-vue-jsx": "^3.0.0",
|
||||||
"@vue/eslint-config-prettier": "^7.0.0",
|
"@vue/eslint-config-prettier": "^7.0.0",
|
||||||
|
|
|
||||||
119
src/components/AscMaps.vue
Normal file
119
src/components/AscMaps.vue
Normal file
|
|
@ -0,0 +1,119 @@
|
||||||
|
<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>
|
||||||
|
|
@ -13,6 +13,7 @@ import type { notiType } from '@/interface/index/Main'
|
||||||
|
|
||||||
// import components
|
// import components
|
||||||
import MapCheck from '@/components/MapCheckin.vue'
|
import MapCheck from '@/components/MapCheckin.vue'
|
||||||
|
// import AscMaps from '@/components/AscMaps.vue'
|
||||||
|
|
||||||
// import Stores
|
// import Stores
|
||||||
import { useCounterMixin } from '@/stores/mixin'
|
import { useCounterMixin } from '@/stores/mixin'
|
||||||
|
|
@ -362,6 +363,7 @@ onMounted(async () => {
|
||||||
<div class="col-xs-12 col-md-11 row q-col-gutter-md">
|
<div class="col-xs-12 col-md-11 row q-col-gutter-md">
|
||||||
<div class="col-12 col-sm-8">
|
<div class="col-12 col-sm-8">
|
||||||
<MapCheck @update:location="updateLocation" />
|
<MapCheck @update:location="updateLocation" />
|
||||||
|
<!-- <AscMaps /> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-sm-4">
|
<div class="col-12 col-sm-4">
|
||||||
<q-card flat bordered class="card-container">
|
<q-card flat bordered class="card-container">
|
||||||
|
|
|
||||||
|
|
@ -60,4 +60,7 @@ export default defineConfig({
|
||||||
server: {
|
server: {
|
||||||
port: 3008,
|
port: 3008,
|
||||||
},
|
},
|
||||||
|
optimizeDeps: {
|
||||||
|
include: ['esri-loader'],
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue