leaflet-groupedlayercontrol 是一个用于 Leaflet.js 的插件，它提供了一个可定制的图层控制器，可以使用户方便地切换和管理多个图层。本文将详细介绍如何使用该插件。
安装
首先，需要在项目中安装 leaflet-groupedlayercontrol。可以使用以下命令：
npm install leaflet-groupedlayercontrol --save
引入
然后，在你的代码中引入 leaflet-groupedlayercontrol：
import L from 'leaflet'; import 'leaflet-groupedlayercontrol';
创建地图
接下来，创建一个包含地图和图层控制器的 HTML 元素：
<div id="map"></div>
然后，在 JavaScript 中使用以下代码创建地图：
const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);添加图层
我们可以使用 L.layerGroup() 方法创建多个图层，并将它们添加到地图上：
-- -------------------- ---- ------- ----- ------ - -------------- --------------- ---------------------------- ---------------- -------------------------- ---------------- ----------------------------- --- ----- --------- - -------------- ----------------- ------ ------ ------- ------- ------- ------- ------------------------ ----------------- ------ ------ ----- ---- ----- ---- ---------------------------- ----------------- ----- ------ --- ------ --- ------ -------------------------------- --- ------------------ ---------------------
创建图层控制器
最后，我们可以使用 L.control.groupedLayers() 方法创建一个图层控制器：
const groupedOverlays = {
'Cities': cities,
'Countries': countries
};
const layerControl = L.control.groupedLayers(null, groupedOverlays);
map.addControl(layerControl);现在，你可以在地图上切换和管理多个图层了。
示例代码
以下是完整的示例代码：
-- -------------------- ---- ------- ------ - ---- ---------- ------ ------------------------------ ----- --- - ----------------------------- ------- ---- ----------------------------------------------------------------- - ------------ ------- ------------- ------------- -------------- ----- ------ - -------------- --------------- ---------------------------- ---------------- -------------------------- ---------------- ----------------------------- --- ----- --------- - -------------- ----------------- ------ ------ ------- ------- ------- ------- ------------------------ ----------------- ------ ------ ----- ---- ----- ---- ---------------------------- ----------------- ----- ------ --- ------ --- ------ -------------------------------- --- ------------------ --------------------- ----- --------------- - - --------- ------- ------------ --------- -- ----- ------------ - ----------------------------- ----------------- ------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------