Leaflet Quickstart¶
传单是一个基于浏览器的，移动友好的，交互式地图的javascript库。它是轻量级的，但是拥有大多数开发人员对在线地图所需要的所有功能。传单的设计考虑到了简单、性能和可用性。
运行¶
在运行这个快速启动之前，您应该启动TileStache。在OSGeoLive上可以在 Geospatial\Spatial Tools\Start Mapnik & TileStache . 这将提供本演示中将使用的背景图块。
小技巧
如果您在OSGeoLive之外阅读此快速入门，您可能更喜欢阅读原始演示：https://slaplejs.com/examples/quick-start/，因为这个演示使用了OSGeoLive上的tilestache。
正在准备页面¶
在为地图编写任何代码之前，需要在页面上执行以下准备步骤：
- 在文档的头部分包含传单CSS文件
<link rel="stylesheet" href="/leaflet/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="/leaflet/leaflet.ie.css" />
<![endif]-->
- 包括传单javascript文件：
<script src="/leaflet/leaflet.js"></script>
- 放一个 div 元素 id 您希望地图的位置：
<div id="map"></div>
- 确保地图容器具有定义的高度，例如通过在CSS中设置它：
#map { height: 180px; }
现在，您已经准备好初始化映射并用它做一些事情。
设置地图¶
让我们创建一张显示2018年FOSS4G会议的东非地图。首先，我们将初始化地图并将其视图设置为所选地理坐标和缩放级别：
var map = L.map('map').setView([44.43743, 26.104], 15);
默认情况下（因为我们在创建地图实例时没有传递任何选项），地图上的所有鼠标和触摸交互都已启用，并且它具有缩放和属性控件。
请注意，setview调用还返回map对象-大多数传单方法在不返回显式值时都是这样操作的，这样可以方便地进行类似jquery的方法链接。
接下来，我们将在地图中添加一个平铺层。在这种情况下，我们将使用Tilestache在Live DVD上提供的平铺图像。请注意，使用更好的背景地图（如OpenStreetmap）将获得更好的用户体验。
创建图块层通常需要为图块图像、属性文本和层的最大缩放级别设置URL模板：
L.tileLayer('http://localhost:8012/example/{z}/{x}/{y}.png,{}).addTo(map);
如果您有在线访问权限，您可能希望使用更好的tilemap作为背景：
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:18, attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
确保在 div 和 leaflet.js 包含。就是这样！你现在有一张有效的传单地图。
值得注意的是，传单是供应商不可知论，这意味着它不强制为Tiles提供特定的供应商选择，甚至不包含单个供应商特定的代码行，因此如果需要，您可以自由使用其他供应商。
标记、圆和多边形¶
除了平铺层，您还可以轻松地将其他内容添加到地图中，包括标记、多段线、多边形、圆和弹出窗口。让我们添加一个标记：
var marker = L.marker([44.437 ,26.104]).addTo(map);
添加一个圆是相同的（除了将以米为单位的半径指定为第二个参数），但允许您通过在创建对象时将选项作为最后一个参数来控制它的外观：
var circle = L.circle([44.435, 26.11], 250, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);
添加多边形非常简单：
var polygon = L.polygon([
[44.433, 26.102],
[44.442, 26.095],
[44.436, 26.093]
]).addTo(map);
使用弹出窗口¶
当您想将一些信息附加到地图上的特定对象时，通常使用弹出窗口。传单有一个非常方便的捷径：
var popup = L.popup()
.setLatLng([44.437, 26.104])
.setContent("I am a standalone popup.")
.openOn(map);
这里我们使用 openOn 而不是 addTo 因为当打开一个新的弹出窗口时，它会自动关闭以前打开的弹出窗口，这对可用性很好。
处理事件¶
每次传单中发生某些事情时，例如用户单击标记或地图缩放更改，相应的对象都会发送一个事件，您可以使用函数订阅该事件。它允许您对用户交互做出反应：
function onMapClick(e) {
alert("You clicked the map at " + e.latlng);
}
map.on('click', onMapClick);
每个对象都有自己的事件集-有关详细信息，请参阅文档。listener函数的第一个参数是一个事件对象-它包含有关所发生事件的有用信息。例如，map click事件对象（上图中的e）具有latlng属性，该属性是发生单击的位置。
让我们通过使用弹出窗口而不是警报来改进我们的示例：
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
试着点击地图，你会在弹出窗口中看到坐标。查看完整示例