leaflet图层树

Leaflet 是一个开源的 JavaScript 库，用于创建互动式的地图应用程序。要创建一个图层树，可以按照以下步骤进行操作：

1. 导入 Leaflet 库和相关的 CSS 文件到你的 HTML 页面中。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>

2. 创建一个包含地图的容器元素。例如，一个带有 `id` 为 `map` 的 `<div>` 元素。

<div id="map" style="height: 400px;"></div>

3. 在 JavaScript 中，使用 Leaflet 创建地图，并添加图层。

// 创建地图实例
var map = L.map('map').setView([51.505, -0.09], 13);

// 添加底图图层
var baseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a>',
}).addTo(map);

// 创建图层组
var layerGroup = L.layerGroup().addTo(map);

// 添加图层到图层组
var layer1 = L.marker([51.5, -0.09]).addTo(layerGroup);
var layer2 = L.circle([51.508, -0.11], { radius: 200 }).addTo(layerGroup);

// 创建图层树控件
L.control.layers({ 'Base Map': baseLayer }, { 'Layer Group': layerGroup }).addTo(map);

在这个例子中，我们创建了一个地图实例，并设置了初始的视图中心点。然后，我们添加了一个底图图层和一个图层组，并将图层添加到图层组中。最后，我们使用 `L.control.layers` 方法创建了一个图层树控件，并将其添加到地图上。

通过这个控件，用户可以选择显示或隐藏不同的图层，以便更好地探索地图中的数据。你可以根据自己的需求，添加更多图层和图层组。

希望这个简单的例子可以帮助你创建一个图层树。如有更多问题，请随时提问！