tsg-web/src/views/Home/btn/index.js

import React, { useEffect, useReducer, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from "react-router";
import DiQiu from '../img/DiQiu.png'
import ZhongXin from '../img/ZhongXin.png'
import Shouqi2 from '../img/shouqi2.png'
import Zhankai2 from '../img/zhankai2.png'

export default function Btn({showPanels,setShowPanels, pathname}) {
    const [open, setOpen] = useState(false)
    const getLayerVisible = (s) => s.map.layerVisible;
    const mode = useSelector((s) => s.map.mode);
    const layerVisible = useSelector(getLayerVisible);
    let mapObj = useSelector((s) => s.map.map);
    const navigate = useNavigate();
    const dispatch = useDispatch()


    //收起\展开
    const collapseExpand = () => {
        setShowPanels(!showPanels)
    }
    //图层控制
    const showLayers = () => {
        setOpen(!open)
    }
    const onClose = () => {
        setOpen(false)
    }
    //还原地图位置
    const reduction = () => {
        dispatch.runtime.setHome()
    }
    //影像图btn
    const yxtBtn = () =>{
        if(mode==='3d'){
            return
        }
        dispatch.map.setMode('2d');
        dispatch.map.setLayerVisible({ ['OfflineMap']: false });
        dispatch.map.setLayerVisible({ ['SatelliteImage']: true });
        //卫星图打开河流面很丑，所以关掉
        mode==='2d' && mapObj && mapObj.getLayers().getArray().forEach((layer)=> {
            if(layer.values_.name === "HLLayer"||layer.values_.name === "HL2Layer"){
            layer.setVisible(false);
            }
            if(layer.values_.name === "HLLayer2"){
            layer.setVisible(true);
            }
        });
    }
    //矢量图btn
    const sltBtn = ()=>{
        dispatch.map.setMode('2d');
        dispatch.map.setLayerVisible({ ['SatelliteImage']: false });
        dispatch.map.setLayerVisible({ ['OfflineMap']: true });
        mode==='2d' && mapObj && mapObj.getLayers().getArray().forEach((layer)=> {
            if(layer.values_.name === "HLLayer"||layer.values_.name === "HL2Layer"){
            layer.setVisible(true);
            }
            if(layer.values_.name === "HLLayer2"){
            layer.setVisible(false);
            }
        }); 
    }
    //3Dbtn
    const btn3d = ()=>{
        if(pathname==='/mgr/sy/tqyb'){
            return 
        }
        // navigate('/mgr/sy/hsyy');
        setOpen(false)
        dispatch.map.setMode('3d');
        
    }

    return (
        <div
            className="toolBox"
            style={{
            position: 'absolute',
            zIndex: '110',
            right: '-1rem',
            top: '-7px',
            }}
        >
            <div className="layerPanelBtn clearFloat">
            <div className="lf" title="地图展示图层控制" onClick={showLayers}>
                <img
                src={DiQiu}
                alt=""
                style={{ width: '30px', marginTop: '5px' }}
                />
            </div>
            <div className="lf" title="还原地图展示位置" onClick={reduction}>
                <img
                src={ZhongXin}
                alt=""
                style={{ width: '30px', marginTop: ' 5px' }}
                />
            </div>
            <div
                className="lf"
                title="收起悬浮功能块"
                onClick={collapseExpand}
            >
                {showPanels ? (
                <img
                    src={Shouqi2}
                    alt=""
                    style={{ width: '30px', marginTop: '5px' }}
                />
                ) : (
                <img
                    src={Zhankai2}
                    alt=""
                    style={{ width: '30px', marginTop: '5px' }}
                />
                )}
            </div>
            {/* <div className="lf" title="地图放大" onClick={()=>{
                dispatch.runtime.setIn();
            }}>
                <img src={Fangda} alt="" style={{ width: "18px", marginTop: "-5px" }} />
            </div>
            <div className="lf" title="地图缩小" onClick={()=>{
                dispatch.runtime.setOut();
            }}>
                <img src={Suoxiao} alt="" style={{ width: "18px", marginTop: "-5px" }} />
            </div> */}
            {/* <div className="lf" title="地图展示图层控制" onClick={showLayers}>
                <DatabaseFilled style={{ fontSize: "17px", marginTop: "2px" }} />
            </div> */}
            <div className='mapToolBoxTuCeng' style={{left:open?'-225px':'5px'}}>
                <div className='mapToolBoxTuCengItem' style={{color:mode==='3d'?'#1677ff':'black',cursor:pathname==='/mgr/sy/tqyb'?'no-drop':'pointer'}}  onClick={btn3d}>
                    <img width={50} height={50} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/3dMap.jpg`} alt=""/>
                    3D图
                </div>
                <div className='mapToolBoxTuCengItem' style={{color:(!!layerVisible["SatelliteImage"]&&mode!=='3d')?'#1677ff':'black',cursor:mode==='3d'?'no-drop':'pointer'}} onClick={yxtBtn}>
                    <img width={50} height={50} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/yingxiangtu.png`} alt=""/>
                    影像图
                </div>
                <div className='mapToolBoxTuCengItem' style={{color:(!!layerVisible["OfflineMap"]&&mode!=='3d')?'#1677ff':'black'}}  onClick={sltBtn}>
                    <img width={50} height={50} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/shiliangtu.svg`} alt=""/>
                    矢量图
                </div>
            </div>
            </div>
        </div>
    );
}