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';
import LayerBox from './layer'
import GlobalSearch from './globalSearch'

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 [searchOpen, SearchOpen] = useState(false)//弹出全局搜索
    const [targetZoom, setTargetZoom] = useState(null)//点击缩放按钮后地图目标的zoom值
    const lastCameraTargetTimeRef = useRef(0);//节流

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

    //切换图层
    const layerVisibleChanged = (event)=>{
        const vo = { [event.target.name]: event.target.checked };
        const now = Date.now()
        if(
            event.target.checked && 
            (event.target.name==='SYLayer' || event.target.name==='SLLayer' || event.target.name==='WYLayer') &&
            (now-lastCameraTargetTimeRef.current >=1000)
        ){
            dispatch.runtime.setCameraTarget({
                center: [114.15437134051429, 29.744689445729758],
                zoom: 18,
                pitch: 60
            })
            lastCameraTargetTimeRef.current = now;
        }
        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?'23.5%':'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={()=>{
                    if(!searchOpen){setOpen(false)}
                    SearchOpen(!searchOpen)
                }}>
                    <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={()=>{
                    if(!open){SearchOpen(false)}
                    setOpen(!open)}
                }>
                    <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/tuceng.png`} />
                </div>
            </div>

            
            <LayerBox
                open={open}
                mode={mode}
                layerVisible={layerVisible}
                setOpen={setOpen}
                mapType={mapType}
                layerVisibleChanged={layerVisibleChanged}
            />

            <GlobalSearch
                open={searchOpen}
                mode={mode}
                layerVisible={layerVisible}
                setOpen={SearchOpen}
                mapType={mapType}
                layerVisibleChanged={layerVisibleChanged}
            />
        </div>
    );
}