map/src/pages/BaseMap/LayerData/index.js

import React from 'react';
import { Tree, Button, Modal, Form, Input, Radio, message, Menu } from 'antd';
import {
  DownOutlined,
  EyeOutlined,
  EyeInvisibleOutlined,
  UnderlineOutlined,
  UnorderedListOutlined,
} 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 () {
        super ();
        this.state = {
            treeData: [],
            menuData:[], //菜单数据
            layerId: '',
            isModalOpen: false,
            addLayer: {
                id: 0,
                logoImageColor: 'gray',
                logoImagePath: '',
                name: '',
                note: '',
            },
            selectLayerList: [],
        }
    }

    // 获取基础图层菜单栏，获取列表数据
    getBasicLayerMenu = (adcode) => {
        return getBasicLayerMenuApi({adcode: adcode}).then((e) => {
            let basicLayeData = e.data;
            let basicLayeList = [];
            for (var i in basicLayeData) {
                basicLayeList.push({
                    key: basicLayeData[i].id,
                    title : basicLayeData[i].name,
                    selectable: false,
                    children: this.getLayerList(basicLayeData[i].layerList),
                })
            }
            this.setState ({
                menuData: menuDataList,
            })
        });
    }
    

    // 获取图层列表
    getLayerList = (layerList, i) => {
        var cLayerList = [];
        for (let i in layerList) {
            cLayerList.push({
                // key:  0：顺序 ，1：图层id ， 2：时间 ， 3：名称 ， 4：是否为自创图层
                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:({ 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,
                isCustomize: layerList[i].isCustomize,
            })
        }
        return cLayerList;
    }

    //新建点位后修改涂层数量
    changeUnitAmount = (layerId) => {
        let menu = this.state.menuData;
        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' ;
                }
            }
        }
        this.setState ({
            menuData: menu
        })
    }
    // 选中图层
    onLayerSelect = (selectedKeys, info) => {
        let selectLayerList = [];
        let layerId = info.node.key.split('-')[1];
        for (let i in info.selectedNodes) {
            selectLayerList.push({
                'value': info.selectedNodes[i].key.split('-')[1],
                'label': info.selectedNodes[i].title,
                'isCustomize': info.selectedNodes[i].isCustomize,
            })
        }
        this.setState({
            layerId: layerId,
            selectLayerList: selectLayerList,
        })
        if (info.node.type === 1 || info.node.type === 4) {
            this.props.getLayerPoints(layerId, info.selected, info.node.type);
        } else if (info.node.type === 2) {
            this.props.getLayerShapes(layerId, info.selected);
        }
    }
    // 选中图层
    selectLayer = (e) => {
        // 修改选中状态
        let menuData = this.state.menuData;
        this.setState({menuData:[]})    // 将图层列表的数据清空（不清空组件不更新数据）
        for (let i in menuData) {       // 将选中图层的小眼睛改为打开状态（重新写入数据）
            for (let j in menuData[i].children) {
                if (e.key === menuData[i].children[j].key) {
                    let iconList = menuData[i].children[j].icon[0];
                    menuData[i].children[j].icon = [];
                    menuData[i].children[j].icon.push(iconList);
                    menuData[i].children[j].icon.push(<EyeOutlined className='eye' key={new Date().getTime()} />);
                }
            }
        }

        // 改变选择状态并改变地图上的图层
        let layerId = e.key.split('-')[1];
        if (e.item.props.typee === 1 || e.item.props.typee === 4) {
            this.props.getLayerPoints(layerId, true, e.item.props.typee);
        } else if (e.item.props.typee === 2) {
            this.props.getLayerShapes(layerId, true);
        }

        // 将选中图层写入选中图层列表
        let selectLayerList = [];
        for (let m in e.selectedKeys) {
            selectLayerList.push({
                // key:  0：顺序 ，1：图层id ， 2：时间 ， 3：名称 ， 4：是否为自创图层
                'value' : e.selectedKeys[m].split('-')[1],
                'label' : e.selectedKeys[m].split('-')[3],
                'isCustomize' : e.selectedKeys[m].split('-')[4],
            })
        }
        this.setState({
            layerId: layerId,
            selectLayerList: selectLayerList,
            menuData: [...menuData]
        })
    }
    // 取消选中图层
    deselectlayer = (e) =>{
        // 修改选中状态
        let menuData = this.state.menuData;
        this.setState({menuData:[]})
        for (let i in menuData) {
            for (let j in menuData[i].children) {
                if (e.key === menuData[i].children[j].key) {
                    let iconList = menuData[i].children[j].icon[0];
                    menuData[i].children[j].icon = [];
                    menuData[i].children[j].icon.push(iconList);
                    menuData[i].children[j].icon.push(<EyeInvisibleOutlined className='eye' key={new Date().getTime()} />);
                }
            }
        }
        // 改变选择状态并改变地图上的图层
        let layerId = e.key.split('-')[1];
        if (e.item.props.typee === 1 || e.item.props.typee === 4) {
            this.props.getLayerPoints(layerId, false, e.item.props.typee);
        } else if (e.item.props.typee === 2) {
            this.props.getLayerShapes(layerId, false);
        }

        // 将选中图层写入选中图层列表
        let selectLayerList = [];
        for (let m in e.selectedKeys) {
            selectLayerList.push({
                // key:  0：顺序 ，1：图层id ， 2：时间 ， 3：名称 ， 4：是否为自创图层
                'value' : e.selectedKeys[m].split('-')[1],
                'label' : e.selectedKeys[m].split('-')[3],
                'isCustomize' : e.selectedKeys[m].split('-')[4],
            })
        }
        this.setState({
            layerId: layerId,
            selectLayerList: selectLayerList,
            menuData: [...menuData],
        })
    }
    //弹出框事件
    showModal = () => {
        this.setState({
            isModalOpen: true
        });
    };
    handleOk = (values) => {
        let self = this;
        if (this.state.addLayer.id != 0) { //编辑图层
            updateLayer({
                id: this.state.addLayer.id,
                logoImagePath: this.state.addLayer.logoImagePath,
                name: this.state.addLayer.name,
                note: this.state.addLayer.note,
            }).then((e) => {
                this.setState({
                    isModalOpen: false
                });
            })
        } else {
            createLayer({ //创建图层
                // id: this.state.addLayer.id,
                cityAdcode: this.props.adcode.cityAdcode,
                districtAdcode: this.props.adcode.districtAdcode,
                logoImagePath: this.state.addLayer.logoImagePath,
                name: this.state.addLayer.name,
                note: this.state.addLayer.note,
            }).then((e) => {
                if (e.success) {
                    message.success(e.message || '图层创建成功!');
                    this.setState({
                        isModalOpen: false
                    });
                } else {
                    message.error(e.message || '图层创建失败！');
                }
            }).then(() => {
                let filter = self.props.adcode.districtAdcode || self.props.adcode.cityAdcode;
                self.getBasicLayerMenu(filter)
            })
        }
    };
    handleCancel = () => {
        this.setState({
            isModalOpen: false
        });
    };
    onLayerNameChange = (e) => {
        this.setState({
            addLayer: {
                id: this.state.addLayer.id,
                logoImagePath: this.state.addLayer.logoImagePath,
                note: this.state.addLayer.note,
                name: e.target.value,
                logoImageColor: this.state.addLayer.logoImageColor
            }
        })
    };
    onLayerNoteChange = (e) => {
        this.setState({
            addLayer: {
                id: this.state.addLayer.id,
                logoImagePath: this.state.addLayer.logoImagePath,
                name: this.state.addLayer.name,
                note: e.target.value,
                logoImageColor: this.state.addLayer.logoImageColor
            }
        })
    };
    onLayerIconColorChange = (e) => {
        this.setState({
            addLayer: {
                id: this.state.addLayer.id,
                note: this.state.addLayer.note,
                name: this.state.addLayer.name,
                logoImagePath: this.state.addLayer.logoImagePath,
                logoImageColor: e.target.value
            }
        })
    };
    onLayerIogoImagePathChange = (e) => {
                this.setState({
            addLayer: {
                id: this.state.addLayer.id,
                note: this.state.addLayer.note,
                name: this.state.addLayer.name,
                logoImagePath: e.target.value,
                logoImageColor: this.state.addLayer.logoImageColor
            }
        })
    };
    // 根据已选列表变化
    changeSelectStatus = () => {
        for (let n in this.state.selectLayerList) {
            // 修改选中状态
            let menuData = this.state.menuData;
            this.setState({menuData:[]})
            for (let i in menuData) {
                for (let j in menuData[i].children) {
                    if (this.state.selectLayerList[n].value === menuData[i].children[j].key.split('-')[1]) {
                        let iconList = menuData[i].children[j].icon[0];
                        menuData[i].children[j].icon = [];
                        menuData[i].children[j].icon.push(iconList);
                        menuData[i].children[j].icon.push(<EyeOutlined className='eye' key={new Date().getTime()} />);
                    }
                }
            }
            this.setState({
                menuData: [...menuData]
            })
        }
    }

    render() {
        return (
            <div className='layer-data-wrap'>
             <div className='menu-list'>
                <div className={this.state.menuData.length > 0 ? 'showItem layer-data-title' : 'hideItem layer-data-title'}>
                    <span>图层数据</span>
                </div>
                <Menu
                    multiple
                    id='layer-data-menu'
                    onDeselect={this.deselectlayer}
                    onSelect={this.selectLayer}
                    items={this.state.menuData}
                    mode='inline'
                />
                <div id='add-layer'>
                    <Button type='primary' id='add-layer-button' className={this.state.menuData.length > 0 ? 'showItem' : 'hideItem'}
                    onClick={this.showModal}>新建图层</Button>
                </div>
             </div>
                <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="图层名称"
                        rules={[
                            {
                                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>
                        <Form.Item label="图层图标" rules={[
                            {
                                required: true,
                                message: '请选择图层图标!',
                            }
                        ]}>
                            <Radio.Group id='redio-btn-color-group' onChange={this.onLayerIconColorChange}>
                                <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>
                                <Radio.Button name='logoColor' value='green' className='radio-btn-color color-03'></Radio.Button>
                                <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.Button name='logoColor' value='white' className='radio-btn-color color-07'></Radio.Button>
                                <Radio.Button name='logoColor' value='gray' className='radio-btn-color color-08'></Radio.Button>
                                <Radio.Button name='logoColor' value='black' className='radio-btn-color color-09'></Radio.Button>
                            </Radio.Group>
                            <Radio.Group id='redio-btn-group' onChange={this.onLayerIogoImagePathChange}>
                                <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={`iconPoint02_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint02_${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.Button name='logoImagePath' value={`iconPoint04_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint04_${this.state.addLayer.logoImageColor}`}></Radio.Button>
                                <Radio.Button name='logoImagePath' value={`iconPoint05_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint05_${this.state.addLayer.logoImageColor}`}></Radio.Button>
                                <Radio.Button name='logoImagePath' value={`iconPoint06_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint06_${this.state.addLayer.logoImageColor}`}></Radio.Button>
                                <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={`iconPoint08_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint08_${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.Group>
                        </Form.Item>
                        <Form.Item label="图层备注">
                            <Input.TextArea name='note' value={this.state.addLayer.note} onChange={this.onLayerNoteChange} 
                            style={{height: '120px'}}/>
                        </Form.Item>
                    </Form>
                </Modal>
            </div >
        );
    }
}
export default LayerData