修改地图图层控制窗口

src/config.ts

@@ -1,11 +0,0 @@
-// @ts-ignore
-const extent: [number, number, number, number] = [113.49, 29.6 , 114.84, 30.00];//地图中心矩形
-const mapCenter: [number, number] = [114.17008753, 29.74239960];//地图中心点
-const pitch3d = -40 ;//3d图默认俯仰角
-const poiPitch = -40 ;//2d图默认俯仰角
-export const config = {
-  pitch3d,
-  mapCenter,
-  extent,
-  poiPitch
-};

src/config/index.js

@@ -1,4 +1,14 @@
+// @ts-ignore
+const extent = [113.49, 29.6 , 114.84, 30.00];//地图中心矩形
+const mapCenter = [114.17008753, 29.74239960];//地图中心点
+const pitch3d = -40 ;//3d图默认俯仰角
+const poiPitch = -40 ;//2d图默认俯仰角
+
 export const config = {
   ip: 'http://223.75.53.141:83',
-  minioIp:"http://223.75.53.141:9100/gs-ss"
+  minioIp:"http://223.75.53.141:9100/gs-ss",
+  pitch3d,
+  mapCenter,
+  extent,
+  poiPitch
 }

src/models/map/index.ts

@@ -14,10 +14,10 @@ function initState() {
       AdcdLayer:true,//行政区划
       // highroadLayer:false,//公路
 
-      RealDrpLayer: true,//雨量站
+      RealDrpLayer: false,//雨量站
       HdswLayer:true,//水位站
       GongShuiLayer:false,//流量站
-      PicStLayer: false,//视频点
+      PicStLayer: true,//视频点
       YjgbLayer: false,//预警广播
       SYLayer: false, //渗压站
       SLLayer: false, //渗流站

src/views/Home/MapCtrl/M2D/layers/POILayer2D.js

@@ -152,6 +152,7 @@ export default class POILayer2D extends BaseLayer2D {
     if (this.getLayerName() === "OfflineMap") {
       const offlineMapLayer = new Tile({
         source: new XYZSource({
+          crossOrigin:'anonymous',
           // url: mapUrl + "/iserver/services/map-ugcv5-YXDOM3857/rest/maps/YXDOM_20230704/zxyTileImage.png?z={z}&x={x}&y={y}&width=256&height=256"
           // url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=efc861f25f96dc6e5f884f0403ebfefd"
         }),
@@ -189,6 +190,7 @@ export default class POILayer2D extends BaseLayer2D {
       const tile = new TileLayer({
         source: new XYZSource({
           tilePixelRatio: 1,
+          crossOrigin:'anonymous',
           //url: 'http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali',
           // url: 'http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=efc861f25f96dc6e5f884f0403ebfefd',
           //url: `http://res3dstatic{0-7}.cloudowr.cn/${localStorage.getItem('address')}/dom2/{z}/{x}/{y}.png`,

src/views/Home/MapCtrl/M3D/Map3D.js

@@ -120,7 +120,7 @@ export default class Map3D extends BaseMap {
       if(currentPos.x===x && currentPos.y===y && currentPos.z===z){
         if(flag && (Date.now() - moveStartTime >= timeInterval)){
           const { lon, lat, height:olZoom } = getCameraViewCenter(viewer)||{};
-          console.log(lon, lat, olZoom);
+          console.log('3D',lon, lat, olZoom);
           if(lon && lat && olZoom){
             this.dispatch.runtime.setMapCenter({
               center: [lon, lat],
@@ -158,6 +158,10 @@ export default class Map3D extends BaseMap {
     if (toremove && toremove[0]) {
       toremove[0].style.display = 'none';
     }
+
+    //地图移动完毕后设置位置
+    const {x, y, z} = viewer.camera.position
+    lastPosition = { x: x, y: y, z: z };
   }
 
   coordinateToPixel(lgtd, lttd, elev) {

src/views/Home/mapToolBox/index.js

@@ -4,12 +4,14 @@ 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)
@@ -23,52 +25,75 @@ export default function Btn() {
 
     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 = (event)=>{
+    const mapType = (name)=>{
-        const name = event.target.name
+        if(name==='2d'){
-        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){
+        if(name === '3d'){
-            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.setMode('3d');
-            dispatch.map.setLayerSetting({HLLayer: 'B'})
-            dispatch.map.setLayerSetting({LakeLayer: 'B'})
         }
     }
 
+    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={()=>{}}>
+                <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={()=>{}}>
+                <div title="天气" onClick={()=>{message.warn('功能开发中')}}>
                     <img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/tianqi.png`} />
                 </div>
                 <div title="放大" onClick={()=>{
@@ -87,7 +112,7 @@ export default function Btn() {
                 }}>
                     <img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/suoxiao.png`} />
                 </div>
-                <div title="截图" onClick={()=>{}}>
+                <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)}>
@@ -98,117 +123,178 @@ export default function Btn() {
                 </div>
             </div>
 
-            <div className='mapToolLayer' style={{width: open ? '300px' : '0',}}>
+            <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='mapToolLayerBoxTitle2'>基础图层</div>
+                        <div className='mapToolLayerBoxItem'>
-                            <div className='mapToolLayerBoxItem'>
+                            <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['SatelliteImage']} onChange={()=>mapType('2d')} name={'SatelliteImage'} > 影像图 </Checkbox>
-                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/xian.png`} alt=""/></div>
+                        </div>
-                                <div className='mapToolLayerBoxItemIconDiv'>行政区划</div>
+
-                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['AdcdLayer']} onChange={layerVisibleChanged} name={'AdcdLayer'} ></Checkbox>
+                        <div 
-                            </div>
+                            className='mapToolLayerBoxItem hoverBg' 
-                            <div className='mapToolLayerBoxItem'>
+                            onClick={()=>{
-                                <div className='mapToolLayerBoxItemIcon'><img width={20} height={5} src={`${process.env.PUBLIC_URL}/assets/mapicon/heliu.svg`} alt=""/></div>
+                                const cameraTargeta = {
-                                <div className='mapToolLayerBoxItemIconDiv'>河流</div>
+                                    center:config.mapCenter,
-                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['HLLayer']} onChange={layerVisibleChanged} name={'HLLayer'} ></Checkbox>
+                                    zoom: 15,
-                            </div>
+                                    pitch: config.pitch3d,
-                            <div className='mapToolLayerBoxItem'>
+                                }
-                                <div className='mapToolLayerBoxItemIcon'><img width={18} height={18} src={`${process.env.PUBLIC_URL}/assets/mapicon/hupo.svg`} alt=""/></div>
+                                if(mode==='2d'){
-                                <div className='mapToolLayerBoxItemIconDiv'>湖泊</div>
+                                    dispatch.runtime.setCameraTarget(cameraTargeta)
-                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['LakeLayer']} onChange={layerVisibleChanged} name={'LakeLayer'} ></Checkbox>
+                                }else{
-                            </div>
+                                    dispatch.runtime.setMapCenter(cameraTargeta)
-                            <div className='mapToolLayerBoxItem'>
+                                }
-                                <div className='mapToolLayerBoxItemIcon'><img width={20} height={20} src={`${process.env.PUBLIC_URL}/assets/mapicon/3dMap.jpg`} alt=""/></div>
+                                mapType('2d')
-                                <div className='mapToolLayerBoxItemIconDiv'>3D图</div>
+                            }}
-                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={mode==='3d'} onChange={mapType} name={'3d'} ></Checkbox>
+                        >
-                            </div>
+                            {/* <div className='mapToolLayerBoxItemIcon'><img width={16} height={16} src={`${process.env.PUBLIC_URL}/assets/maptool/ba.png`} alt=""/></div> */}
-                            <div className='mapToolLayerBoxItem'>
+                            <div className='mapToolLayerBoxItemIconDiv' style={{marginLeft:'12px'}}>水库全景</div>
-                                <div className='mapToolLayerBoxItemIcon'><img width={20} height={20} src={`${process.env.PUBLIC_URL}/assets/icons/yingxiangtu.png`} alt=""/></div>
+                        </div>
-                                <div className='mapToolLayerBoxItemIconDiv'>影像图</div>
+                        <div 
-                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['SatelliteImage']} onChange={mapType} name={'SatelliteImage'} ></Checkbox>
+                            className='mapToolLayerBoxItem hoverBg' 
-                            </div>
+                            onClick={()=>{
-                            <div className='mapToolLayerBoxItem'>
+                                const cameraTargeta = {
-                                <div className='mapToolLayerBoxItemIcon'><img width={20} height={20} src={`${process.env.PUBLIC_URL}/assets/icons/shiliangtu.svg`} alt=""/></div>
+                                    center: [114.15437134051429, 29.744689445729758],
-                                <div className='mapToolLayerBoxItemIconDiv'>矢量图</div>
+                                    zoom: 14,
-                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['OfflineMap']} onChange={mapType} name={'OfflineMap'} ></Checkbox>
+                                    pitch: 60
-                            </div>
+                                }
-                        <div className='mapToolLayerBoxTitle2'>监测体系</div>
+                                if(mode==='2d'){
-                            <div className='mapToolLayerBoxItem'>
+                                    dispatch.runtime.setCameraTarget(cameraTargeta)
-                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/drp.svg`} alt=""/></div>
+                                }else{
-                                <div className='mapToolLayerBoxItemIconDiv'>雨量站</div>
+                                    dispatch.runtime.setMapCenter(cameraTargeta)
-                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['RealDrpLayer']} onChange={layerVisibleChanged} name={'RealDrpLayer'} ></Checkbox>
+                                }
-                            </div>
+                                mapType('2d')
-                            <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>
+                            {/* <div className='mapToolLayerBoxItemIcon'><img width={16} height={16} src={`${process.env.PUBLIC_URL}/assets/maptool/ba.png`} alt=""/></div> */}
-                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['HdswLayer']} onChange={layerVisibleChanged} name={'HdswLayer'} ></Checkbox>
+                            <div className='mapToolLayerBoxItemIconDiv' style={{marginLeft:'12px'}}>流域全景</div>
-                            </div>
+                        </div>
-                            <div className='mapToolLayerBoxItem'>
+                        <div className='mapToolLayerBoxItem'>
-                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/flow.png`} alt=""/></div>
+                            <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={mode==='3d'} onChange={()=>mapType('3d')} name={'3d'} > 3D图 </Checkbox>
-                                <div className='mapToolLayerBoxItemIconDiv'>流量站</div>
+                        </div>
-                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['GongShuiLayer']} onChange={layerVisibleChanged} name={'GongShuiLayer'} ></Checkbox>
+                        <div 
-                            </div>
+                            className='mapToolLayerBoxItem hoverBg' 
-                            <div className='mapToolLayerBoxItem'>
+                            style={{}}
-                                <div className='mapToolLayerBoxItemIcon'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/video.png`} alt=""/></div>
+                            onClick={()=>{
-                                <div className='mapToolLayerBoxItemIconDiv'>视频点</div>
+                                const cameraTargeta = {
-                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['PicStLayer']} onChange={layerVisibleChanged} name={'PicStLayer'} ></Checkbox>
+                                    center: [114.15437134051429, 29.744689445729758],
-                            </div>
+                                    zoom: 18,
-                            <div className='mapToolLayerBoxItem'>
+                                    pitch: 60
-                                <div className='mapToolLayerBoxItemIcon'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/yjgb.png`} alt=""/></div>
+                                }
-                                <div className='mapToolLayerBoxItemIconDiv'>预警广播</div>
+                                if(mode==='3d'){
-                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['YjgbLayer']} onChange={layerVisibleChanged} name={'YjgbLayer'} ></Checkbox>
+                                    dispatch.runtime.setCameraTarget(cameraTargeta)
-                            </div>
+                                }else{
-                            <div className='mapToolLayerBoxItem'>
+                                    dispatch.runtime.setMapCenter(cameraTargeta)
-                                <div className='mapToolLayerBoxItemIcon'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/wy.png`} alt=""/></div>
+                                }
-                                <div className='mapToolLayerBoxItemIconDiv'>位移站</div>
+                                mapType('3d')
-                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['WYLayer']} onChange={layerVisibleChanged} name={'WYLayer'} ></Checkbox>
+                            }}
-                            </div>
+                        >
-                            <div className='mapToolLayerBoxItem'>
+                            <div className='mapToolLayerBoxItemIcon'><img width={16} height={16} src={`${process.env.PUBLIC_URL}/assets/maptool/ba.png`} alt=""/></div>
-                                <div className='mapToolLayerBoxItemIcon'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/sy.png`} alt=""/></div>
+                            <div className='mapToolLayerBoxItemIconDiv'>主坝</div>
-                                <div className='mapToolLayerBoxItemIconDiv'>渗压站</div>
+                        </div>
-                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['SYLayer']} onChange={layerVisibleChanged} name={'SYLayer'} ></Checkbox>
+                        <div 
-                            </div>
+                            className='mapToolLayerBoxItem hoverBg' 
-                            <div className='mapToolLayerBoxItem'>
+                            onClick={()=>{
-                                <div className='mapToolLayerBoxItemIcon'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/sl.png`} alt=""/></div>
+                                const cameraTargeta = {
-                                <div className='mapToolLayerBoxItemIconDiv'>渗流站</div>
+                                    center: [114.18263599215172, 29.747020722346193],
-                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['SLLayer']} onChange={layerVisibleChanged} name={'SLLayer'} ></Checkbox>
+                                    zoom: 18,
-                            </div>
+                                    pitch: 60
-                        <div className='mapToolLayerBoxTitle2'>重点对象</div>
+                                }
-                            <div className='mapToolLayerBoxItem'>
+                                if(mode==='3d'){
-                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/homeMenu/weixianqu.png`} alt=""/></div>
+                                    dispatch.runtime.setCameraTarget(cameraTargeta)
-                                <div className='mapToolLayerBoxItemIconDiv'>危险区</div>
+                                }else{
-                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['WxqLayer']} onChange={layerVisibleChanged} name={'WxqLayer'} ></Checkbox>
+                                    dispatch.runtime.setMapCenter(cameraTargeta)
-                            </div>
+                                }
-                            <div className='mapToolLayerBoxItem'>
+                                mapType('3d')
-                                <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 className='mapToolLayerBoxItemIcon'><img width={16} height={16} src={`${process.env.PUBLIC_URL}/assets/maptool/ba.png`} alt=""/></div>
-                            </div>
+                            <div className='mapToolLayerBoxItemIconDiv'>副坝</div>
-                            <div className='mapToolLayerBoxItem'>
+                        </div>
-                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/homeMenu/qishiyedanwei.png`} alt=""/></div>
+                        <div 
-                                <div className='mapToolLayerBoxItemIconDiv'>企事业单位</div>
+                            className='mapToolLayerBoxItem hoverBg' 
-                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['QSYDWLayer']} onChange={layerVisibleChanged} name={'QSYDWLayer'} ></Checkbox>
+                            onClick={()=>{
-                            </div>
+                                const cameraTargeta = {
-                            <div className='mapToolLayerBoxItem'>
+                                    center: [114.15437134051429, 29.743689445729758],
-                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/homeMenu/yanhejuminhu.png`} alt=""/></div>
+                                    zoom: 18,
-                                <div className='mapToolLayerBoxItemIconDiv'>沿河居民户</div>
+                                    pitch: 60
-                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['YHJMHLayer']} onChange={layerVisibleChanged} name={'YHJMHLayer'} ></Checkbox>
+                                }
-                            </div>
+                                if(mode==='3d'){
-                        <div className='mapToolLayerBoxTitle2'>水利工程</div>
+                                    dispatch.runtime.setCameraTarget(cameraTargeta)
-                            <div className='mapToolLayerBoxItem'>
+                                }else{
-                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/sk.png`} alt=""/></div>
+                                    dispatch.runtime.setMapCenter(cameraTargeta)
-                                <div className='mapToolLayerBoxItemIconDiv'>水库监测</div>
+                                }
-                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['ShuiKuLayer']} onChange={layerVisibleChanged} name={'ShuiKuLayer'} ></Checkbox>
+                                mapType('3d')
-                            </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='mapToolLayerBoxItemIcon'><img width={16} height={16} src={`${process.env.PUBLIC_URL}/assets/maptool/yihongdao.png`} alt=""/></div>
-                                <div className='mapToolLayerBoxItemIconDiv'>水电站</div>
+                            <div className='mapToolLayerBoxItemIconDiv'>溢洪道</div>
-                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['ShuiDianZhanLayer']} onChange={layerVisibleChanged} name={'ShuiDianZhanLayer'} ></Checkbox>
+                        </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>
                 

src/views/Home/mapToolBox/index.less

@@ -27,15 +27,16 @@
         top: 5px;
         right: 45px;
         width: 0;
-        height: 550px;
+        height: 580px;
         transition: width 0.3s ease-in-out;
         box-shadow: 0px 0px 5px  rgba(0, 0, 0, 0.2);
         overflow: hidden;
 
         .mapToolLayerBox{
             position: absolute;
-            background: #fff;
+            background: #1c3965f0;
-            width: 300px;
+            border: 1px solid #2755a1;
+            width: 160px;
             height: 100%;
             border-radius: 4px;
             top: 0;
@@ -44,15 +45,16 @@
 
             .mapToolLayerBoxTitle{
                 height: 40px;
-                background-color: #eee;
+                border-bottom: 1px solid #2755a1;
                 display: flex;
-                font-size: 15px;
+                font-size: 14px;
                 font-weight: bold;
                 align-items: center;
                 justify-content: space-between;
                 padding: 0 10px;
 
                 .mapToolLayerBoxTitleIcon{
+                    font-size: 13px;
                     cursor: pointer;
                 }
             }
@@ -60,20 +62,17 @@
                 padding: 10px;
                 display: flex;
                 flex-flow: wrap;
-                .mapToolLayerBoxTitle2{
+
-                    font-size: 14px;
+                .hoverBg:hover{
-                    height: 25px;
+                    background: #23477cf0;
-                    width: 100%;
-                    display: flex;
-                    align-items: center;
-                    justify-content: left;
-                    border-bottom: 1px solid #bfbfbf;
                 }
                 .mapToolLayerBoxItem{
-                    width: 50%;
+                    color: #ffffff;
-                    height: 40px;
+                    width: 100%;
+                    height: 27px;
                     display: flex;
                     align-items: center;
+                    cursor: pointer;
 
                     .mapToolLayerBoxItemIcon{
                         width: 20px;
@@ -81,18 +80,36 @@
                         display: flex;
                         align-items: center;
                         justify-content: center;
-                        margin:0 5px 0 10px;
+                        margin:0 10px 0 10px;
+                    }
+                    .mapToolLayerBoxItemIcon2{
+                        width: 20px;
+                        height: 20px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        margin:0 5px 0 5px;
                     }
                     .mapToolLayerBoxItemIconDiv{
                         text-align: left;
                         font-size: 12px;
-                        color: #595959;
+                        color: #ffffff;
                         display: flex;
                         flex:1;
                         overflow: hidden;
                     }
                     .mapToolLayerBoxItemCheckBox{
                         margin-right: 25px;
+                        .ant-checkbox-inner{
+                            background-color: transparent;
+                        }
+                        color: #ffffff;
+                    }
+                    .mapToolLayerBoxItemCheckBox2{
+                        .ant-checkbox-inner{
+                            background-color: transparent;
+                        }
+                        color: #ffffff;
                     }
                 }
             }