Leaflet地图 JavaScript 库学习 | 豆包MarsCode AI刷题

啊凍
539 阅读3分钟

Leaflet简介

  • Leaflet是一个现代、开源的JavaScript库，用于构建交互式地图。
  • 它以简约、高性能、易用为设计理念。
  • 库的大小约为33KB，支持HTML5和CSS3，兼容所有主要的桌面和移动平台。
  • 支持插件扩展，拥有友好的API文档和易读的源代码。
  • 有超过140个插件，涵盖数据提供、数据格式、地理编码、路线和路线搜索、地图控制和交互等方面。

准备页面

  • 在页面的<head>标签内添加Leaflet的CSS和JavaScript文件。
  • 创建一个div元素，用于承载地图，并设置其高度。

创建地图

  • 初始化地图，并设置视图到特定的地理坐标和缩放级别。
  • 显示地图，使用tileLayer添加地图切片。

点标记、圆标记和多边形标记

  • 向地图添加标记、圆形和多边形。

使用弹出窗口

  • 将弹出窗口附加到地图上的对象，如标记、圆形和多边形。

处理事件

  • 监听和响应Leaflet中的事件，例如地图点击事件。

创建初始地图

1. 准备页面

在编写地图代码之前，您需要在页面上完成以下准备步骤：

  • 在文档的<head>部分引入Leaflet的CSS文件：
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
       integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
       crossorigin=""/>
  • 在引入Leaflet CSS文件之后引入Leaflet JavaScript文件：
<!-- 确保你把这段代码放在Leaflet的CSS之后 -->
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
       integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
       crossorigin=""></script>
  • 在页面中添加一个具有特定id的div元素，这个div将用来承载地图：
<div id="mapid" style="height: 180px;"></div>

确保地图容器定义了固定的高度，例如在CSS中设置。

2. 设置地图

接下来，您可以初始化地图并设置其初始视图。以下是创建一个以伦敦市中心为初始视图的地图的代码：

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

在这段代码中，L.map('mapid') 创建了一个地图实例，'mapid'是页面上div元素的ID。.setView([51.505, -0.09], 13) 方法设置了地图的初始视图，其中[51.505, -0.09]是地图中心点的经纬度坐标，13是缩放级别。

3. 添加瓦片图层

要显示地图，您还需要添加一个瓦片图层。以下是添加OpenStreetMap瓦片图层的代码：

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

这段代码创建了一个瓦片图层，并将其添加到地图实例中。{z}/{x}/{y}.png是瓦片图层的URL模板，maxZoom指定了最大缩放级别，attribution提供了版权信息。

监听与响应

1. 监听地图事件

Leaflet提供了多种事件，您可以使用.on()方法来监听这些事件。例如，如果您想在用户点击地图时执行某些操作，可以这样做：

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

// 定义一个函数来处理点击事件
function onMapClick(e) {
    alert("You clicked the map at " + e.latlng);
}

// 监听地图的点击事件
mymap.on('click', onMapClick);

在这个例子中，当用户点击地图时，会弹出一个警告框显示点击的地理坐标。

2. 使用弹出窗口

您还可以使用弹出窗口来响应用户的交互，例如点击标记：

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

// 绑定弹出窗口到标记，并在点击时打开
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

3. 处理标记事件

如果您想监听标记上的点击事件，可以这样做：

marker.on('click', function(e) {
   alert("You clicked the marker!");
});

4. 响应地图缩放和移动事件

您还可以监听地图缩放和移动事件：

// 监听地图缩放事件
mymap.on('zoomend', function(e) {
   console.log('Zoom level: ' + mymap.getZoom());
});

// 监听地图移动事件
mymap.on('dragend', function(e) {
   console.log('Center coordinates: ' + mymap.getCenter());
});

5. 处理其他交互

Leaflet还提供了其他事件，如mouseover、mouseout、mousemove等，您可以根据需要监听这些事件来增强用户的交互体验。

avatar
文章
阅读
粉丝