187 lines
8.7 KiB
JavaScript
187 lines
8.7 KiB
JavaScript
import React from 'react';
|
|
|
|
import Dialog from '@material-ui/core/Dialog';
|
|
import DialogContent from '@material-ui/core/DialogContent';
|
|
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
|
|
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import RowItem from './RowItem';
|
|
import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
|
|
import { DCPJ_TYPES } from '../../consts';
|
|
import { Button, makeStyles, Typography } from '@material-ui/core';
|
|
import RealDrpLayer from '../../MapCtrl/mapstyle/realdrplayer';
|
|
import RealHDLayer from '../../MapCtrl/mapstyle/realhdlayer';
|
|
import RealSkLayer from '../../MapCtrl/mapstyle/realsklayer';
|
|
import DpAppBar from '../../../../layouts/mui/DpAppBar';
|
|
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
|
|
import YuwaiLayer from '../../MapCtrl/mapstyle/yuwailayer';
|
|
import PicStLayer from '../../MapCtrl/mapstyle/picstlayer';
|
|
import PumpLayer from '../../MapCtrl/mapstyle/tmp/pumplayer';
|
|
import BxSkLayer from '../../MapCtrl/mapstyle/tmp/bxsk';
|
|
//这里是新的
|
|
import BxjcLayer from '../../MapCtrl/mapstyle/bxjclayer';
|
|
import SyjcLayer from '../../MapCtrl/mapstyle/syjclayer';
|
|
import SljcLayer from '../../MapCtrl/mapstyle/sljclayer';
|
|
import ByjcLayer from '../../MapCtrl/mapstyle/byjclayer';
|
|
import ShuiZhaLayer from '../../MapCtrl/mapstyle/shuizhalayer';
|
|
import BzLayer from '../../MapCtrl/mapstyle/bzlayer';
|
|
import SbLayer from '../../MapCtrl/mapstyle/sblayer';
|
|
import QdLayer from '../../MapCtrl/mapstyle/qdlayer';
|
|
import ShuizhiLayer from '../../MapCtrl/mapstyle/shuizhilayer';
|
|
import TrsqLayer from '../../MapCtrl/mapstyle/trsqlayer';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const useStyles = makeStyles({
|
|
catRoot: {
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
flexWrap: 'wrap',
|
|
borderBottom: '1px dashed #bce9f088',
|
|
marginBottom: '0.5rem'
|
|
},
|
|
|
|
catItem: {
|
|
width: '45%'
|
|
}
|
|
})
|
|
|
|
|
|
function LayersDlg({ onClose }) {
|
|
const layerVisible = useSelector(getLayerVisible);
|
|
const layerSetting = useSelector(getLayerSetting);
|
|
const dispatch = useDispatch();
|
|
const classes = useStyles();
|
|
const layerVisibleChanged = (event) => {
|
|
const vo = { [event.target.name]: event.target.checked };
|
|
dispatch.map.setLayerVisible(vo);
|
|
};
|
|
|
|
const layerSettingChanged = (event) => {
|
|
const vo = { [event.target.name]: event.target.checked };
|
|
dispatch.map.setLayerSetting(vo);
|
|
}
|
|
|
|
return (
|
|
<Dialog
|
|
open={true}
|
|
onClose={onClose}
|
|
maxWidth="xl"
|
|
style={{ borderRadius: 0 }}
|
|
PaperComponent={DpPaperComponent}
|
|
BackdropComponent={DpBackgroundDrop}
|
|
>
|
|
<div className="boxhead"></div>
|
|
<DpAppBar position="sticky">
|
|
<Typography variant="h6" style={{ alignSelf: 'center', marginLeft: '0.5rem', flexGrow: 1 }}>图层显示设置</Typography>
|
|
<DpCloseButton onClick={onClose} />
|
|
</DpAppBar>
|
|
|
|
<DialogContent style={{ padding: '1rem', width: '30rem', overflowX: 'hidden' }}>
|
|
<div className={classes.catRoot}>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="adcd5" label="行政区划" name="AdcdLayer" checked={!!layerVisible.AdcdLayer} onChange={layerVisibleChanged} />
|
|
</div>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="fzdx" label="防灾对象" name="FzdxLayer" checked={!!layerVisible.FzdxLayer} onChange={layerVisibleChanged} />
|
|
</div>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="道路" label="道路" name="RoadLayer" checked={!!layerVisible.RoadLayer} onChange={layerVisibleChanged} />
|
|
</div>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="河流" label="河流" name="RivlLayer" checked={!!layerVisible.RivlLayer} onChange={layerVisibleChanged} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className={classes.catRoot}>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="drp" label="雨量监测" name={RealDrpLayer.LayerName} checked={!!layerVisible[RealDrpLayer.LayerName]} onChange={layerVisibleChanged} />
|
|
</div>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="rz" label="河道水位监测" name={RealHDLayer.LayerName} checked={!!layerVisible[RealHDLayer.LayerName]} onChange={layerVisibleChanged} />
|
|
</div>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="sk" label="水库监测" name={RealSkLayer.LayerName} checked={!!layerVisible[RealSkLayer.LayerName]} onChange={layerVisibleChanged} />
|
|
</div>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="drp" label="域外图层" name={YuwaiLayer.LayerName} checked={!!layerVisible[YuwaiLayer.LayerName]} onChange={layerVisibleChanged} />
|
|
</div>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="picst" label="图像站" name={PicStLayer.LayerName} checked={!!layerVisible[PicStLayer.LayerName]} onChange={layerVisibleChanged} />
|
|
</div>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="picst" label="变形监测" name={BxjcLayer.LayerName} checked={!!layerVisible[BxjcLayer.LayerName]} onChange={layerVisibleChanged} />
|
|
</div>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="picst" label="渗压监测" name={SyjcLayer.LayerName} checked={!!layerVisible[SyjcLayer.LayerName]} onChange={layerVisibleChanged} />
|
|
</div>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="picst" label="渗流监测" name={SljcLayer.LayerName} checked={!!layerVisible[SljcLayer.LayerName]} onChange={layerVisibleChanged} />
|
|
</div>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="picst" label="白蚁监测" name={ByjcLayer.LayerName} checked={!!layerVisible[ByjcLayer.LayerName]} onChange={layerVisibleChanged} />
|
|
</div>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="picst" label="水闸" name={ShuiZhaLayer.LayerName} checked={!!layerVisible[ShuiZhaLayer.LayerName]} onChange={layerVisibleChanged} />
|
|
</div>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="picst" label="泵站" name={BzLayer.LayerName} checked={!!layerVisible[BzLayer.LayerName]} onChange={layerVisibleChanged} />
|
|
</div>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="picst" label="水表" name={SbLayer.LayerName} checked={!!layerVisible[SbLayer.LayerName]} onChange={layerVisibleChanged} />
|
|
</div>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="picst" label="渠道" name={QdLayer.LayerName} checked={!!layerVisible[QdLayer.LayerName]} onChange={layerVisibleChanged} />
|
|
</div>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="picst" label="水质" name={ShuizhiLayer.LayerName} checked={!!layerVisible[ShuizhiLayer.LayerName]} onChange={layerVisibleChanged} />
|
|
</div>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="picst" label="土壤墒情" name={TrsqLayer.LayerName} checked={!!layerVisible[TrsqLayer.LayerName]} onChange={layerVisibleChanged} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className={classes.catRoot}>
|
|
{
|
|
Object.keys(DCPJ_TYPES).map(type => (
|
|
<div key={type} className={classes.catItem}>
|
|
<RowItem icon={type} label={DCPJ_TYPES[type]} name={`Dcpj_${type}Layer`} checked={!!layerVisible[`Dcpj_${type}Layer`]} onChange={layerVisibleChanged} />
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
|
|
|
|
<div className={classes.catRoot}>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="泵站" label="泵站" name={PumpLayer.LayerName} checked={!!layerVisible[PumpLayer.LayerName]} onChange={layerVisibleChanged} />
|
|
</div>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="病险水库" label="病险水库" name={BxSkLayer.LayerName} checked={!!layerVisible[BxSkLayer.LayerName]} onChange={layerVisibleChanged} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className={classes.catRoot}>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="地形" label="地形" name="dem" checked={!!layerSetting.dem} onChange={layerSettingChanged} />
|
|
</div>
|
|
<div className={classes.catItem}>
|
|
<RowItem icon="地形" label="卫星影像" name="dom" checked={!!layerSetting.dom} onChange={layerSettingChanged} />
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ textAlign: 'right' }}>
|
|
<Button onClick={() => { dispatch.map.resetMap(); }}>重置设置</Button>
|
|
</div>
|
|
|
|
</DialogContent>
|
|
<div className="boxfoot"></div>
|
|
</Dialog>
|
|
)
|
|
}
|
|
|
|
export default React.memo(LayersDlg);
|