LeafLet图层控制_leaflet禁止点击-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44682948/article/details/109714231

该博客演示了如何使用Leaflet库在HTML中创建地图，并添加多个标记点。同时，通过引入不同的地图瓦片服务，实现了白天和黑夜两种风格的切换。利用L.control.layers功能，用户可以在地图上自由切换城市标记和不同背景地图风格。

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>图层控制</title>
		<link rel="stylesheet" type="text/css" href="../leaflet/iclient9-leaflet.css" />
		<script type="text/javascript" src="../leaflet/include-leaflet.js"></script>
		<script src='../js/jquery.js'></script>
		<style>
			html,
			body {
				height: 100%;
				margin: 0;
			}			
			#map {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<div id='map'></div>
		<script>
			var cities = L.layerGroup();
			L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
				L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
				L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
				L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);
			var	mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
			var grayscale = L.tileLayer(mbUrl, {
				id: 'mapbox/light-v9',
				tileSize: 512,
				zoomOffset: -1,					
			});
			var	streets = L.tileLayer(mbUrl, {
				id: 'mapbox/streets-v11',
				tileSize: 512,
				zoomOffset: -1,
			});

			var map = L.map('map', {
				center: [39.73, -104.99],
				zoom: 10,
				layers: [grayscale, cities]
			});

			var baseLayers = {//默认加载数组的第一个tileLayer
				"<span style='color: red'>白天</span>": grayscale,//可添加样式
				"黑夜": streets
			};

			var overlays = {
				"Cities": cities
			};
			//第二个参数可省略。第一个参数可以为null,用于只控制overlays 
			L.control.layers(baseLayers,overlays).addTo(map);
		</script>

	</body>

</html>