easy-button：Leaflet 中的按钮插件

GIS工具-gistools2021

于 2024-08-07 09:10:06 发布

阅读量514

点赞数 18

文章标签： leafleft

本文链接：https://blog.csdn.net/qq_35582643/article/details/140973116

版权

Leaflet是一个 JavaScript 库，因其简单性和轻便性而受到高度赞赏，可用于在网络上创建地图。Leaflet的“理念”是提供一个轻量级库，其中包含创建地图的基本元素。许多插件对此进行了补充，允许您向地图添加功能。您经常需要向 web 地图添加按钮来启动操作。嗯，使用easy-button插件这非常简单。

安装插件 easy-button

要安装该插件，我们可以从GitHub上的页面下载文件，我们可以使用 NPM 或在本例中我们将执行的操作，即使用 CDN 链接。该插件有一个CDN链接，让我们无需下载即可使用。因此，我们必须将链接合并到我们的代码中，如文档中所示：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css"><script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>

一些按钮示例

easy-button 插件具有以下结构：

L.easyButton( '<span class="star">&starf;</span>', function(){              Mi funcion;    }).addTo(map);

我们创建L.easyButton类的一个实例，并为其提供一个类（在本例中为“star”）和一个函数。在大括号之间我们编写函数，它可以是我们使用 Leaflet 进行的任何开发。最后，我们将使用addTo(map)方法将按钮添加到地图中。

一个非常简单的示例是允许我们在地图上打开警报的示例。

L.easyButton( '<span class="star">&starf;</span>', function(){       alert('您点击了 easyButton 插件中的按钮');    }).addTo(map);

我们在这个例子中看到了我们之前描述的结构。作为一项功能，我们添加了 JavaScript 警报，当您单击按钮时该警报将打开。

easy-button 插件使用一个我们称为star的类，我们可以使用 CSS 为其分配样式。为此，我们在样式部分添加以下内容：

.star{      font-size: 1.5em;        color:red    }

我们只是为按钮上显示的图标指定了字体大小和颜色：

Easy-button 允许您选择我们想要在按钮上看到的图标。在星号示例中，我们使用了 &starf 图标，但我们可以从以下链接中看到的各种 HTML 图标中进行选择：

我们将编写另一个示例，其中创建一个在地图中心插入弹出窗口或弹出窗口的按钮：

var helloPopup = L.popup().setContent('Hello World!');        L.easyButton('<span class="infinito">&infin;</span>', function(){        helloPopup.setLatLng(map.getCenter());        map.openPopup(helloPopup);    }, '打开弹出窗口').addTo(map);

这里使用 L.easyButton 实例打开的函数负责打开弹出窗口。首先，我们从 L.popup() 类创建了一个名为 helloPopup 的对象。引用此类的几个方法应用于该对象：

setContent()指示弹出窗口的内容。
setLatLng() ，指示弹出窗口将打开的坐标。这次我们使用 getCenter() 在地图的中心进行操作。
openPopup()指示应在地图上打开弹出窗口。

easy-button 插件允许您创建一个文本，当您将鼠标放在按钮上时会出现该文本，它是我们在句子末尾指示的文本；'打开一个弹出窗口'。就像我们之前所做的一样，我们为按钮添加 CSS 样式。请注意，我们现在创建了一个使用相应 HTML 图标的“infinity”类：&infin，接下来我们编写完整的代码：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Easy-button</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css"><style>      body {          padding: 0;          margin: 0;    }    html, body, #map {        height: 100%;        width: 100vw;    }    .star{      font-size: 1.5em;      color:red    }    .infinito{      font-size: 1.5em;        color:blue    }</style></head>      <body>     <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>     <script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>
    <div id ="map"> </div>    <script>    var map = L.map('map', {center: [40.965, -5.664],zoom: 16});    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);        var helloPopup = L.popup().setContent('Hello World!');
    L.easyButton('<span class="infinito">&infin;</span>', function(){        helloPopup.setLatLng(map.getCenter());        map.openPopup(helloPopup);    }, '添加弹出窗口').addTo(map);
    L.easyButton( '<span class="star">&starf;</span>', function(){       alert('您点击了 easyButton 插件中的按钮');    }).addTo(map);</script>    </body></html>

定义按钮状态

为了完成这篇关于使用 easy-button 插件在 web 地图中创建按钮的文章，我们将看到该插件的一个属性，它允许我们制作更实用的按钮。我们已经了解了如何创建一个打开功能的按钮，即在地图上显示操作的按钮。但实际上我们需要它们执行开/关功能，即“打开”和“关闭”应用程序。我们可以通过简单按钮插件的“状态”来控制它。让我们看一个例子：

<script>    var map = L.map('map', {center: [40.965, -5.664],zoom: 16});    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
        var helloPopup = L.popup().setContent('Hello World!');
var toggle = L.easyButton({  states: [{    stateName: 'add-popup',    icon:  '<span class="star">&starf;</span>',    title: '添加弹出窗口',    onClick: function(boton) {     helloPopup.setLatLng(map.getCenter()).openOn(map);      boton.state('remove-popup');    }  }, {    stateName: 'remove-popup',    icon:  '<span class="flecha">&larrpl;</span>',    onClick: function(boton) {      map.removeLayer(helloPopup);      boton.state('add-popup');    },    title: '删除弹出窗口'  }]});toggle.addTo(map);</script>

在此代码中，我们将上一个示例中的 L.easyButton 实例替换为切换对象，这就是调用 L.easyButton 类的对象。关键在于 states 选项，它允许我们定义按钮的两种状态，从而定义两个图标和两个功能。在我们调用 add-popup 的第一个状态中，我们使用“star”类和负责添加弹出窗口的函数。此外，它还激活第二个状态，即所谓的“删除弹出窗口”。第二状态执行相反的操作。它使用“arrow”类并负责通过removeLayer()方法从地图中删除弹出窗口。使用“标题”，我们可以定义将鼠标放在按钮上时出现的文本。

在最后一行中，我们所做的是将切换对象添加到地图中：toggle.addTo(map);