Leaflet加载OSM、MapBox地图
先展示地图加载的效果:
(1)首先获取Leaflet的资源包
Leaflet资源文件Url:http://leafletjs.com/download.html
Leaflet资源文件非常小,虽然轻但是麻雀虽小,五脏俱全。完全可以满足基本的地图操作和基础的GIS功能。(Github开源社区有对Leaflet功能的更新,可以关注一下)
推荐大家使用Webstorm,直接引入Leaflet或openlayers资源文件,Webstrom识别资源文件其中的方法,编写代码有代码提示提高编写代码的效率
(2)在WebStorm中新建工程,引入Leaflet资源文件。新建HTML页面。
这里提供加载OSM和MapBox地图的代码:
加载OSM地图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Leaflet加载OSM地图</title>
<link rel="stylesheet" href="leaflet/leaflet.css">
<script src="leaflet/leaflet.js"></script>
<style type="text/css">
#map,html,body{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript">
var map = new L.Map('map');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osm = new L.TileLayer(osmUrl, {minZoom: 5, maxZoom: 18});
map.addLayer(osm);
map.setView(new L.LatLng(31.864942016,117.2882028929),11);
</script>
</html>
加载MapBox地图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Leaflet加载MapBox地图</title>
<link rel="stylesheet" href="leaflet/leaflet.css">
<script src="leaflet/leaflet.js"></script>
<style type="text/css">
#map,html,body{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript">
var map = L.map('map').setView([31.864942016,117.2882028929], 11);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
id: 'mapbox.streets'
}).addTo(map);
</script>
</html>
代码的写法和Openlayers写法相似(Url地址、缩放级别、中心点坐标)。
(3)Leaflet加载其他地图效果:
添加底图切换控件:
var baseLayers = {
"地图": normal,
"影像": image,
}
L.control.layers(baseLayers).addTo(map);
L.control.zoom({
zoomInTitle: '放大',
zoomOutTitle: '缩小'
}).addTo(map);