标签：移动设备 etc int 第一步 思想 document isp 服务 api
leaflet是一个为建设移动设备友好的互动地图，而开发的现代的、开源的javascript库。代码只有33kb，但是它具有开发人员在线地图的大部分功能。
leaflet设计坚持简便、高性能、和可用性好的思想，在所有主要桌面和移动平台能高效运作，在现代浏览器上会利用html5和css3的优势，同时也支持旧的浏览器访问。支持插件扩展，有一个友好、易于使用的API文档和一个简单的、可读的源代码。
先从加载第一幅地图开始：
第一步：引入leaflet的css样式
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
第二步：引入leaflet的js文件
<script src="https://unpkg.com/leaflet@1.3.1/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 © <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因为它在处理之前打开的弹出窗口的时候自动关闭，这对于可用性很好。
标签：移动设备 etc int 第一步 思想 document isp 服务 api
原文地址：https://www.cnblogs.com/craller/p/8909543.html
