使用 HTML 和 JavaScript 实现 Leaflet.js

要使用 Leaflet，请将其样式表和 JavaScript 文件加载到你的页面：

<link rel="stylesheet" href="/css/leaflet.css" />
<script src="/js/leaflet.js"></script>

这些资源可以从各种位置下载，如 Leaflet 的主页或 Leaflet Github 存储库 ，或者你可以直接使用 CDN，

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" ></script>

你的地图需要一个容器。开发人员通常使用 id 为 map 的 div。确保你的地图 div 也是一个高度，否则地图可能不会显示。

<div id="map" style="height: 200px;"></div>

通过使用 Leaflet.map(mapContainerId) 方法创建地图对象来初始化地图。在下面的示例中，纬度和经度被设置为默认值，默认缩放级别为 13。

var map = L.map('map').setView([42.35, -71.08], 13);

这将创建我们的空地图，我们现在应该提供一个切片图层作为我们的基本地图。瓦片层是一种服务，它以瓦片形式提供地图图像，小图像以特定顺序由 x，y 和 z 参数访问（见下文）。

tile 图层 URL 可能如下所示，其中 {s}，{z}，{x} 和 {y} 是 Leaflet 在操作期间自动更改的占位符：

"http://{s}.domain.com/foo/{z}/{x}/{y}.png"

我们现在可以添加我们的 tilelayer，以及归因信息和最大可能缩放级别，并将其添加到地图中：

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 元素之后，需要进行地图初始化和加载切片图层。