Leaflet文档阅读笔记-Zoom levels笔记_l.control.scale()-CSDN博客

本文链接：https://blog.csdn.net/qq78442761/article/details/100688682

本文详细介绍了如何使用Leaflet库进行地图操作，包括锁定地图缩放级别、自定义缩放策略以及利用setView、flyTo等方法实现地图的平移和动画效果。同时，展示了如何通过JavaScript代码实现地图的定时自动移动和缩放，提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方解析

博主例子

官方解析

把地图放缩锁定到0级

var map = L.map('map', {
	minZoom: 0,
	maxZoom: 0
});

var cartodbAttribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attribution">CARTO</a>';

var positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
	attribution: cartodbAttribution
}).addTo(map);

map.setView([0, 0], 0);

下面这个是从视角从地图中某个点移动到另外一个效果（有点animation，但官方说flyTo是smooth animation）

L.control.scale().addTo(map);

setInterval(function(){
	map.setView([0, 0]);
	setTimeout(function(){
		map.setView([60, 0]);
	}, 2000);
}, 4000);

L.Control.Scale当处于高层级的时候，这种移动是不明显的。

setView(center, zoom), 设置地图中心；
flyTo(center, zoom),滑动移动，效果其实和setView差不多；
zoomIn() / zoomIn(delta), 增加层级（地图会被放大，默认值为1）；
zoomOut() / zoomOut(delta), 减少层级（地图会被缩小，默认值为1）；
setZoomAround(fixedPoint, zoom), 保持像素不变，设置一个层级；
fitBounds(bounds), 自适应地图大小。

下面是自定义缩放策略

var map = L.map('map', {
	zoomSnap: 0.25
});

博主例子

这里提供了使用setInterval结合setZoom、flyTo、setView的地图效果

效果还是可以的，先来个静态图！

源码如下：

<!DOCTYPE html>
<html>
<head>
	
	<title>Test7</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />


	<link rel="stylesheet" href="leaflet.css" />
    <script src="leaflet.js"></script>        
	<script src="leaflet-tilelayer-wmts-src.js"></script>
	<script src="echarts.js"></script>

	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		
		#map {
			width: 100%;
			height: 100%;
		}
		
		.chart{
			width: 600px;
			height: 300px;
			background-color: #fff;
		}
	</style>

	
</head>
<body>
<div id='map'></div>
<script type="text/javascript">


	
   var ign = new L.TileLayer.WMTS( "http:// XXX.XXX.XXX.XXX:8080/geoserver/gwc/service/wmts" ,
                               {
                                   layer: 'GG_9:gg_9',
                                   tilematrixset: "EPSG:900913",
								   Format : 'image/png',
								   TileMatrix: 'EPSG:900913:8'
                               }
                              );
							  
	var map = L.map('map', {
		minZoom: 4,
		maxZoom: 8
	}).setView([32, 118], 7);
	
	
	var popup = L.popup();
 
	function onMapClick(e) {
		popup
			.setLatLng(e.latlng)
			.setContent("You clicked the map at " + e.latlng.toString())
			.openOn(map);
	}
 
	map.on('click', onMapClick);


	L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);
	map.addLayer(ign);
	map.invalidateSize(true);
	
	L.control.scale().addTo(map);
	
	//添加的数据
	
	/*
	setInterval(function(){
		map.setView([32, 118]);
		setTimeout(function(){
			map.setView([39.9, 116.4]);
		}, 3000)
	}, 2000);
	*/

	
	/*
	setInterval(function(){
	map.setZoom(7);
	setTimeout(function(){
		map.setZoom(4);
	}, 2000);
	}, 1000);
	*/
	
	//使用flyTo
	setInterval(function(){
		map.flyTo([32, 118]);
		setTimeout(function(){
			map.flyTo([39.9, 116.4]);
		}, 3000)
	}, 2000);
	
	
	//添加的数据
	
</script>



</body>
</html>