2023-07-15 15:03:08 +07:00
|
|
|
<template>
|
2023-07-29 06:47:47 +07:00
|
|
|
|
|
|
|
<searchbar/>
|
|
|
|
|
2023-07-15 17:52:21 +07:00
|
|
|
<ol-map
|
|
|
|
:loadTilesWhileAnimating="true"
|
|
|
|
:loadTilesWhileInteracting="true"
|
2023-07-29 02:10:58 +07:00
|
|
|
style=
|
|
|
|
"
|
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
|
|
|
position: fixed;
|
2023-07-29 06:47:47 +07:00
|
|
|
|
2023-07-29 02:10:58 +07:00
|
|
|
"
|
2023-07-15 17:52:21 +07:00
|
|
|
>
|
|
|
|
<ol-view
|
|
|
|
ref="view"
|
|
|
|
:center="center"
|
|
|
|
:rotation="rotation"
|
|
|
|
:zoom="zoom"
|
|
|
|
:projection="projection"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<ol-tile-layer>
|
|
|
|
<ol-source-osm />
|
|
|
|
</ol-tile-layer>
|
|
|
|
</ol-map>
|
2023-07-29 06:47:47 +07:00
|
|
|
|
2023-07-15 15:03:08 +07:00
|
|
|
</template>
|
|
|
|
|
2023-07-15 17:52:21 +07:00
|
|
|
|
2023-07-29 02:10:58 +07:00
|
|
|
|
2023-07-15 15:03:08 +07:00
|
|
|
<script setup>
|
2023-07-29 06:47:47 +07:00
|
|
|
|
|
|
|
import searchbar from '@/components/searchbar.vue';
|
2023-07-15 17:52:21 +07:00
|
|
|
import { ref } from "vue";
|
|
|
|
|
2023-07-29 02:10:58 +07:00
|
|
|
const center = ref([100.538611, 13.764722]);
|
2023-07-15 17:52:21 +07:00
|
|
|
const projection = ref("EPSG:4326");
|
2023-07-29 02:10:58 +07:00
|
|
|
const zoom = ref(19);
|
2023-07-15 17:52:21 +07:00
|
|
|
const rotation = ref(0);
|
2023-07-15 15:03:08 +07:00
|
|
|
</script>
|