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);
posted @ 2018-03-16 17:09  宥_XWX  阅读(52)  评论(0编辑  收藏  举报  来源