学习 leaflet-1

Posted craller

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习 leaflet-1相关的知识,希望对你有一定的参考价值。

       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.streetsmapbox.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因为它在处理之前打开的弹出窗口的时候自动关闭,这对于可用性很好。

 

 

 

 

 

 

 

 

 

以上是关于学习 leaflet-1的主要内容,如果未能解决你的问题,请参考以下文章

java SpringRetry学习的代码片段

python 机器学习有用的代码片段

学习笔记:python3,代码片段(2017)

Leaflet 1.2 bug featureGroup 初始化问题

学习 PyQt5。在我的代码片段中找不到错误 [关闭]

PHP必用代码片段