Leaflet学习笔记

qaaaaaaz

已于 2022-11-18 22:02:37 修改

阅读量2k

点赞数

文章标签：前端

于 2022-11-18 21:56:22 首次发布

本文链接：https://blog.csdn.net/qaaaaaaz/article/details/127930177

版权

Leaflet 是一个开源并且对移动端友好的交互式地图 JavaScript 库。它大小仅仅只有 42 KB of JS, 并且拥有绝大部分开发者所需要的所有地图特性。
Leaflet 简单、高效并且易用。它可以高效的运行在桌面和移动平台, 拥有着大量的扩展插件、优秀的文档、简单易用的 API 和完善的案例, 以及可读性较好的源码。

一、快速入门

1.1 下载

● 登录官网，下载leaflet，其实也就是一个js包
● 创建web项目，添加一个html文件
● 把解压后的leaflet.css和leaflet.js添加到项目里

1.2 初始化页面

在为地图编写代码之前，你需要在你的页面上完成以下准备步骤：
● 在文档的 head 部分引入 Leaflet CSS 文件:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"  
    integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14=" 
    crossorigin=""/>

● 在引入 Leaflet CSS 文件之后引入 Leaflet JavaScript 文件:

<!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"
   integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg="
   crossorigin=""></script>

● 将具有特定 id 的 div 元素放置在你希望地图所在的位置(比如):

<div id="mapid"></div>

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

<style>
  #mapid { height: 180px; }
  </style>

现在您已准备好初始化地图并使用它做一些事情。

1.2 设置地图

用 Mapbox Streets 瓦片（Tile）底图创建一张伦敦市中心的地图。首先，我们将初始化地图并将其视图设置为我们选择的地理坐标和缩放级别：

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

默认情况下（因为我们在创建地图实例时没有传递任何选项），地图上的所有鼠标和触摸交互都处于启用状态，并且具有缩放和属性控制。
请注意，setView 调用还会返回地图对象——大多数 Leaflet 方法在不返回显式值时的行为都是这样的，这允许你可以很方便的进行类似 jQuery 的链式调用。
接下来我们将添加一个瓦片（Tile）图层到地图中, 在当前示例中它是一个 OpenStreetMap 瓦片图层。创建一个瓦片（Tile）图层通常会涉及为瓦片（Tile）图像、归属文本和图层的最大缩放级别设置 URL 模板。OpenStreetMap 的瓦片对于你的 Leaflet 地图的编程是没有问题的，但是如果你要在生产中使用瓦片，请阅读 OpenStreetMap 的瓦片使用政策。

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
}).addTo(map);

确保引入 leaflet.js 文件并配置好 div 后运行所有代码。就是这样，你现在拥有一个运行正常的 Leaflet 地图。
在这里插入图片描述

1.3 绘制图形

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

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);

1.4 使用popups(弹窗)
当您想将某些信息附加到地图上的特定对象时，通常会使用 Popups。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 因为它在打开一个新窗口时，先前打开的弹出窗口会自动关闭。

1.5 处理事件

每次在 Leaflet 中触发某些事件时，例如用户单击标记或地图缩放更改，相应的对象都会发送一个事件，您可以使用函数订阅该事件。它允许您对用户交互做出反应：

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

map.on('click', onMapClick);

每个对象都有属于自己的一组事件。监听器、函数的第一个参数是一个事件对象——它包含关于发生的事件的有用信息。例如，地图点击事件对象（在上面的例子中的e）有一个 latlng 属性，它是点击发生的位置。
让我们通过使用 popup 而不是 alert 来改进我们的示例：

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);

二、加载图层

2.1 地图资源

高德谷歌腾讯天地图地图瓦片url_才华横溢吴道简的博客-CSDN博客_瓦片地图

2.2 加载底图

将一堆图层合并到一个分组

var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
    denver    = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
    aurora    = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
    golden    = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');

您可以使用 LayerGroup 类执行以下操作，而不是直接将它们添加到地图中：

var cities = L.layerGroup([littleton, denver, aurora, golden]);

leaflet有两种类型的图层：

● base layer：互斥的图层（在地图上同一时间只能有一个图层可见），比如tile layers；
● overlayers：在base layer之上放置的其他东西。

base layer形式加载，那么我们一次就只能显示其中一个（而overlayers可以同时显示多个），可以通过 layerControl 切换图层。

三、添加图标

如果我们有多个点要添加，每个点都这样写那

var transportIcon = L.Icon.extend({
    options: {
        iconSize: [20, 20], 
        iconAnchor: [0, 0], 
    }
});
 
var carIcon = new transportIcon({iconUrl: 'car.png'}),
    planeIcon = new transportIcon({iconUrl: 'plane.png'}),
    busIcon = new transportIcon({iconUrl: 'bus.png'});
 
L.marker([39.856,116.431], {icon: carIcon}).addTo(map);
L.marker([39.859,116.435], {icon: planeIcon}).addTo(map);
L.marker([39.851,116.439], {icon: busIcon}).addTo(map);