import L from 'leaflet';
import { tileLayer as LtileLayer } from 'leaflet';

function useTileLayer() {
	const baidu = LtileLayer('http://localhost/baidumaps/roadmap/{z}/{x}/{y}.png', {
		errorTileUrl: 'http://localhost/baidumaps/roadmap/error.png',
		maxZoom: 15,
		tms: true,
		minZoom: 3,
	});

	const gaode = LtileLayer('http://localhost/mapabc/roadmap/{z}/{x}/{y}.png', {
		errorTileUrl: 'http://localhost/baidumaps/roadmap/error.png',
		maxZoom: 15,
		tms: true,
		minZoom: 3,
	});

	const Kitten = L.TileLayer.extend({
		getTileUrl: function ({ x, y, z }: any) {
			return `http://localhost/mapabc/roadmap/${z}/${x}/${y}.png`;
		},
		options: {
			errorTileUrl: 'http://localhost/baidumaps/roadmap/error.png',
			maxZoom: 15,
			minZoom: 3,
		},
	});

	const gaodeChart = new Kitten();

	const gaodeLine = LtileLayer('http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
		errorTileUrl: 'http://localhost/baidumaps/roadmap/error.png',
		maxZoom: 15,
		minZoom: 3,
	});

	return { baidu, gaode, gaodeLine, gaodeChart };
}

export default useTileLayer;
