leaflet 用HTML和JavaScript实现Leaflet.js

示例

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

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

这些资源可以从各种位置下载，例如Leaflet的主页或Leaflet Github存储库，也可以直接将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元素之后，需要进行映射初始化和加载图块层。