leaflet-uniapp 缩放地图的同时 显示当前缩放层级

记录实现过程:

需求为移动端用户在使用地图时,缩放地图的同时,可以获知地图此时缩放的级别。

效果图如下:此时缩放地图级别为13

leaflet-uniapp 缩放地图的同时 显示当前缩放层级_第1张图片

map.on('') 有对应的诸多行为 查看官网即可,这里根据需要为--zoomstart zoom zoomend

代码如下:

// 地图缩放级别改变时
const ZoomViewer = L.Control.extend({
	options: {
	    position: 'bottomleft' //初始位置
	},
	onAdd() {
		const gauge = L.DomUtil.create('div');
		gauge.style.width = '30px';
		gauge.style.left = '3px';
		gauge.style.background = 'rgba(255,255,255,0.5)';
		gauge.style.textAlign = 'center';
		map.on('zoomstart zoom zoomend', (ev) => {
			gauge.innerHTML = `${map.getZoom().toFixed(0)}`;
		});
		return gauge;
	}
});
		 
const zoomViewer = (new ZoomViewer()).addTo(map);

 

你可能感兴趣的:(uni-app,前端)