ss-dp/src/views/Home/mapToolBox/index.js

import React, { useEffect, useReducer, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Checkbox, message  } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import { useLocation } from 'react-router'
import './index.less'

export default function Btn() {
    const dispatch = useDispatch()
    const location = useLocation()
    const showPanels = useSelector((s) => s.runtime.showPanels)
    const layerVisible = useSelector(s => s.map.layerVisible);
    const isFullScreen = useSelector(s => s.runtime.isFullScreen)
    const mapCenter = useSelector(s => s.runtime.mapCenter)||{}
    const mode = useSelector(s=>s.map.mode)
    const [open, setOpen] = useState(false)//是否弹出图层窗口
    const [targetZoom, setTargetZoom] = useState(null)//点击缩放按钮后地图目标的zoom值

    useEffect(()=>{
        //移动地图后同步targetZoom值
        setTargetZoom(mapCenter?.zoom||null)
    },[mapCenter])

    const layerVisibleChanged = (event)=>{
        const vo = { [event.target.name]: event.target.checked };
        dispatch.map.setLayerVisible(vo);
    }
    const mapType = (event)=>{
        const name = event.target.name
        const checked = event.target.checked

        if(name==='SatelliteImage'&&checked){
            dispatch.map.setMode('2d');
            dispatch.map.setLayerVisible({ ['SatelliteImage']: true });
            dispatch.map.setLayerVisible({ ['OfflineMap']: false });
            dispatch.map.setLayerSetting({HLLayer: 'B'})
            dispatch.map.setLayerSetting({LakeLayer: 'B'})
        }
        if(name==='OfflineMap'&&checked){
            dispatch.map.setMode('2d');
            dispatch.map.setLayerVisible({ ['OfflineMap']: true });
            dispatch.map.setLayerVisible({ ['SatelliteImage']: false });
            dispatch.map.setLayerSetting({HLLayer: 'A',})
            dispatch.map.setLayerSetting({LakeLayer: 'A'})
        }
        if(name === '3d'&&'&&checked'){
            if(location.pathname==='/mgr/sy/tqyb'){
                message.error('天气预报无法切换3d视图')
                return 
            }
            dispatch.map.setMode('3d');
            dispatch.map.setLayerVisible({ ['SatelliteImage']: false });
            dispatch.map.setLayerVisible({ ['OfflineMap']: false });
            dispatch.map.setLayerSetting({HLLayer: 'B'})
            dispatch.map.setLayerSetting({LakeLayer: 'B'})
        }
    }

    return (
        <div className="mapToolBox" style={{right: showPanels?'445px':'10px'}}>
            <div className='mapToolBtn'>
                <div title={`${showPanels?'收起':'展开'}功能块`} onClick={()=>dispatch.runtime.setShowPanels(!showPanels)}>
                    <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/${showPanels?'shouqi.png':'zhankai.png'}`} />
                </div>
                <div title="查询" onClick={()=>{}}>
                    <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/search.png`} />
                </div>
                <div title="还原地图展示位置" onClick={()=>dispatch.runtime.setHome()}>
                    <img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/center.png`} />
                </div>
                <div title="天气" onClick={()=>{}}>
                    <img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/tianqi.png`} />
                </div>
                <div title="放大" onClick={()=>{
                    if(mapCenter?.zoom === targetZoom){
                        dispatch.runtime.setCameraTarget({...mapCenter, zoom: mapCenter.zoom + 1, fixed:true})
                        setTargetZoom(mapCenter.zoom + 1)
                    }
                }}>
                    <img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/fangda.png`} />
                </div>
                <div title="缩小" onClick={()=>{
                    if(mapCenter?.zoom === targetZoom){
                        dispatch.runtime.setCameraTarget({...mapCenter, zoom: mapCenter.zoom - 1, fixed:true })
                        setTargetZoom(mapCenter.zoom - 1)
                    }
                }}>
                    <img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/suoxiao.png`} />
                </div>
                <div title="截图" onClick={()=>{}}>
                    <img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/download.png`} />
                </div>
                <div title={isFullScreen?"退出全屏":"进入全屏"} onClick={()=>dispatch.runtime.setIsFullScreen(!isFullScreen)}>
                    <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/${isFullScreen?'quanping2.png':'quanping.png'}`} />
                </div>
                <div title="地图展示图层控制" onClick={()=>{setOpen(!open)}}>
                    <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/tuceng.png`} />
                </div>
            </div>

            <div className='mapToolLayer' style={{width: open ? '300px' : '0',}}>
                <div className='mapToolLayerBox'> 
                    <div className='mapToolLayerBoxTitle'>
                        图层显示控制
                        <CloseOutlined className='mapToolLayerBoxTitleIcon' onClick={()=>setOpen(false)}/>
                    </div>
                    <div className='mapToolLayerBoxContent'>
                        <div className='mapToolLayerBoxTitle2'>基础图层</div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/xian.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>行政区划</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['AdcdLayer']} onChange={layerVisibleChanged} name={'AdcdLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={20} height={5} src={`${process.env.PUBLIC_URL}/assets/mapicon/heliu.svg`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>河流</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['HLLayer']} onChange={layerVisibleChanged} name={'HLLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={18} height={18} src={`${process.env.PUBLIC_URL}/assets/mapicon/hupo.svg`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>湖泊</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['LakeLayer']} onChange={layerVisibleChanged} name={'LakeLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={20} height={20} src={`${process.env.PUBLIC_URL}/assets/mapicon/3dMap.jpg`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>3D图</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={mode==='3d'} onChange={mapType} name={'3d'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={20} height={20} src={`${process.env.PUBLIC_URL}/assets/icons/yingxiangtu.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>影像图</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['SatelliteImage']} onChange={mapType} name={'SatelliteImage'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={20} height={20} src={`${process.env.PUBLIC_URL}/assets/icons/shiliangtu.svg`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>矢量图</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['OfflineMap']} onChange={mapType} name={'OfflineMap'} ></Checkbox>
                            </div>
                        <div className='mapToolLayerBoxTitle2'>监测体系</div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/drp.svg`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>雨量站</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['RealDrpLayer']} onChange={layerVisibleChanged} name={'RealDrpLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={10} height={18} src={`${process.env.PUBLIC_URL}/assets/mapicon/hdsw.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>水位站</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['HdswLayer']} onChange={layerVisibleChanged} name={'HdswLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/flow.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>流量站</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['GongShuiLayer']} onChange={layerVisibleChanged} name={'GongShuiLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/video.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>视频点</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['PicStLayer']} onChange={layerVisibleChanged} name={'PicStLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/yjgb.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>预警广播</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['YjgbLayer']} onChange={layerVisibleChanged} name={'YjgbLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/wy.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>位移站</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['WYLayer']} onChange={layerVisibleChanged} name={'WYLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/sy.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>渗压站</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['SYLayer']} onChange={layerVisibleChanged} name={'SYLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/sl.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>渗流站</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['SLLayer']} onChange={layerVisibleChanged} name={'SLLayer'} ></Checkbox>
                            </div>
                        <div className='mapToolLayerBoxTitle2'>重点对象</div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/homeMenu/weixianqu.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>危险区</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['WxqLayer']} onChange={layerVisibleChanged} name={'WxqLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/homeMenu/anzhidian.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>安置点</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['AZDLayer']} onChange={layerVisibleChanged} name={'AZDLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/homeMenu/qishiyedanwei.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>企事业单位</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['QSYDWLayer']} onChange={layerVisibleChanged} name={'QSYDWLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/homeMenu/yanhejuminhu.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>沿河居民户</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['YHJMHLayer']} onChange={layerVisibleChanged} name={'YHJMHLayer'} ></Checkbox>
                            </div>
                        <div className='mapToolLayerBoxTitle2'>水利工程</div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/sk.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>水库监测</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['ShuiKuLayer']} onChange={layerVisibleChanged} name={'ShuiKuLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/sdz.svg`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>水电站</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['ShuiDianZhanLayer']} onChange={layerVisibleChanged} name={'ShuiDianZhanLayer'} ></Checkbox>
                            </div>
                    </div>
                </div>
                
            </div>
            
        </div>
    );
}