leaflet加载OSM地图


接触了leaflet,想着抽时间把自己用过的leaflet的功能都自己写一遍。先从最基本的加载第一张地图开始吧。

<!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);
	</script>
	</head>
<body>
</body>
</html>

代码虽然简单,但是也有一些需要注意的地方,1.想要让地图占满整个屏幕,除了设置地图容器mapDiv宽高为100%,还要把父元素body和html的宽高设置为100%,不然mapDiv的高度始终为0。
2.加载地图的js代码要写在body中,因为要先创建body中的地图容器mapDiv才能进行地图的加载,若将加载地图的js代码写在head中,就会报错地图容器不存在。
3.前两条是基础的前端小问题,关于leaflet的问题在于setView()中第一个参数也就是中心点坐标,纬度在前经度在后,和ArcGIS API有所不同(ArcGIS是先经度再纬度)。

转载自:https://blog.csdn.net/xu762102319/article/details/88828616

You may also like...