diff --git a/public/assets/mapicon/weixianqu.png b/public/assets/mapicon/weixianqu.png new file mode 100644 index 0000000..6261de1 Binary files /dev/null and b/public/assets/mapicon/weixianqu.png differ diff --git a/public/assets/maptool/ba.png b/public/assets/maptool/ba.png new file mode 100644 index 0000000..4686845 Binary files /dev/null and b/public/assets/maptool/ba.png differ diff --git a/public/assets/maptool/yihongdao.png b/public/assets/maptool/yihongdao.png new file mode 100644 index 0000000..94930e9 Binary files /dev/null and b/public/assets/maptool/yihongdao.png differ diff --git a/src/config.ts b/src/config.ts deleted file mode 100644 index db7df68..0000000 --- a/src/config.ts +++ /dev/null @@ -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 -}; \ No newline at end of file diff --git a/src/config/index.js b/src/config/index.js index 79a40d7..c125e36 100644 --- a/src/config/index.js +++ b/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" -} \ No newline at end of file + minioIp:"http://223.75.53.141:9100/gs-ss", + pitch3d, + mapCenter, + extent, + poiPitch +} diff --git a/src/models/map/index.ts b/src/models/map/index.ts index 8696efa..9acb727 100644 --- a/src/models/map/index.ts +++ b/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, //渗流站 diff --git a/src/views/Home/MapCtrl/M2D/layers/POILayer2D.js b/src/views/Home/MapCtrl/M2D/layers/POILayer2D.js index d827017..2dcb9cf 100644 --- a/src/views/Home/MapCtrl/M2D/layers/POILayer2D.js +++ b/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`, diff --git a/src/views/Home/MapCtrl/M3D/Map3D.js b/src/views/Home/MapCtrl/M3D/Map3D.js index d8d0087..91bc35b 100644 --- a/src/views/Home/MapCtrl/M3D/Map3D.js +++ b/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) { diff --git a/src/views/Home/mapToolBox/index.js b/src/views/Home/mapToolBox/index.js index e9d2f40..15668db 100644 --- a/src/views/Home/mapToolBox/index.js +++ b/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 name = event.target.name - const checked = event.target.checked - - if(name==='SatelliteImage'&&checked){ + const mapType = (name)=>{ + if(name==='2d'){ 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){ - 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(name === '3d'){ 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.setLayerSetting({HLLayer: 'B'}) - dispatch.map.setLayerSetting({LakeLayer: 'B'}) + 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 (
dispatch.runtime.setShowPanels(!showPanels)}>
-
{}}> +
{message.warn('功能开发中')}}>
dispatch.runtime.setHome()}>
-
{}}> +
{message.warn('功能开发中')}}>
{ @@ -87,7 +112,7 @@ export default function Btn() { }}>
-
{}}> +
ExportImage()}>
dispatch.runtime.setIsFullScreen(!isFullScreen)}> @@ -98,117 +123,178 @@ export default function Btn() {
-
+
- 图层显示控制 + 资源目录 setOpen(false)}/>
-
基础图层
-
-
-
行政区划
- -
-
-
-
河流
- -
-
-
-
湖泊
- -
-
-
-
3D图
- -
-
-
-
影像图
- -
-
-
-
矢量图
- -
-
监测体系
-
-
-
雨量站
- -
-
-
-
水位站
- -
-
-
-
流量站
- -
-
-
-
视频点
- -
-
-
-
预警广播
- -
-
-
-
位移站
- -
-
-
-
渗压站
- -
-
-
-
渗流站
- -
-
重点对象
-
-
-
危险区
- -
-
-
-
安置点
- -
-
-
-
企事业单位
- -
-
-
-
沿河居民户
- -
-
水利工程
-
-
-
水库监测
- -
-
-
-
水电站
- -
+
+ mapType('2d')} name={'SatelliteImage'} > 影像图 +
+ +
{ + const cameraTargeta = { + center:config.mapCenter, + zoom: 15, + pitch: config.pitch3d, + } + if(mode==='2d'){ + dispatch.runtime.setCameraTarget(cameraTargeta) + }else{ + dispatch.runtime.setMapCenter(cameraTargeta) + } + mapType('2d') + }} + > + {/*
*/} +
水库全景
+
+
{ + 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') + }} + > + {/*
*/} +
流域全景
+
+
+ mapType('3d')} name={'3d'} > 3D图 +
+
{ + 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') + }} + > +
+
主坝
+
+
{ + 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') + }} + > +
+
副坝
+
+
{ + 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') + }} + > +
+
溢洪道
+
+ +
+ 监测体系 +
+
+ +
+
水库水文站
+
+
+ +
+
流量站
+
+
+ +
+
视频站
+
+ +
+ +
+
渗压站
+
+ +
+ +
+
渗流站
+
+ +
+ +
+
位移站
+
+ + +
+ 洪水防御 +
+
+ +
+
危险区
+
+
+ +
+
安置点
+
+
+ +
+
企事业单位
+
+
+ +
+
沿河居民户
+
diff --git a/src/views/Home/mapToolBox/index.less b/src/views/Home/mapToolBox/index.less index f139115..18c8d3b 100644 --- a/src/views/Home/mapToolBox/index.less +++ b/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; - width: 300px; + background: #1c3965f0; + 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; - height: 25px; - width: 100%; - display: flex; - align-items: center; - justify-content: left; - border-bottom: 1px solid #bfbfbf; + + .hoverBg:hover{ + background: #23477cf0; } .mapToolLayerBoxItem{ - width: 50%; - height: 40px; + color: #ffffff; + 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; } } }