<template>
	<div ref="mapContainer" style="width: 100%; height: 100%" ></div>
</template>
<script lang="ts" setup>
	import { onMounted, ref } from 'vue';
	import useTileLayer from '../../hook/useTileLayer';
	import L from 'leaflet';
	import 'leaflet/dist/leaflet.css';
	import useCrs from '../../hook/useCrs';

	const mapContainer = ref<HTMLElement>();
	const { gaode } = useTileLayer();

	onMounted(() => {
		if (!mapContainer.value) return;
		const map = L.map(mapContainer.value, {
			crs: useCrs('gaode'),
			center: [-97.00238024827533, 210.7725501856634],
			zoom: 10,
			maxZoom: 15,
			minZoom: 3,
		});
		gaode.addTo(map);
	});
</script>
