地图图标更换

src/service/apiurl.js

@@ -27,6 +27,7 @@ const apiurl = {
     sdzlist: service + '/reservoir/water/listV2',//水电站-基础设施没有监测数据
   },
   monitor: {
+    globalSearch: service +"/globalSearch/findByName",//首页-全局搜索
     sk: {
       detail: service + '/reservoir/water/detail', //监测数据-下方表格
       picture: service + '/reservoir/water/monitor/data',

src/views/Home/MapCtrl/Markers/AZDMarker.js

@@ -13,7 +13,8 @@ function renderMarker({ rzWarning, rzState }, { width }) {
   <div style="position:relative">
     <svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
     </svg>
-    <img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/anzhidian.png" alt="" className="panel-icon" />
+    <img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/anzhidian2.png" alt="" className="panel-icon" />
+    <div style="width:1px;height:50px;background:red;margin-left:9px"></div>
   </div>
   `
 }
@@ -23,7 +24,7 @@ function AZDMarker({ data, dispatch, setting, zoom }) {
 
   
   useEffect(() => {
-    const width = 15;
+    const width = 18;
 
     const placeholder = document.getElementById(`marker_anzhidian_${data.id}`);
     if (!placeholder) {

src/views/Home/MapCtrl/Markers/QSYDWMarker.js

@@ -17,7 +17,7 @@ function renderMarker({ rzWarning, rzState }, { width, highlight }) {
   <div style="position:relative">
     <svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
     </svg>
-    <img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/qishiyedanwei.png" alt="" className="panel-icon" />
+    <img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/qishiyedanwei2.png" alt="" className="panel-icon" />
   </div>
   `
 }

src/views/Home/MapCtrl/Markers/YHJMHMarker.js

@@ -18,7 +18,7 @@ function renderMarker({ rzWarning, rzState }, { width }) {
   <div style="position:relative">
     <svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
     </svg>
-    <img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/yanhejuminhu.png"   alt="" className="panel-icon" />
+    <img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/yanhejuminhu2.png"   alt="" className="panel-icon" />
   </div>
   `
 }
@@ -27,7 +27,7 @@ function renderMarker({ rzWarning, rzState }, { width }) {
 function YHJMHMarker({ data, dispatch, setting, zoom }) {
 
   useEffect(() => {
-    const width = 15;
+    const width = 18;
 
     const placeholder = document.getElementById(`marker_yanhejuminhu_${data.id}`);
     if (!placeholder) {

src/views/Home/mapToolBox/globalSearch.js

@@ -0,0 +1,329 @@
+import React, { useEffect, useReducer, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Form, Button, Input, Table, Modal, message  } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
+import { geometryCenter } from '../../../utils/tools';
+import './index.less'
+import { config } from '@/config';
+import { httpget } from '@/utils/request';
+import apiurl from '@/service/apiurl';
+
+export default function Btn({open, mode, layerVisible, setOpen, mapType, layerVisibleChanged}) {
+    const [form] = Form.useForm();
+    const [ tableData, setTableData ] = useState([])
+    const dispatch = useDispatch()
+    const columns = [
+        { title: '名称', key: 'name', dataIndex: 'name',align: "center",width:150, ellipsis: true, },
+        { title: '类型', key: 'type', dataIndex: 'type',align: "center",width: 50, ellipsis: true },
+    ];
+    // const importMap = {
+    //     '业务规则库': () => import('../../../sz/ywgz/form'),
+    //     '调度方案库': () => import('../../../sz/ddfa/form'),
+    //     '工程安全知识库': () => import('../../../sz/khzbgl/form')
+    // };
+
+    const onFinish = ({name}) => {
+        if(name){
+            getData(name)
+        }else{
+            setTableData([])
+        }
+    }
+
+    const getData = async(e)=>{ 
+        const { code, data} = await httpget(apiurl.monitor.globalSearch, { name: e })
+        if(code!==200){
+            // return
+        }
+        setTableData(data||[])
+    }
+
+    const clickItem = (item)=>{
+        // 业务规则库
+        if (item.type == '业务规则库' || item.type == '调度方案库' || item.type == '工程安全知识库') {
+            // regularOpen(item)
+            return; // 添加return避免继续执行
+        }
+
+        // 工程安全监测点
+        if (item.type == '渗压站' || item.type == '渗流站' || item.type == '位移站') {
+            renderGCaqModal(item)
+            return; // 添加return避免继续执行
+        }
+
+        // 关闭所有已打开的弹窗
+        dispatch.runtime.closeFeaturePopAll();
+        // 先关闭所有图层
+        dispatch.map.setLayerVisible({
+            WxqLayer: false,
+            HdswLayer: false,
+            RealDrpLayer: false,
+            PicStLayer: false,
+            ShuiKuLayer: false,
+            TuRangLayer: false,
+            GongShuiLayer: false,
+            AZDLayer: false,
+            QSYDWLayer: false,
+            YHJMHLayer: false,
+            YjgbLayer: false,
+            SYLayer: false, //渗压站
+            SLLayer: false, //渗流站
+            WYLayer: false, //位移站
+            ShuiDianZhanLayer: false,
+        });
+        // 根据类型确定弹窗类型和图层
+        let popType = item.type;
+        let layerToShow = {};
+
+        // 对特定类型进行映射和图层设置
+        switch (item.type) {
+        // case '水文站':
+        //   popType = 'hdsw';
+        //   layerToShow = { HdswLayer: true };
+        //   break;
+        // case '雨量站':
+        //   popType = 'drp';
+        //   layerToShow = { RealDrpLayer: true };
+        //   break;
+        case '视频站':
+            popType = 'tuxiang';
+            layerToShow = { PicStLayer: true };
+            break;
+        case '水库水位站':
+            popType = 'shuiku';
+            layerToShow = { HdswLayer: true }; //水位站用HdswLayer, ShuikuLayer是水利工程的
+            break;
+        case '河道水位站':
+            popType = 'hedao';
+            layerToShow = { HdswLayer: true };
+            break;
+        case '土壤墒情站':
+            popType = 'turangshangqing';
+            layerToShow = { TuRangLayer: true };
+            break;
+        case '流量站':
+            popType = 'gongshui';
+            layerToShow = { GongShuiLayer: true };
+            break;
+
+        case '安置点':
+            popType = 'anzhidian';
+            layerToShow = { AZDLayer: true };
+            break;
+        case '企事业单位':
+            popType = 'qishiyedanwei';
+            layerToShow = { QSYDWLayer: true };
+            break;
+        case '沿河居民点':
+            popType = 'yanhejuminhu';
+            layerToShow = { YHJMHLayer: true };
+            break;
+        default:
+            // 默认不设置特定图层
+            break;
+        }
+
+        // 设置图层可见性
+        if (Object.keys(layerToShow).length > 0) {
+            dispatch.map.setLayerVisible(layerToShow);
+        }
+        const record = JSON.parse(item.jsonStr);
+    
+        if (item.type == '危险区') {
+            dispatch.map.setLayerVisible({ WxqLayer: true })
+            const wxq = JSON.parse(sessionStorage.getItem('wxq'))?.[record?.adcd] || ''
+            if (!wxq) {
+                message.error('暂无经纬度数据')
+                return
+            }
+            const data = wxq.properties
+            const center = item.type == '危险区' ? geometryCenter(wxq.geometry) :
+            [record?.lgtd, record?.lttd];
+    
+    
+            dispatch.runtime.setCameraTarget({
+                center: [center[0], center[1]],
+                zoom: 18,
+                pitch: 60
+            })
+            dispatch.runtime.setFeaturePop({
+                id: data.PID,
+                data: { ...data },
+                type: 'wxq',
+                lgtd: center[0],
+                lttd: center[1],
+            })
+            return;
+        }
+    
+        if (item.type == '安置点' || item.type == '企事业单位' || item.type == '沿河居民点') {
+            // 显示弹窗
+            dispatch.runtime.setFeaturePop({
+                type: popType,
+                data: record,
+                lgtd: item.lgtd,
+                lttd: item.lttd,
+                id: record.id
+            });
+        }
+    
+        // 雨量站
+        if (item.type == '雨量站') {
+            // // 创建近一小时的时间范围
+            // const tms = [
+            //     moment().add(-1, 'hours').format('YYYY-MM-DD HH:mm:ss'),
+            //     moment().format('YYYY-MM-DD HH:mm:ss')
+            // ];
+    
+            // // 直接调用httppost2获取数据并添加图层
+            // const fetchAndAddLayer = async () => {
+            //     try {
+            //         const { data, code, msg } = await httppost(apiurl.station.rainlist, {
+            //             "stm": tms[0],
+            //             "etm": tms[1]
+            //         });
+        
+            //         if (code !== 200) {
+            //             message.error(msg || '请求失败');
+            //             return;
+            //         }
+        
+            //         const list = data.map((i) => ({
+            //             id: i.stcd,
+            //             ...i,
+            //             drp: i.drp
+            //         }));
+        
+            //         dispatch.map.setLayerVisible({ RealDrpLayer: true })
+            //         dispatch.map.setLayerSetting({RealDrpLayer:list})
+            //     } catch (error) {
+            //         console.error('获取雨量站数据失败', error);
+            //     }
+            // };
+    
+            // fetchAndAddLayer();
+        }
+    
+    
+        // 设置地图视角
+        dispatch.runtime.setCameraTarget({
+            center: [item.lgtd, item.lttd],
+            zoom: 18,
+            pitch: 60
+        });
+
+    }
+
+    // 业务规则库弹框
+    // const regularOpen = async (record) => {
+    //     const id = record?.unionCode
+    //     const com = record.type == '业务规则库' ?
+    //     { url: apiurl.zsk.ywgz.getOne } :
+    //     record.type == '调度方案库' ?
+    //         { url: apiurl.zsk.ddfa.getOne } :
+    //         { url: apiurl.zsk.gcaq.getOne };
+    //     const res = await httpget(com.url + id)
+    //     // 导入业务规则库的Modal组件
+    //     // 使用映射函数进行导入
+    //     try {
+    //     const ModalForm = await importMap[record.type]();
+
+    //     Modal.destroyAll(); // 先销毁可能存在的其他Modal
+    //     const modal = Modal.confirm({
+    //         title:  <div style={{ width: '100%', padding: '16px 24px', color: '#3B4859', borderBottom: '1px solid #f0f0f0', position: "absolute", top: 0, left: 0 }}>
+    //                     <div style={{ fontSize: 16, fontWeight: 'bold' }}>{record.name}详情</div>
+    //                 </div>,
+    //         width: 1000,
+    //         content: (
+    //             <>
+    //                 <div style={{ marginTop: 45 }}></div>
+    //                 <ModalForm.default
+    //                     mode="view"
+    //                     record={res}
+    //                 />
+    //             </>
+    //         ),
+    //         icon: null,
+    //         okButtonProps: { style: { display: 'none' } },
+    //         cancelButtonProps: { style: { display: 'none' } },
+    //         closable: true
+    //     });
+    //     } catch (error) {
+    //         console.error('模块导入失败:', error);
+    //         message.error(`无法加载${record.type}详情，请稍后再试`);
+    //     }
+    //     return;
+    // }
+
+    // 工程安全监测点
+    const renderGCaqModal = (record) => {
+        const row = { ...record, stationCode: record.name }
+        let popType = '';
+
+        if (record.type == '渗压站') {
+        popType = 'shenya';
+        } else if (record.type == '渗流站') {
+        popType = 'shenliu';
+        } else if (record.type == '位移站') {
+        popType = 'weiyi';
+        }
+
+        dispatch.runtime.setFeaturePop({
+            type: popType,
+            data: row,
+            lgtd: record.lgtd,
+            lttd: record.lttd,
+            id: record.id
+        });
+        return;
+    }
+
+    useEffect(()=>{
+        return ()=>{
+            dispatch.runtime.closeFeaturePopAll()
+            dispatch.map.setLayerVisible({
+                WxqLayer: false,
+                HdswLayer: false,
+                RealDrpLayer: false,
+                PicStLayer: false,
+                ShuiKuLayer: false,
+                GongShuiLayer: false,
+                AZDLayer: false,
+                QSYDWLayer: false,
+                YHJMHLayer: false
+            });
+            dispatch.runtime.setHome()
+        }
+    },[])
+
+
+    return (
+        <div className={open?'mapToolSearch width260':'mapToolSearch width0'}>
+            <div className='mapToolSearchBox'> 
+                <div className='mapToolSearchBoxTitle'>
+                    搜索
+                    <CloseOutlined className='mapToolLayerBoxTitleIcon' onClick={()=>setOpen(false)}/>
+                </div>
+                <Form form={form} className="search-bar" onFinish={onFinish}>
+                    <Form.Item label="" name="name">
+                        <Input placeholder="请输入" allowClear/>
+                    </Form.Item>
+                    <Button type="primary" className="ant-btn-ghost-blue" htmlType="submit">查询</Button>
+                </Form>
+                <Table 
+                    rowKey="id"
+                    sticky
+                    columns={columns}
+                    pagination={false}
+                    dataSource={tableData}
+                    scroll={{ y: "400px"}}
+                    onRow={
+                        (row)=>({
+                            // onClick:()=>clickItem(row)
+                        })
+                    }
+                />
+            </div>
+        </div>
+    );
+}

src/views/Home/mapToolBox/index.js

@@ -5,6 +5,8 @@ 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()
@@ -16,24 +18,35 @@ export default function Btn() {
     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 };
-        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
-            // })
+        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');
@@ -87,7 +100,10 @@ export default function Btn() {
                 <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('功能开发中')}}>
+                <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()}>
@@ -118,188 +134,32 @@ export default function Btn() {
                 <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)}}>
+                <div title="地图展示图层控制" onClick={()=>{
+                    if(!open){SearchOpen(false)}
+                    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>
             
+            <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>
     );
 }

src/views/Home/mapToolBox/index.less

@@ -115,4 +115,77 @@
             }
         }
     }
+
+
+    .mapToolSearch{
+        position: absolute;
+        top: 5px;
+        right: 45px;
+        width: 0;
+        height: 580px;
+        transition: width 0.3s ease-in-out;
+        box-shadow: 0px 0px 5px  rgba(0, 0, 0, 0.2);
+        overflow: hidden;
+
+        .mapToolSearchBox{
+            position: absolute;
+            background: #1c3965f0;
+            border: 1px solid #2755a1;
+            width: 260px;
+            height: 100%;
+            border-radius: 4px;
+            top: 0;
+            left: 0;
+            overflow: hidden;
+            .mapToolSearchBoxTitle{
+                height: 40px;
+                border-bottom: 1px solid #2755a1;
+                display: flex;
+                font-size: 14px;
+                font-weight: bold;
+                align-items: center;
+                justify-content: space-between;
+                padding: 0 10px;
+    
+                .mapToolLayerBoxTitleIcon{
+                    font-size: 13px;
+                    cursor: pointer;
+                }
+            }
+            .search-bar {
+                margin-bottom: 0px;
+                padding: 10px;
+                // background: rgba(0, 0, 0, 0.2);
+                border-radius: 4px;
+                display: flex;
+                align-items: center;
+        
+                .ant-form-item {
+                  margin-bottom: 0;
+                  margin-right: 10px;
+                  
+                  label {
+                    color: #fff;
+                  }
+                }
+                
+                .ant-input {
+                  width: 125px;
+                  height: 24px;
+                }
+            }
+        }
+    }
+
+    .width260{
+        width: 260px;
+    }
+    .width160{
+        width: 160px;
+    }
+    .width0{
+        width: 0;
+    }
+
+    
 }

src/views/Home/mapToolBox/layer.js

@@ -0,0 +1,189 @@
+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({open, mode, layerVisible, setOpen, mapType, layerVisibleChanged}) {
+    const dispatch = useDispatch()
+
+    return (
+        <div className={open?'mapToolLayer width160':'mapToolLayer width0'}>
+            <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' onClick={()=>layerVisibleChanged({target:{name:'HdswLayer',checked:!layerVisible['HdswLayer']}})}>
+                        <Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['HdswLayer']}  name={'HdswLayer'} ></Checkbox>
+                        <div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/hdsw.png`} alt=""/></div>
+                        <div className='mapToolLayerBoxItemIconDiv'>水库水文站</div>
+                    </div>
+                    <div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'GongShuiLayer',checked:!layerVisible['GongShuiLayer']}})}>
+                        <Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['GongShuiLayer']}  name={'GongShuiLayer'} ></Checkbox>
+                        <div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/flow.png`} alt=""/></div>
+                        <div className='mapToolLayerBoxItemIconDiv'>流量站</div>
+                    </div>
+                    <div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'PicStLayer',checked:!layerVisible['PicStLayer']}})}>
+                        <Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['PicStLayer']}  name={'PicStLayer'} ></Checkbox>
+                        <div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/video.png`} alt=""/></div>
+                        <div className='mapToolLayerBoxItemIconDiv'>视频站</div>
+                    </div>
+
+                    <div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'SYLayer',checked:!layerVisible['SYLayer']}})}>
+                        <Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['SYLayer']}  name={'SYLayer'} ></Checkbox>
+                        <div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/sy.png`} alt=""/></div>
+                        <div className='mapToolLayerBoxItemIconDiv'>渗压站</div>
+                    </div>
+
+                    <div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'SLLayer',checked:!layerVisible['SLLayer']}})}>
+                        <Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['SLLayer']}  name={'SLLayer'} ></Checkbox>
+                        <div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/sl.png`} alt=""/></div>
+                        <div className='mapToolLayerBoxItemIconDiv'>渗流站</div>
+                    </div>
+
+                    <div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'WYLayer',checked:!layerVisible['WYLayer']}})}>
+                        <Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['WYLayer']}  name={'WYLayer'} ></Checkbox>
+                        <div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} 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' onClick={()=>layerVisibleChanged({target:{name:'WxqLayer',checked:!layerVisible['WxqLayer']}})}>
+                        <Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['WxqLayer']}  name={'WxqLayer'} ></Checkbox>
+                        <div className='mapToolLayerBoxItemIcon2'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/weixianqu2.png`} alt=""/></div>
+                        <div className='mapToolLayerBoxItemIconDiv'>危险区</div>
+                    </div>
+                    <div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'AZDLayer',checked:!layerVisible['AZDLayer']}})}>
+                        <Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['AZDLayer']}  name={'AZDLayer'} ></Checkbox>
+                        <div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/anzhidian2.png`} alt=""/></div>
+                        <div className='mapToolLayerBoxItemIconDiv'>安置点</div>
+                    </div>
+                    <div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'QSYDWLayer',checked:!layerVisible['QSYDWLayer']}})}>
+                        <Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['QSYDWLayer']}  name={'QSYDWLayer'} ></Checkbox>
+                        <div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/qishiyedanwei2.png`} alt=""/></div>
+                        <div className='mapToolLayerBoxItemIconDiv'>企事业单位</div>
+                    </div>
+                    <div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'YHJMHLayer',checked:!layerVisible['YHJMHLayer']}})}>
+                        <Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['YHJMHLayer']}  name={'YHJMHLayer'} ></Checkbox>
+                        <div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/yanhejuminhu2.png`} alt=""/></div>
+                        <div className='mapToolLayerBoxItemIconDiv'>沿河居民户</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}