feat:分割线、刷新、加号、隐藏按钮

package-lock.json

@@ -6350,22 +6350,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001441",
-      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz",
-      "integrity": "sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-        }
-      ],
-      "license": "CC-BY-4.0"
-    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
@@ -16237,4 +16221,4 @@
       }
     }
   }
-}
+}

src/index.less

@@ -147,39 +147,152 @@ body {
 }
 .layer-data-title{
   width: 100%;
-  padding: 10px 0;
+  padding: 25px 0;
   text-align: center;
   background-color:  #FFFFFF;
+  font-size: 21px;
   // 内容不被选中
   -webkit-user-select:none;/*谷歌 /Chrome*/
 	-moz-user-select:none; /*火狐/Firefox*/
 	-ms-user-select:none;    /*IE 10+*/
 	user-select:none;
+}
+ // 重新加载按钮样式
+.layer-data-wrap .reload{
+  margin-left: 15px;
+  font-size: 15px;
+  cursor: pointer;
 }
 .layer-data-title span {
   margin: 10px 0;
 }
+.hiddenBtn{
+  overflow: hidden;
+  position: fixed;
+  height: 40px;
+  width: 40px;
+  top: 220px;
+  margin: 0 0 0 22%;
+  background: rgb(255, 255, 255);
+  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
+  border-radius: 10px;
+  opacity: 1; 
+  z-index: 99;
+  text-align: center;
+  padding-left: 0;
+  padding-right: 0;
+
+  // 动画
+  animation-name: moveBtn;
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+  animation-play-state: paused;
+  animation-timing-function: linear;
+  animation-direction: alternate;
+  animation-iteration-count: infinite;
+}
+@keyframes moveBtn{
+  from {
+    // margin-left: 0;
+  }
+  99%{
+    // margin-left: 0;
+  }
+  to {
+    margin: 0 0 0 4%;
+  }
+
+}
 .layer-data-wrap {
-    overflow: hidden;
+    // overflow: hidden;
+    overflow-y: auto;
+    overflow-x: hidden;
     position: fixed;
     top: 190px;
     width: 270px;
     max-height: 450px;
+    // min-height: 100px;
     margin: 2% 4.2%;
     background: rgba(239,240,248,1);
+    // background: rgba(239,240,248,0);
     box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
     border-radius: 10px;
     opacity: 1;
-    z-index: 999;
+    // 禁止换行
+    white-space:nowrap;
+    
+    z-index: 99;
+    // 动画
+    animation-name: hiddenLayer;
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+    animation-play-state: paused;
+    animation-timing-function: linear;
+    animation-direction: alternate;
+    animation-iteration-count: infinite;
   }
+  @keyframes hiddenLayer{
+    from {
+    }
+    99%{
+      width: 0px;  
+    }
+    to {
+      box-shadow: none;
+      width: 0px;  
+    }
+  }
+  .anticon-double-left {
+    // 动画
+    animation-name: turn;
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+    animation-play-state: paused;
+    animation-timing-function: linear;
+    animation-direction: alternate;
+    animation-iteration-count: infinite;
+  }
+  @keyframes turn{
+    from {
+      // transform: rotate(0deg);
+    }
+    99%{
+      // transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(180deg);
+    }
+  }
+  .layer-data-wrap .menu-list{
+    // width: 100%;
+    width: 270px;
+
+  }
+
+  // 隐藏滚轮条 
   .layer-data-wrap:hover{
-    overflow-y: auto !important;
+    // overflow-y: auto !important;
-    scrollbar-width: none; /* Firefox */
+    // scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none; /* IE 10+ */
+    // -ms-overflow-style: none; /* IE 10+ */
   }
   .layer-data-wrap:hover::-webkit-scrollbar {
-    display: none; /* Safari and Chrome */
+    // display: none; /* Safari and Chrome */
   }
+  .layer-name{
+    // margin-right: 50%;
+  }
+  .add-layer-btn{
+    float: right;
+    width: 20px;
+    height: 20px;
+  }
+  .add-layer-btn-disable{
+    cursor: not-allowed;
+    float: right;
+    width: 20px;
+    height: 20px;
+  }
+
   #add-layer{
     width: 100%;
     text-align: center;
