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 阅读(103) 评论(0) 编辑收藏举报来源

宥_XWX

Leaflet加载OSM、MapBox地图

公告

搜索

常用链接

随笔档案

阅读排行榜