2021-10-05 00:19:17 +02:00
|
|
|
|
|
|
|
|
import { LMap, LIcon, LTileLayer, LMarker, LControlLayers, LTooltip, LPopup, LPolyline, LPolygon, LRectangle, } from '@vue-leaflet/vue-leaflet'
|
|
|
|
|
|
|
|
|
|
import 'leaflet/dist/leaflet.css'
|
|
|
|
|
|
2021-08-31 18:09:59 +02:00
|
|
|
import {
|
2021-10-05 00:19:17 +02:00
|
|
|
defineComponent, ref, computed,
|
2021-08-31 18:09:59 +02:00
|
|
|
} from 'vue'
|
|
|
|
|
import { tools } from '@src/store/Modules/tools'
|
|
|
|
|
|
2021-10-05 00:19:17 +02:00
|
|
|
|
2021-08-31 18:09:59 +02:00
|
|
|
export default defineComponent({
|
|
|
|
|
name: 'Home',
|
2021-10-05 00:19:17 +02:00
|
|
|
components: {
|
|
|
|
|
LMap,
|
|
|
|
|
LIcon,
|
|
|
|
|
LTileLayer,
|
|
|
|
|
LMarker,
|
|
|
|
|
LControlLayers,
|
|
|
|
|
LTooltip,
|
|
|
|
|
LPopup,
|
|
|
|
|
LPolyline,
|
|
|
|
|
LPolygon,
|
|
|
|
|
LRectangle,
|
|
|
|
|
},
|
2021-08-31 18:09:59 +02:00
|
|
|
|
|
|
|
|
setup() {
|
|
|
|
|
|
2021-10-05 00:19:17 +02:00
|
|
|
const zoom = ref(2)
|
|
|
|
|
const iconWidth = ref(25)
|
|
|
|
|
const iconHeight = ref(40)
|
2021-08-31 18:09:59 +02:00
|
|
|
|
2021-10-05 00:19:17 +02:00
|
|
|
const iconUrl = computed(() => `https://placekitten.com/${iconWidth.value}/${iconHeight.value}`)
|
|
|
|
|
const iconSize = computed(() => [iconWidth.value, iconHeight.value])
|
2021-08-31 18:09:59 +02:00
|
|
|
|
2021-10-05 00:19:17 +02:00
|
|
|
function log(a: any) {
|
|
|
|
|
console.log(a)
|
2021-08-31 18:09:59 +02:00
|
|
|
}
|
|
|
|
|
|
2021-10-05 00:19:17 +02:00
|
|
|
function changeIcon() {
|
|
|
|
|
iconWidth.value += 2
|
|
|
|
|
if (iconWidth.value > iconHeight.value) {
|
|
|
|
|
iconWidth.value = Math.floor(iconHeight.value / 2)
|
2021-08-31 18:09:59 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
tools,
|
2021-10-05 00:19:17 +02:00
|
|
|
zoom,
|
|
|
|
|
iconWidth,
|
|
|
|
|
iconHeight,
|
|
|
|
|
iconUrl,
|
|
|
|
|
iconSize,
|
|
|
|
|
changeIcon,
|
|
|
|
|
log,
|
2021-08-31 18:09:59 +02:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
})
|