@@ -845,4 +958,13 @@ body {
 }
 .l7-marker-container2 .l7-popup{
   pointer-events: all !important;
+}
+// 图层列表中横线样式
+.layer-data-wrap .ant-menu-item-divider{
+  // display:none;
+  height: 0.1px !important;
+  border: none;
+  margin: auto;
+  width: 90%;
+  background-color: #b2bec3 ;
 }

src/pages/BaseMap/LayerData/index.js

@@ -1,23 +1,24 @@
 import React from 'react';
-import { Tree, Button, Modal, Form, Input, Radio, message, Menu, Divider } from 'antd';
+import { Tree, Button, Modal, Form, Input, Radio, message, Menu, Divider, Tooltip } from 'antd';
 import {
-  DownOutlined,
+    DownOutlined,
-  EyeOutlined,
+    EyeOutlined,
-  EyeInvisibleOutlined,
+    EyeInvisibleOutlined,
-  UnderlineOutlined,
+    UnorderedListOutlined,
-  UnorderedListOutlined,
+    SyncOutlined,
+    DoubleLeftOutlined,
+    PlusOutlined,
 } from '@ant-design/icons';
 import SetLogoImagePath from './SetLogoImagePath'
 import { createLayer, getBasicLayerMenuApi } from '../../../api';
 import '../../../index.less';
