leaflet 用HTML和JavaScript实现Leaflet.js
示例
要使用Leaflet，请将其样式表和JavaScript文件加载到您的页面中：
<link rel="stylesheet" href="/css/leaflet.css" /> <script xx_src="/js/leaflet.js"></script>
这些资源可以从各种位置下载，例如Leaflet的主页或LeafletGithub存储库，也可以直接将CDN用作
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> <script xx_src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" ></script>
您需要一个用于映射的容器。开发人员通常为此使用divID为“map”的ID。确保同时给映射div设置高度，否则映射可能不会显示。
<div id="map" style="height: 200px;"></div>
通过使用方法创建映射对象来完成映射的初始化。在下面的示例中，默认设置为纬度和经度，默认缩放级别为13。Leaflet.map(mapContainerId)
var map = L.map('map').setView([42.35, -71.08], 13);这将创建我们的空映射，我们现在应该提供一个图块层作为基础映射。瓦工是一项提供以瓦为单位提供映射图像的服务，小图像可以通过x，y和z参数以特定顺序访问（请参见下文）。
瓷砖层URL可能看起来是这样，在那里{s}，{z}，{x}并{y}是占位符单张运作过程中自动改变：
"http://{s}.domain.com/foo/{z}/{x}/{y}.png"现在，我们可以添加图块图层以及归因信息和最大可能的缩放级别，并将其添加到映射中：
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
maxZoom: 17,
minZoom: 5
}).addTo(map);注意：在包含leaflet.js和映射容器div元素之后，需要进行映射初始化和加载图块层。