怎样设置树形复选框，显示勾选的图层

要实现树形复选框，可以使用以下步骤：

1. 创建一个树形结构的视图，用于显示所有可选的图层。
2. 为每个图层创建一个复选框，并将其与图层相关联。
3. 当用户勾选或取消勾选复选框时，通过事件处理程序更新图层状态，并在地图上显示或隐藏相应的图层。

以下是一个示例代码，展示如何创建树形复选框：

<div id="layerTree"></div>

<script>
    // 图层列表
    const layers = [
        { id: 1, name: '图层1', visible: true },
        { id: 2, name: '图层2', visible: false },
        { id: 3, name: '图层3', visible: true },
        { id: 4, name: '图层4', visible: true },
    ];

    // 创建树形复选框
    function createLayerTree() {
        const tree = document.getElementById('layerTree');
        layers.forEach((layer) => {
            const node = document.createElement('div');
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.checked = layer.visible;
            checkbox.addEventListener('change', () => {
                layer.visible = checkbox.checked;
                updateLayerVisibility();
            });
            node.appendChild(checkbox);
            const label = document.createElement('label');
            label.innerText = layer.name;
            node.appendChild(label);
            tree.appendChild(node);
        });
    }

    // 更新图层可见性
    function updateLayerVisibility() {
        layers.forEach((layer) => {
            // 根据图层的 visible 属性来显示或隐藏相应的图层
            if (layer.visible) {
                // 显示图层
            } else {
                // 隐藏图层
            }
        });
    }

    createLayerTree();
    updateLayerVisibility();
</script>

在这个示例中，我们首先创建了一个包含图层信息的数组，然后创建了一个名为 `createLayerTree` 的函数，用于创建树形复选框。在创建每个节点时，我们附加了一个复选框和一个标签，并将复选框与图层的可见性相关联。当复选框的状态改变时，我们更新了相应的图层可见性，并调用 `updateLayerVisibility` 函数来显示或隐藏相应的图层。

这个示例代码仅提供了一个基本的实现思路，你可以根据自己的需求进行修改和定制。