-import { label } from 'three/examples/jsm/nodes/Nodes.js';
 
 class LayerData extends React.Component {
-    constructor () {
+    constructor() {
-        super ();
+        super();
         this.state = {
             treeData: [],
-            menuData:[], //菜单数据
+            menuData: [], //菜单数据
             layerId: '',
             isModalOpen: false,
             addLayer: {
@@ -29,31 +30,94 @@ class LayerData extends React.Component {
             },
             selectLayerList: [],
             selectLayerIdList: [],
+            layer: null,
+            btn: null,
+            icon: null,
         }
     }
 
+    // 钩子函数
+    componentDidMount = () => {
+        let layer = document.querySelector('.layer-data-wrap');
+        let btn = document.querySelector('.hiddenBtn');
+        let icon = document.querySelector('.anticon-double-left');
+
+        // 添加监听事件让其在动画结束后停止(paused状态)
+        // layer.onanimationiteration = this.paused(layer);
+        layer.addEventListener('animationiteration', () => { layer.style.animationPlayState = 'paused' });
+        btn.addEventListener('animationiteration', () => { btn.style.animationPlayState = 'paused' });
+        icon.addEventListener('animationiteration', () => { icon.style.animationPlayState = 'paused' });
+        // layer.addEventListener('animationstart',paused(layer));
+        // btn.addEventListener('animationstart',paused(btn));
+        // icon.addEventListener('animationstart',paused(icon));
+
+        this.setState({
+            layer: layer,
+            btn: btn,
+            icon: icon,
+        })
+    }
+
     // 获取基础图层菜单栏，获取列表数据
     getBasicLayerMenu = (adcode) => {
 
-        return getBasicLayerMenuApi({adcode: adcode}).then((e) => {
+        return getBasicLayerMenuApi({ adcode: adcode }).then((e) => {
             let basicLayeData = e.data;
+            console.log('basicLayeData', basicLayeData);
             // MenuData
             let menuDataList = [];
             for (var m in basicLayeData) {
+                let lab = null;
+                // if (basicLayeData[m].esIndex == "personal_point_layer")
+                if (m == 0){
+                    lab = <>
+                        <div>
+                            <span className='layer-name'>
+                                {basicLayeData[m].name}
+                            </span>
+                            <span className={basicLayeData[m].layerList.length >= 5 ? 'hideItem' : 'add-layer-btn' }>
+                                <Tooltip title='点击可创建新图层'>
+                                    <span onClick={this.addLayerHandle}><PlusOutlined /></span>
+                                </Tooltip>
+                            </span>
+                            <span className={basicLayeData[m].layerList.length < 5 ? 'hideItem' : 'add-layer-btn-disable' }>
+                                <Tooltip title='个人图层创建数量已达上限'>
+                                    <span onClick={this.disableBtn}><PlusOutlined /></span>
+                                </Tooltip>
+                            </span>
+                        </div>
+                    </>;
+                }else{
+                    lab = basicLayeData[m].name;
+                }
+
                 menuDataList.push({
+                    type: 'divider',
+                }, {
                     key: basicLayeData[m].id,
-                    label: basicLayeData[m].name,
+                    // label: basicLayeData[m].name,
-                    icon: <UnorderedListOutlined/>,
+                    label: lab,
+                    icon: <UnorderedListOutlined />,
                     children: this.getLayerList(basicLayeData[m].layerList),
-                })
+                });
             }
-            this.setState ({
+            this.setState({
                 menuData: menuDataList,
             })
             this.changeSelectStatus(menuDataList);
         });
     }
-    
+
+    addLayerHandle = (e) => {
+        // 阻止冒泡
+        e.stopPropagation();
+        console.log('addLayerHandle', e);
+        this.showModal();
+    }
+    disableBtn = (e) => {
+        // 阻止冒泡
+        e.stopPropagation();
+    }
 
     // 获取图层列表
     getLayerList = (layerList, i) => {
@@ -64,7 +128,7 @@ class LayerData extends React.Component {
                 key: i + '-' + layerList[i].id + '-' + new Date() + '-' + layerList[i].name + '(' + layerList[i].geoUnitAmount + ')' + '-' + layerList[i].isCustomize,
                 label: layerList[i].name + '(' + layerList[i].geoUnitAmount + ')',
                 // icon 分别为图标和小眼睛（是否显示该图层），后续在选择函数中修改
-                icon:[<SetLogoImagePath logoImagePath={layerList[i].logoImagePath} key={new Date().getTime() + 1}/>,<EyeInvisibleOutlined className='eye' key={new Date().getTime()} />],
+                icon: [<SetLogoImagePath logoImagePath={layerList[i].logoImagePath} key={new Date().getTime() + 1} />, <EyeInvisibleOutlined className='eye' key={new Date().getTime()} />],
                 // icon:({ selected }) => (selected ? [<EyeOutlined className='eye' key={new Date().getTime()} />,<SetLogoImagePath logoImagePath={layerList[i].logoImagePath} key={new Date().getTime() + 1}/>]
                 // : [<EyeInvisibleOutlined className='eye' key={new Date().getTime()} />,<SetLogoImagePath logoImagePath={layerList[i].logoImagePath}  key={new Date().getTime() + 1}/>]),
                 typee: layerList[i].type,
@@ -80,11 +144,11 @@ class LayerData extends React.Component {
         for (let i in menu) {
             for (let j in menu[i].children) {
                 if (layerId == menu[i].children[j].key.split('-')[1]) {
-                    menu[i].children[j].title = 'ooo' ;
+                    menu[i].children[j].title = 'ooo';
                 }
             }
         }
-        this.setState ({
+        this.setState({
             menuData: menu
         })
     }
@@ -92,7 +156,7 @@ class LayerData extends React.Component {
     selectLayer = (e) => {
         // 修改选中状态
         let menuData = this.state.menuData;
-        this.setState({menuData:[]})    // 将图层列表的数据清空（不清空组件不更新数据）
+        this.setState({ menuData: [] })    // 将图层列表的数据清空（不清空组件不更新数据）
         for (let i in menuData) {       // 将选中图层的小眼睛改为打开状态（重新写入数据）
             for (let j in menuData[i].children) {
                 if (e.key === menuData[i].children[j].key) {
@@ -118,24 +182,24 @@ class LayerData extends React.Component {
         for (let m in e.selectedKeys) {
             selectLayerList.push({
                 // key:  0：顺序 ，1：图层id ， 2：时间 ， 3：名称 ， 4：是否为自创图层
-                'value' : e.selectedKeys[m].split('-')[1],
+                'value': e.selectedKeys[m].split('-')[1],
-                'label' : e.selectedKeys[m].split('-')[3],
+                'label': e.selectedKeys[m].split('-')[3],
-                'isCustomize' : e.selectedKeys[m].split('-')[4],
+                'isCustomize': e.selectedKeys[m].split('-')[4],
             })
             selectLayerIdList.push(e.selectedKeys[m])
         }
         this.setState({
             layerId: layerId,
             selectLayerList: selectLayerList,
-            selectLayerIdList : selectLayerIdList,
+            selectLayerIdList: selectLayerIdList,
             menuData: [...menuData]
         })
     }
     // 取消选中图层
-    deselectlayer = (e) =>{
+    deselectlayer = (e) => {
         // 修改选中状态
         let menuData = this.state.menuData;
-        this.setState({menuData:[]})
+        this.setState({ menuData: [] })
         for (let i in menuData) {
             for (let j in menuData[i].children) {
                 if (e.key === menuData[i].children[j].key) {
@@ -160,16 +224,16 @@ class LayerData extends React.Component {
         for (let m in e.selectedKeys) {
             selectLayerList.push({
                 // key:  0：顺序 ，1：图层id ， 2：时间 ， 3：名称 ， 4：是否为自创图层
-                'value' : e.selectedKeys[m].split('-')[1],
+                'value': e.selectedKeys[m].split('-')[1],
-                'label' : e.selectedKeys[m].split('-')[3],
+                'label': e.selectedKeys[m].split('-')[3],
-                'isCustomize' : e.selectedKeys[m].split('-')[4],
+                'isCustomize': e.selectedKeys[m].split('-')[4],
             })
             selectLayerIdList.push(e.selectedKeys[m])
         }
         this.setState({
             layerId: layerId,
             selectLayerList: selectLayerList,
-            selectLayerIdList : selectLayerIdList,
+            selectLayerIdList: selectLayerIdList,
             menuData: [...menuData],
         })
     }
@@ -254,7 +318,7 @@ class LayerData extends React.Component {
         })
     };
     onLayerIogoImagePathChange = (e) => {
-                this.setState({
+        this.setState({
             addLayer: {
                 id: this.state.addLayer.id,
                 note: this.state.addLayer.note,
@@ -272,10 +336,10 @@ class LayerData extends React.Component {
         })
         if (selectLayerIdList.length <= 0) return;
         // 修改选中状态
-        for(let i in menuData){
+        for (let i in menuData) {
-            for(let j in menuData[i].children){
+            for (let j in menuData[i].children) {
-                for(let m in selectLayerIdList){
+                for (let m in selectLayerIdList) {
-                    if(selectLayerIdList[m].split('-')[1] === menuData[i].children[j].key.split('-')[1]){
+                    if (selectLayerIdList[m].split('-')[1] === menuData[i].children[j].key.split('-')[1]) {
                         selectLayerIdList[m] = menuData[i].children[j].key;
                     }
                 }
@@ -285,76 +349,138 @@ class LayerData extends React.Component {
             selectLayerIdList: selectLayerIdList
         })
     }
+    // 点击按钮重新加载
+    reload = () => {
+        console.log('reload');
+        // 重新加载业务
+
+        // loading效果
+        this.props.startLoading();
+        setTimeout(() => {
+            this.props.stopLoading();
+            // 提示框
+            message.success('图层数据已刷新！');
+        }, 2000);
+
+    };
+    // 根据情况改变隐藏按钮
+    hiddenButtonHandle = () => {
+        let self = this;
+        if (this.state.isHidden) {
+            // 隐藏
+            this.setState({
+                hiddenButton: (
+                    <Button onClick={() => {
+                        self.isHidden = !self.isHidden;
+                    }}>
+                        <span>&gt;&gt;</span>
+                    </Button>
+                )
+            })
+        } else {
+            // 显示
+            this.setState({
+                hiddenButton: (
+                    <Button onClick={() => {
+                        self.isHidden = !self.isHidden;
+                    }}>
+                        <span>&lt;&lt;</span>
+                    </Button>
+                )
+            })
+        }
+    };
+    paused = (item) => {
+        item.style.animationPlayState = 'paused';
+    };
+    running = (item) => {
+        item.style.animationPlayState = 'running';
+    };
+    hiddenLayer = () => {
+        console.log("hidden layer", this.state.layer);
+        this.running(this.state.layer);
+        this.running(this.state.btn);
+        this.running(this.state.icon);
+    }
 
     render() {
         return (
-            <div className='layer-data-wrap'>
+            <>
-             <div className='menu-list'>
+                <div className='layer-data-wrap'>
-                <div className={this.state.menuData.length > 0 ? 'showItem layer-data-title' : 'hideItem layer-data-title'}>
+                    <div className='menu-list'>
-                    <span>图层数据</span>
+                        <div className={this.state.menuData.length > 0 ? 'showItem layer-data-title' : 'hideItem layer-data-title'}>
-                </div>
+                            <span>图层数据</span>
-                <Menu
+                            <span className='reload'>
-                    multiple
+                                <Tooltip title='点击可刷新图层信息数据'>
-                    id='layer-data-menu'
+                                    <span onClick={this.reload}><SyncOutlined /></span>
-                    onDeselect={this.deselectlayer}
+                                </Tooltip>
-                    onSelect={this.selectLayer}
+                            </span>
-                    items={this.state.menuData}
+                        </div>
-                    mode='inline'
+                        <Menu
-                    selectedKeys={this.state.selectLayerIdList}
+                            multiple
-                />
+                            id='layer-data-menu'
-                <div id='add-layer'>
+                            onDeselect={this.deselectlayer}
-                    <Button type='primary' id='add-layer-button' className={this.state.menuData.length > 0 ? 'showItem' : 'hideItem'}
+                            onSelect={this.selectLayer}
-                    onClick={this.showModal}>新建图层</Button>
+                            items={this.state.menuData}
-                </div>
+                            mode='inline'
-             </div>
+                            selectedKeys={this.state.selectLayerIdList}
-                <Modal title="新建图层" open={this.state.isModalOpen} onOk={this.handleOk} onCancel={this.handleCancel} className='edit-layer-modal'>
+                        />
-                    <Form name='base' id='edit-layer-form' onFinish={this.handleOk}>
+                        {/* <div id='add-layer'>
-                        <Form.Item label="图层名称"
+                        <Button type='primary' id='add-layer-button' className={this.state.menuData.length > 0 ? 'showItem' : 'hideItem'}
-                        rules={[
+                            onClick={this.showModal}>新建图层</Button>
-                            {
+                    </div> */}
-                                required: true,
+                    </div>
-                                message: '请输入图层名称!',
+                    <Modal title="新建图层" open={this.state.isModalOpen} onOk={this.handleOk} onCancel={this.handleCancel} className='edit-layer-modal'>
-                            }
+                        <Form name='base' id='edit-layer-form' onFinish={this.handleOk}>
-                        ]}>
+                            <Form.Item label="图层名称"
-                            <Input name='id' type='hidden' value={this.state.addLayer.id}/>
+                                rules={[
-                            <Input name='name' value={this.state.addLayer.name} onChange={this.onLayerNameChange}/>
+                                    {
-                        </Form.Item>
+                                        required: true,
-                        <Form.Item label="图层图标" rules={[
+                                        message: '请输入图层名称!',
-                            {
+                                    }
-                                required: true,
+                                ]}>
-                                message: '请选择图层图标!',
+                                <Input name='id' type='hidden' value={this.state.addLayer.id} />
-                            }
+                                <Input name='name' value={this.state.addLayer.name} onChange={this.onLayerNameChange} />
-                        ]}>
+                            </Form.Item>
-                            <Radio.Group id='redio-btn-color-group' onChange={this.onLayerIconColorChange}>
+                            <Form.Item label="图层图标" rules={[
-                                <Radio.Button name='logoColor' value='red' className='radio-btn-color color-01'></Radio.Button>
+                                {
-                                <Radio.Button name='logoColor' value='yellow' className='radio-btn-color color-02'></Radio.Button>
+                                    required: true,
-                                <Radio.Button name='logoColor' value='green' className='radio-btn-color color-03'></Radio.Button>
+                                    message: '请选择图层图标!',
-                                <Radio.Button name='logoColor' value='blue' className='radio-btn-color color-04'></Radio.Button>
+                                }
-                                <Radio.Button name='logoColor' value='cyan' className='radio-btn-color color-05'></Radio.Button>
+                            ]}>
-                                <Radio.Button name='logoColor' value='pink' className='radio-btn-color color-06'></Radio.Button>
+                                <Radio.Group id='redio-btn-color-group' onChange={this.onLayerIconColorChange}>
-                                <Radio.Button name='logoColor' value='white' className='radio-btn-color color-07'></Radio.Button>
+                                    <Radio.Button name='logoColor' value='red' className='radio-btn-color color-01'></Radio.Button>
-                                <Radio.Button name='logoColor' value='gray' className='radio-btn-color color-08'></Radio.Button>
+                                    <Radio.Button name='logoColor' value='yellow' className='radio-btn-color color-02'></Radio.Button>
-                                <Radio.Button name='logoColor' value='black' className='radio-btn-color color-09'></Radio.Button>
+                                    <Radio.Button name='logoColor' value='green' className='radio-btn-color color-03'></Radio.Button>
-                            </Radio.Group>
+                                    <Radio.Button name='logoColor' value='blue' className='radio-btn-color color-04'></Radio.Button>
-                            <Radio.Group id='redio-btn-group' onChange={this.onLayerIogoImagePathChange}>
+                                    <Radio.Button name='logoColor' value='cyan' className='radio-btn-color color-05'></Radio.Button>
-                                <Radio.Button name='logoImagePath' value={`iconPoint01_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint01_${this.state.addLayer.logoImageColor}`}></Radio.Button>
+                                    <Radio.Button name='logoColor' value='pink' className='radio-btn-color color-06'></Radio.Button>
-                                <Radio.Button name='logoImagePath' value={`iconPoint02_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint02_${this.state.addLayer.logoImageColor}`}></Radio.Button>
+                                    <Radio.Button name='logoColor' value='white' className='radio-btn-color color-07'></Radio.Button>
-                                <Radio.Button name='logoImagePath' value={`iconPoint03_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint03_${this.state.addLayer.logoImageColor}`}></Radio.Button>
+                                    <Radio.Button name='logoColor' value='gray' className='radio-btn-color color-08'></Radio.Button>
-                                <Radio.Button name='logoImagePath' value={`iconPoint04_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint04_${this.state.addLayer.logoImageColor}`}></Radio.Button>
+                                    <Radio.Button name='logoColor' value='black' className='radio-btn-color color-09'></Radio.Button>
-                                <Radio.Button name='logoImagePath' value={`iconPoint05_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint05_${this.state.addLayer.logoImageColor}`}></Radio.Button>
+                                </Radio.Group>
-                                <Radio.Button name='logoImagePath' value={`iconPoint06_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint06_${this.state.addLayer.logoImageColor}`}></Radio.Button>
+                                <Radio.Group id='redio-btn-group' onChange={this.onLayerIogoImagePathChange}>
-                                <Radio.Button name='logoImagePath' value={`iconPoint07_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint07_${this.state.addLayer.logoImageColor}`}></Radio.Button>
+                                    <Radio.Button name='logoImagePath' value={`iconPoint01_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint01_${this.state.addLayer.logoImageColor}`}></Radio.Button>
-                                <Radio.Button name='logoImagePath' value={`iconPoint08_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint08_${this.state.addLayer.logoImageColor}`}></Radio.Button>
+                                    <Radio.Button name='logoImagePath' value={`iconPoint02_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint02_${this.state.addLayer.logoImageColor}`}></Radio.Button>
-                                <Radio.Button name='logoImagePath' value={`iconPoint09_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint09_${this.state.addLayer.logoImageColor}`}></Radio.Button>
+                                    <Radio.Button name='logoImagePath' value={`iconPoint03_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint03_${this.state.addLayer.logoImageColor}`}></Radio.Button>
-                            </Radio.Group>
+                                    <Radio.Button name='logoImagePath' value={`iconPoint04_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint04_${this.state.addLayer.logoImageColor}`}></Radio.Button>
-                        </Form.Item>
+                                    <Radio.Button name='logoImagePath' value={`iconPoint05_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint05_${this.state.addLayer.logoImageColor}`}></Radio.Button>
-                        <Form.Item label="图层备注">
+                                    <Radio.Button name='logoImagePath' value={`iconPoint06_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint06_${this.state.addLayer.logoImageColor}`}></Radio.Button>
-                            <Input.TextArea name='note' value={this.state.addLayer.note} onChange={this.onLayerNoteChange} 
+                                    <Radio.Button name='logoImagePath' value={`iconPoint07_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint07_${this.state.addLayer.logoImageColor}`}></Radio.Button>
-                            style={{height: '120px'}}/>
+                                    <Radio.Button name='logoImagePath' value={`iconPoint08_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint08_${this.state.addLayer.logoImageColor}`}></Radio.Button>
-                        </Form.Item>
+                                    <Radio.Button name='logoImagePath' value={`iconPoint09_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint09_${this.state.addLayer.logoImageColor}`}></Radio.Button>
-                    </Form>
+                                </Radio.Group>
-                </Modal>
+                            </Form.Item>
-            </div >
+                            <Form.Item label="图层备注">
+                                <Input.TextArea name='note' value={this.state.addLayer.note} onChange={this.onLayerNoteChange}
+                                    style={{ height: '120px' }} />
+                            </Form.Item>
+                        </Form>
+                    </Modal>
+                </div >
+                <Button onClick={this.hiddenLayer} className={this.state.menuData.length > 0 ? 'hiddenBtn showItem' : 'hiddenBtn hideItem'}><DoubleLeftOutlined /></Button>
+                {/* <Button onClick={this.hiddenLayer} className='hiddenBtn'><DoubleLeftOutlined/></Button> */}
+            </>
         );
     }
 }

src/pages/BaseMap/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Select, Input, Card, Col, Row, Button, message, Modal, Spin, Form, Alert, Space } from 'antd';
-import {ExclamationCircleFilled } from '@ant-design/icons';
+import {DoubleLeftOutlined, ExclamationCircleFilled } from '@ant-design/icons';
 import LayerData from './LayerData';
 // import LayerList from './LayerList';
-import { AimOutlined } from '@ant-design/icons';
+import { AimOutlined, DoubleRightOutlined } from '@ant-design/icons';
 import Header from '../../components/Header/index.js';
 import { createPoint, updatePoint, getDetailByIdApi, queryUserLayers, getLayerPointsApi, getAllProvinceApi, getCityByProvinceApi, getDistrictByCityApi, getLayerShapesApi, getPointByAddressApi, deletePoint } from '../../api';
 import Pop from './pop'
@@ -944,6 +944,17 @@ class BaseMap extends React.Component{
         console.log('Failed:', errorInfo);
     }
 
+    hiddenLayer = () => {
+        let layer = document.querySelector('.layer-data-wrap');
+        let btn = document.querySelector('.hiddenBtn');
+        let icon = document.querySelector('.anticon-double-left');
+        console.log("hidden layer", icon);
+        layer.style.animationPlayState = 'running';
+        btn.style.animationPlayState = 'running';
+        icon.style.animationPlayState = 'running';
+
+    }
+
     render(){   
         return (
             <div id='base_map' className={styles.basseMap} >
@@ -998,7 +1009,10 @@ class BaseMap extends React.Component{
                     adcode={{cityAdcode: this.state.cityAdcode, districtAdcode: this.state.districtAdcode}}
                     getLayerPoints = {this.getLayerPoints} 
                     getLayerShapes = {this.getLayerShapes}
+                    startLoading = {this.startLoading}
+                    stopLoading = {this.stopLoading}
                 />
+                {/* <Button onClick={this.hiddenLayer} className='hiddenBtn'><DoubleLeftOutlined/></Button> */}
 
                 <div className={styles.btnRightWrap}>
                     <Button type="primary" className={styles.btnRight} onClick={this.enableDrawPoint} disabled={this.state.disabled}>点位创建</Button>