84 lines
2.8 KiB
JavaScript
84 lines
2.8 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import { Tree } from 'antd';
|
||
|
|
import axios from 'axios';
|
||
|
|
import {
|
||
|
|
DownOutlined,
|
||
|
|
EyeOutlined,
|
||
|
|
EyeInvisibleOutlined,
|
||
|
|
} from '@ant-design/icons';
|
||
|
|
import SetLogoImagePath from './SetLogoImagePath'
|
||
|
|
import '../../../index.less';
|
||
|
|
|
||
|
|
class LayerData extends React.Component {
|
||
|
|
constructor () {
|
||
|
|
super ();
|
||
|
|
this.state = {
|
||
|
|
treeData: [],
|
||
|
|
layerId: '',
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取基础图层菜单栏
|
||
|
|
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 layerId = info.node.key.split('-')[1];
|
||
|
|
this.setState({
|
||
|
|
layerId: layerId
|
||
|
|
})
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<div className='layer-data-wrap'>
|
||
|
|
<Tree
|
||
|
|
multiple
|
||
|
|
showIcon
|
||
|
|
defaultSelectedKeys={[]}
|
||
|
|
switcherIcon={<DownOutlined />}
|
||
|
|
treeData={this.state.treeData}
|
||
|
|
onSelect={this.onLayerSelect}
|
||
|
|
/>
|
||
|
|
</div >
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
export default LayerData
|