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

import React from 'react';
import { Tree, Button, Modal, Form, Input, Radio } from 'antd';
import axios from 'axios';
import {
  DownOutlined,
  EyeOutlined,
  EyeInvisibleOutlined,
} from '@ant-design/icons';
import SetLogoImagePath from './SetLogoImagePath'
import { createLayer } from '../../../api';
import '../../../index.less';

class LayerData extends React.Component {
    constructor () {
        super ();
        this.state = {
            treeData: [],
            layerId: '',
            isModalOpen: false,
            addLayer: {
                id: 0,
                logoImagePath: '',
                name: '',
                note: '',
            },
            selectLayerList: [],
        }
    }

    // 获取基础图层菜单栏
    getBasicLayerMenu = (adcode) => {
        return axios.get('/api/basicMap/getBasicLayerMenu', {
            params: {
                adcode: adcode
            }
        }).then((e) => {
            let basicLayeData = e.data.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, i),
                })
            }
            this.setState ({
                treeData: basicLayeList
            })
        });
    }
    getLayerList = (layerList, i) => {
        var cLayerList = [];
        for (let i in layerList) {
            cLayerList.push({
                'key': i + '-' + layerList[i].id + '-' + new Date(),
                'title': layerList[i].name + '(' + layerList[i].geoUnitAmount + ')',
                'icon': ({ selected }) => (selected ? [<EyeOutlined key={new Date().getTime()} />,<SetLogoImagePath logoImagePath={layerList[i].logoImagePath} key={new Date().getTime() + 1}/>]
                     : [<EyeInvisibleOutlined key={new Date().getTime()} />,<SetLogoImagePath logoImagePath={layerList[i].logoImagePath}  key={new Date().getTime() + 1}/>]),
                'type': layerList[i].type,
            })
        }
        return cLayerList;
    }
    // 选中图层
    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,
                'selected': true,
            })
        }
        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);
        }
    }
    //弹出框事件
    showModal = () => {
        this.setState({
            isModalOpen: true
        });
    };
    handleOk = (values) => {
        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,
                logoImagePath: this.state.addLayer.logoImagePath,
                name: this.state.addLayer.name,
                note: this.state.addLayer.note,
            }).then((e) => {
                this.setState({
                    isModalOpen: false
                });
            })
        }
    };
    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,
            }
        })
    };
    onLayerNoteChange = (e) => {
        this.setState({
            addLayer: {
                id: this.state.addLayer.id,
                logoImagePath: this.state.addLayer.logoImagePath,
                name: this.state.addLayer.name,
                note: 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,
            }
        })
    };
    //弹出框事件

    render() {
        return (
            <div className='layer-data-wrap'>
                <Tree
                    multiple
                    showIcon
                    defaultSelectedKeys={[]}
                    switcherIcon={<DownOutlined />}
                    treeData={this.state.treeData}
                    onSelect={this.onLayerSelect}
                />
                <Button type='primary' id='add-layer' className={this.state.treeData.length > 0 ? 'showItem' : 'hideItem'}
                onClick={this.showModal}>新建图层</Button>
                <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-group' onChange={this.onLayerIogoImagePathChange}>
                                <Radio.Button name='logoImagePath' value="icon01" className='radio-btn icon-01'></Radio.Button>
                                <Radio.Button name='logoImagePath' value="icon02" className='radio-btn icon-02'></Radio.Button>
                                <Radio.Button name='logoImagePath' value="icon03" className='radio-btn icon-03'></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