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'
import { config } from '@/config';

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 map = useSelector(s => s.map.map);
    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 };
        if(event.target.checked && (event.target.name==='SYLayer' || event.target.name==='SLLayer' || event.target.name==='WYLayer')){
            dispatch.runtime.setCameraTarget({
                center: [114.15437134051429, 29.744689445729758],
                zoom: 18,
                pitch: 60
            })
        }
        dispatch.map.setLayerVisible(vo);
    }
    const mapType = (name)=>{
        if(name==='2d'){
            dispatch.map.setMode('2d');
            dispatch.map.setLayerVisible({ ['SatelliteImage']: true });
        }
        if(name === '3d'){
            if(location.pathname==='/mgr/sy/tqyb'){
                message.error('天气预报无法切换3d视图')
                return 
            }
            dispatch.map.setLayerVisible({ ['SatelliteImage']: false });
            dispatch.map.setMode('3d');
        }
    }

    const ExportImage = async () => {
        message.warn('功能开发中')
        return
        if(map._cesiumWidget){
            map.render();

            // 获取Canvas
            const canvas = map.scene.canvas;
            
            // 创建下载链接
            const downloadLink = document.createElement('a');
            downloadLink.href = canvas.toDataURL('image/png');
            downloadLink.download = 'cesium-screenshot.png';
            downloadLink.style.display = 'none';
            
            // 触发下载
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
        }else{
            map.once('rendercomplete', function() {
                const canvas = map.getViewport().querySelector('.ol-layer canvas');
                const link = document.createElement('a');
                link.download = 'map.png';
                link.href = canvas.toDataURL('image/png');
                link.click();
            });
            map.renderSync(); // 触发重新渲染以确保画面完整
        }
        
    }

    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={()=>{message.warn('功能开发中')}}>
                    <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={()=>{message.warn('功能开发中')}}>
                    <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={()=>ExportImage()}>
                    <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 ? '160px' : '0',}}>
                <div className='mapToolLayerBox'> 
                    <div className='mapToolLayerBoxTitle'>
                        资源目录
                        <CloseOutlined className='mapToolLayerBoxTitleIcon' onClick={()=>setOpen(false)}/>
                    </div>
                    <div className='mapToolLayerBoxContent'>
                        <div className='mapToolLayerBoxItem'>
                            <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['SatelliteImage']} onChange={()=>mapType('2d')} name={'SatelliteImage'} > 影像图 </Checkbox>
                        </div>

                        <div 
                            className='mapToolLayerBoxItem hoverBg' 
                            onClick={()=>{
                                const cameraTargeta = {
                                    center:config.mapCenter,
                                    zoom: 15,
                                    pitch: config.pitch3d,
                                }
                                if(mode==='2d'){
                                    dispatch.runtime.setCameraTarget(cameraTargeta)
                                }else{
                                    dispatch.runtime.setMapCenter(cameraTargeta)
                                }
                                mapType('2d')
                            }}
                        >
                            {/* <div className='mapToolLayerBoxItemIcon'><img width={16} height={16} src={`${process.env.PUBLIC_URL}/assets/maptool/ba.png`} alt=""/></div> */}
                            <div className='mapToolLayerBoxItemIconDiv' style={{marginLeft:'12px'}}>水库全景</div>
                        </div>
                        <div 
                            className='mapToolLayerBoxItem hoverBg' 
                            onClick={()=>{
                                const cameraTargeta = {
                                    center: [114.15437134051429, 29.744689445729758],
                                    zoom: 14,
                                    pitch: 60
                                }
                                if(mode==='2d'){
                                    dispatch.runtime.setCameraTarget(cameraTargeta)
                                }else{
                                    dispatch.runtime.setMapCenter(cameraTargeta)
                                }
                                mapType('2d')
                            }}
                        >
                            {/* <div className='mapToolLayerBoxItemIcon'><img width={16} height={16} src={`${process.env.PUBLIC_URL}/assets/maptool/ba.png`} alt=""/></div> */}
                            <div className='mapToolLayerBoxItemIconDiv' style={{marginLeft:'12px'}}>流域全景</div>
                        </div>
                        <div className='mapToolLayerBoxItem'>
                            <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={mode==='3d'} onChange={()=>mapType('3d')} name={'3d'} > 3D图 </Checkbox>
                        </div>
                        <div 
                            className='mapToolLayerBoxItem hoverBg' 
                            style={{}}
                            onClick={()=>{
                                const cameraTargeta = {
                                    center: [114.15437134051429, 29.744689445729758],
                                    zoom: 18,
                                    pitch: 60
                                }
                                if(mode==='3d'){
                                    dispatch.runtime.setCameraTarget(cameraTargeta)
                                }else{
                                    dispatch.runtime.setMapCenter(cameraTargeta)
                                }
                                mapType('3d')
                            }}
                        >
                            <div className='mapToolLayerBoxItemIcon'><img width={16} height={16} src={`${process.env.PUBLIC_URL}/assets/maptool/ba.png`} alt=""/></div>
                            <div className='mapToolLayerBoxItemIconDiv'>主坝</div>
                        </div>
                        <div 
                            className='mapToolLayerBoxItem hoverBg' 
                            onClick={()=>{
                                const cameraTargeta = {
                                    center: [114.18263599215172, 29.747020722346193],
                                    zoom: 18,
                                    pitch: 60
                                }
                                if(mode==='3d'){
                                    dispatch.runtime.setCameraTarget(cameraTargeta)
                                }else{
                                    dispatch.runtime.setMapCenter(cameraTargeta)
                                }
                                mapType('3d')
                            }}
                        >
                            <div className='mapToolLayerBoxItemIcon'><img width={16} height={16} src={`${process.env.PUBLIC_URL}/assets/maptool/ba.png`} alt=""/></div>
                            <div className='mapToolLayerBoxItemIconDiv'>副坝</div>
                        </div>
                        <div 
                            className='mapToolLayerBoxItem hoverBg' 
                            onClick={()=>{
                                const cameraTargeta = {
                                    center: [114.15437134051429, 29.743689445729758],
                                    zoom: 18,
                                    pitch: 60
                                }
                                if(mode==='3d'){
                                    dispatch.runtime.setCameraTarget(cameraTargeta)
                                }else{
                                    dispatch.runtime.setMapCenter(cameraTargeta)
                                }
                                mapType('3d')
                            }}
                        >
                            <div className='mapToolLayerBoxItemIcon'><img width={16} height={16} src={`${process.env.PUBLIC_URL}/assets/maptool/yihongdao.png`} alt=""/></div>
                            <div className='mapToolLayerBoxItemIconDiv'>溢洪道</div>
                        </div>

                        <div className='mapToolLayerBoxItem' style={{marginBottom:'3px'}}>
                            监测体系
                        </div>
                        <div className='mapToolLayerBoxItem'>
                            <Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['HdswLayer']} onChange={layerVisibleChanged} name={'HdswLayer'} ></Checkbox>
                            <div className='mapToolLayerBoxItemIcon2'><img width={10} height={18} src={`${process.env.PUBLIC_URL}/assets/mapicon/hdsw.png`} alt=""/></div>
                            <div className='mapToolLayerBoxItemIconDiv'>水库水文站</div>
                        </div>
                        <div className='mapToolLayerBoxItem'>
                            <Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['GongShuiLayer']} onChange={layerVisibleChanged} name={'GongShuiLayer'} ></Checkbox>
                            <div className='mapToolLayerBoxItemIcon2'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/flow.png`} alt=""/></div>
                            <div className='mapToolLayerBoxItemIconDiv'>流量站</div>
                        </div>
                        <div className='mapToolLayerBoxItem'>
                            <Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['PicStLayer']} onChange={layerVisibleChanged} name={'PicStLayer'} ></Checkbox>
                            <div className='mapToolLayerBoxItemIcon2'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/video.png`} alt=""/></div>
                            <div className='mapToolLayerBoxItemIconDiv'>视频站</div>
                        </div>

                        <div className='mapToolLayerBoxItem'>
                            <Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['SYLayer']} onChange={layerVisibleChanged} name={'SYLayer'} ></Checkbox>
                            <div className='mapToolLayerBoxItemIcon2'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/sy.png`} alt=""/></div>
                            <div className='mapToolLayerBoxItemIconDiv'>渗压站</div>
                        </div>

                        <div className='mapToolLayerBoxItem'>
                            <Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['SLLayer']} onChange={layerVisibleChanged} name={'SLLayer'} ></Checkbox>
                            <div className='mapToolLayerBoxItemIcon2'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/sl.png`} alt=""/></div>
                            <div className='mapToolLayerBoxItemIconDiv'>渗流站</div>
                        </div>

                        <div className='mapToolLayerBoxItem'>
                            <Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['WYLayer']} onChange={layerVisibleChanged} name={'WYLayer'} ></Checkbox>
                            <div className='mapToolLayerBoxItemIcon2'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/wy.png`} alt=""/></div>
                            <div className='mapToolLayerBoxItemIconDiv'>位移站</div>
                        </div>


                        <div className='mapToolLayerBoxItem' style={{marginBottom:'3px'}}>
                            洪水防御
                        </div>
                        <div className='mapToolLayerBoxItem'>
                            <Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['WxqLayer']} onChange={layerVisibleChanged} name={'WxqLayer'} ></Checkbox>
                            <div className='mapToolLayerBoxItemIcon2'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/weixianqu.png`} alt=""/></div>
                            <div className='mapToolLayerBoxItemIconDiv'>危险区</div>
                        </div>
                        <div className='mapToolLayerBoxItem'>
                            <Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['AZDLayer']} onChange={layerVisibleChanged} name={'AZDLayer'} ></Checkbox>
                            <div className='mapToolLayerBoxItemIcon2'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/anzhidian.png`} alt=""/></div>
                            <div className='mapToolLayerBoxItemIconDiv'>安置点</div>
                        </div>
                        <div className='mapToolLayerBoxItem'>
                            <Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['QSYDWLayer']} onChange={layerVisibleChanged} name={'QSYDWLayer'} ></Checkbox>
                            <div className='mapToolLayerBoxItemIcon2'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/qishiyedanwei.png`} alt=""/></div>
                            <div className='mapToolLayerBoxItemIconDiv'>企事业单位</div>
                        </div>
                        <div className='mapToolLayerBoxItem'>
                            <Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['YHJMHLayer']} onChange={layerVisibleChanged} name={'YHJMHLayer'} ></Checkbox>
                            <div className='mapToolLayerBoxItemIcon2'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/yanhejuminhu.png`} alt=""/></div>
                            <div className='mapToolLayerBoxItemIconDiv'>沿河居民户</div>
                        </div>
                    </div>
                </div>
                
            </div>
            
        </div>
    );
}