leaflet加载点、线、面、圆、圆形标注点

最新推荐文章于 2025-07-15 14:10:08 发布

原创最新推荐文章于 2025-07-15 14:10:08 发布 · 5.2k 阅读

2 ·

CC 4.0 BY-SA版权

leaflet 专栏收录该内容

2 篇文章

订阅专栏

博客主要介绍了如何在Leaflet地图中加载基本的地理元素，包括点、线、面以及圆和圆形标注。加载时需注意纬度在前，经度在后的顺序。加载面时，首尾点需相同以形成封闭区域。加载圆的半径以米为单位，而圆形标注的半径以像素为单位，且在地图缩放时圆形标注大小保持不变。

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

加载完地图后，加载点、线、面应该是最基本的功能之一了。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="leaflet1.34/leaflet-src.js"></script>
	<link rel="stylesheet" href="leaflet1.34/leaflet.css">
	<style>
		html,body{
			width: 100%;
			height: 100%;
		}
		#mapDiv{
			width: 100%;
			height: 100%;
		}
	</style>
	
</head>
<body>
	<div id="mapDiv"></div>
	<script>
		var map = L.map("mapDiv").setView([36.55,117.32],13);
		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
		L.marker([36.55,117.32]).addTo(map);
		L.polyline([[36.54,117.33],[36.55,117.33],[36.56,117.35],[36.55,117.36]]).addTo(map);
		L.polygon([[[36.53,117.32],[36.51,117.30],[36.51,117.33],[36.53,117.32]]]).addTo(map);
		L.circle([36.52,117.30],{radius:200}).addTo(map);
		L.circleMarker([36.54,117.29],{radius：20}).addTo(map);
	</script>
</body>
</html>

注意事项：加载点、线、面时也是纬度在前经度在后，加载点时，为一个数组，加载线时为一个数组串（两个[]），加载面时为三个[]。
加载面时，要求第一个点和最后一个点坐标一样才能生成面。
加载圆时，默认radius的单位为米;
加载圆形标注，默认radius单位为像素。它和圆的区别在于地图缩放时候前者随着地图缩放变化，后者不变。