学习 leaflet-1

Posted 2020-11-01 craller

       leaflet是一个为建设移动设备友好的互动地图，而开发的现代的、开源的javascript库。代码只有33kb，但是它具有开发人员在线地图的大部分功能。

       leaflet设计坚持简便、高性能、和可用性好的思想，在所有主要桌面和移动平台能高效运作，在现代浏览器上会利用html5和css3的优势，同时也支持旧的浏览器访问。支持插件扩展，有一个友好、易于使用的API文档和一个简单的、可读的源代码。

      先从加载第一幅地图开始：

      第一步：引入leaflet的css样式

  

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
   crossorigin=""/>

 

      第二步：引入leaflet的js文件

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
   crossorigin=""></script>

 

     第三步：添加一个div容器来显示地图，给div一个高度

 <div id="map"></div>

#map { height: 180px; }

   准备初始化地图然后设置地图的地理位置、显示级别、坐标系等等。   

var mymap = L.map(‘map‘).setView([39.9788, 116.30226], 14);

       setview作为一个方法，用于设定地图显示的地理中心和缩放级别，其用法为setView(center, zoom, options? )。

       或者上面的代码也可以写成

var mymap = L.map(‘myMap‘,{
                center: [39.9788, 116.30226],
                zoom: 14
            });

        接下来，我们将添加一个图层添加到我们的地图，在这个例子中，我们将使用mapbox.streets从瓷砖Mapbox的“经典地图”，Mapbox的矢量地图是瓦片地图，需要调用打开瓦片图层的接口L.TileLayer。

        这里解释一下什么是瓦片地图。受限于服务器处理能力、网络带宽等的影响，我们浏览电子地图时，电子地图供应商基本采用了瓦片地图技术。将一整张电子地图在各种显示等级上，切成一张张单独的小图片，形成了类似一片片的瓦片。举例百度地图，我们看到的地图实际上由一张张png图片组成。当你移动地图或缩放地图时，会新请求png图片，然后拼成一整张展现在用户眼前。百度地图等地图提供商一般先切好大量png瓦片地图存到服务器，用户查看地图时，直接请求png图片即可。

       L.TileLayer的用法是L.tilelayer(url,options?)，其中url中的{z}/{x}/{y}用于显示地图位置。参数attribution用于在右下角添加地图描述信息。addTo加载到刚才设置好的地图上。具体用法：http://leafletjs.com/reference-1.3.0.html#tilelayer

L.tileLayer(‘https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}‘, {
    attribution: ‘Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery ? <a href="http://mapbox.com">Mapbox</a>‘,
    maxZoom: 18,
    id: ‘mapbox.streets‘,
    accessToken: ‘your.mapbox.access.token‘
}).addTo(mymap);

      注意使用瓷砖从Mapbox，还必须请求访问令牌（‘your.mapbox.access.token‘  这里要使用自己的令牌），Leaflet是与提供者无关的，这意味着它不会强制提供瓷砖的特定供应商。你可以尝试更换mapbox.streets用mapbox.satellite。

      ok??到这里   地图已显示

      接下来还可以轻松地将其他东西添加到地图中，包括标记，多义线，多边形，圆圈和弹出窗口

      添加标记：

var marker = L.marker([51.5, -0.09]).addTo(mymap);

     添加圆：

var circle = L.circle([51.508, -0.11], {
    color: ‘red‘,
    fillColor: ‘#f03‘,
    fillOpacity: 0.5,
    radius: 500
}).addTo(mymap);

     添加多边形：

var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(mymap);

     添加弹出框：

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

     openPopup方法（仅针对标记）立即打开附加的弹出窗口

     还可以使用弹出窗口作为图层

var popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(mymap);

在这里我们使用它，openOn而不是addTo因为它在处理之前打开的弹出窗口的时候自动关闭，这对于可用性很好。