Leaflet-快速入门指南 – 北京炫码科技有限公司

本分步指南将帮助您快速了解传单基础知识，包括设置leaflet地图、使用标记、多段线和弹出窗口以及处理事件。

准备页面

在为地图编写任何代码之前，您需要在页面上执行以下准备步骤：

在文档的开头部分包括leaflet的CSS文件：

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
   integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
   crossorigin=""/>

在leaflet CSS后包含 leaflet JavaScript文件：

 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
   integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
   crossorigin=""></script>

将具有特定id的div元素放置在您希望映射的位置：

<div id="map"></div>

确保贴图容器具有定义的高度，例如，在CSS中设置它：

#map { height: 180px; }

现在，您已经准备好初始化地图并对其执行了一些操作。

设置地图

See this example stand-alone.

让我们用漂亮的 Mapbox Streets 贴图创建伦敦市中心的地图。从这里开始，我们将在 JS 中工作。首先，我们将初始化地图并将其视图设置为我们选择的地理坐标和缩放级别：

var map = L.map('map').setView([51.505, -0.09], 13);

默认情况下（因为我们在创建地图实例时没有传递任何选项），地图上的所有鼠标和触摸交互都是启用的，并且它具有缩放和属性控制。

请注意，setView 调用还返回地图对象——大多数 Leaflet 方法在不返回显式值时的行为是这样的，这允许方便的类似 jQuery 的方法链接。接下来，我们将添加一个切片图层以添加到我们的地图中，在本例中，它是一个 Mapbox Streets 切片图层。创建切片图层通常涉及设置切片图像的 URL 模板、属性文本和图层的最大缩放级别。

在这个例子中，我们将使用 Mapbox 的 Static Tiles API 中的 mapbox/streets-v11 瓦片（为了使用 Mapbox 中的瓦片，您还必须请求访问令牌）。因为这个 API 默认返回 512×512 瓦片（而不是 256×256），所以我们还必须明确指定它并将我们的缩放偏移值 -1。

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'your.mapbox.access.token'
}).addTo(map);

确保在 div 和 leaflet.js 包含之后调用所有代码。就是这样！您现在有一个有效的 leaflet 地图。值得注意的是，Leaflet 与地图切片提供者无关，这意味着它不会强制选择特定的切片提供者。您可以尝试将 mapbox/streets-v11 替换为 mapbox/satellite-v9，看看会发生什么。此外，Leaflet 甚至不包含任何特定于提供程序的代码行，因此您可以根据需要自由使用其他提供程序（不过我们建议使用 Mapbox，它看起来很漂亮）。每当使用基于 OpenStreetMap 的任何东西时，必须根据版权声明注明出处。大多数其他图块提供者（例如 Mapbox、Stamen 或 Thunderforest）也需要归属。确保在信用到期时给予信用。

标记、圆圈和多边形

See this example stand-alone.

除了切片图层，您还可以轻松地向地图添加其他内容，包括标记、折线、多边形、圆形和弹出窗口。让我们添加一个标记：

var marker = L.marker([51.5, -0.09]).addTo(map);

添加一个圆是相同的（除了以米为单位指定半径作为第二个参数），但允许您通过在创建对象时将选项作为最后一个参数传递来控制它的外观：

var circle = L.circle([51.508, -0.11], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(map);

添加多边形同样简单：

var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(map);

使用弹出窗口

See this example stand-alone.

当您想将一些信息附加到地图上的特定对象时，通常会使用弹出窗口。 Leaflet 有一个非常方便的快捷方式：

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

尝试单击我们的对象。 bindPopup 方法将带有指定 HTML 内容的弹出窗口附加到您的标记，因此当您单击对象时弹出窗口出现，并且 openPopup 方法（仅用于标记）立即打开附加的弹出窗口。您还可以将弹出窗口用作图层（当您需要的不仅仅是将弹出窗口附加到对象时）：

var popup = L.popup()
    .setLatLng([51.513, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(map);

在这里，我们使用 openOn 而不是 addTo，因为它会在打开一个新的弹出窗口时自动关闭以前打开的弹出窗口，这有利于可用性。处理事件每次在 Leaflet 中发生某些事情时，例如用户单击标记或地图缩放更改，相应的对象会发送一个事件，您可以使用函数订阅该事件。它允许您对用户交互做出反应：

function onMapClick(e) {
    alert("You clicked the map at " + e.latlng);
}

map.on('click', onMapClick);

每个对象都有自己的一组事件——请参阅文档了解详细信息。侦听器函数的第一个参数是一个事件对象——它包含有关所发生事件的有用信息。例如，地图点击事件对象（上例中的 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);

尝试单击地图，您将在弹出窗口中看到坐标。查看完整示例 →

5 1 投票

文章评分