leaflet

leaflet加载OSM地图

by giser · 2019-04-03

接触了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

相关推荐

Tags: leaflet leaflet加载OSM地图

You may also like...