WebGIS——Cesium实现多图层显隐功能（使用Antd Tree 树组件）

本文链接：https://blog.csdn.net/weixin_46127993/article/details/135408809

本文介绍了如何在React框架中，结合AntdTree组件和Cesium库，实现实时添加和隐藏多图层的功能，包括初始化树结构、编写图层加载和隐藏的方法，以及美化AntdTree组件的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Cesium实现多图层显隐功能，有一个很简单的思路，使用Antd Tree组件，所使用的是React框架
Antd地址：Ant Design of React组件

一、实现思路

1、利用Antd的Tree组件初始化一棵树，树的数据建议增加放入两个参数：图层名称layername，图层地址url；按照antd API 放入树的基础属性以及方法等。
2、写两个方法，分别为：加载对应链接+名字的图层AddImg，隐藏对应名字的图层HideLayer。
3、重新编辑树的onCheck方法，在该方法内实现图层的打开关闭，即调用AddImg和HideLayer方法。

二、代码

1、初始化一棵树：

①antd组件

<Tree
    checkable
    onExpand={
   onExpand}
    expandedKeys={
   expandedKeys}
    autoExpandParent={
   autoExpandParent}
    onCheck={
   onCheck}
    checkedKeys={
   checkedKeys}
    onSelect={
   onSelect}
    selectedKeys={
   selectedKeys}
    treeData={
   treeData}
 />

②Tree的数据

const treeData = [
        {
   
            title: '冰川数据年份',
            checkable: false,
            key: '999',
            children: [
                {
   
                    title: '古里雅冰川',
                    checkable: false,
                    key: '0-0-0',
                    children: [
                        {
   
                            title: '2021年',
                            key: '0-0-0-0',
                            isLeaf: true,
                            layername: "2021_gly",
                            url: "https://www.。。。。。。。"
                        },
                        {
   
                            title: '2022年',
                            key: '0-0-0-1',
                            isLeaf: true,
                            layername: "2022_gly",
                            url: "https://www.。。。。。。。"
                        },
                        {
   
                            title: '2023年',
                            key: '0-0-0-2',
                            isLeaf: true,
                            layername: "2023_gly",
                            url: "https://www.。。。。。。"
                        }
                    ]