增加首页地图工具

src/models/runtime/index.ts

@@ -17,7 +17,8 @@ export const runtime = createModel<RootModel>()({
     markers: {},
     viewTick: 1, //用来刷新页面更新Marker位置
     showPanels: true, //是否展开面板
-    homeCheckedObj: {}, //首页展开面板对象
+    isFullScreen: false, //是否全屏
+    homeCheckedObj: {}, //首页展开面板对象大屏不用
     featurePops: [], // [{ id, type, data, lgtd, lttd, elev }]
     
     layerSetting: {},
@@ -81,6 +82,12 @@ export const runtime = createModel<RootModel>()({
         showPanels: val,
       }
     },
+    setIsFullScreen(state, val) {
+      return {
+        ...state,
+        isFullScreen: val,
+      }
+    },
     setHomeCheckedObj(state, val) {
       return {
         ...state,

src/utils/tools.js

@@ -627,3 +627,42 @@ export const download = (url) => {
         // 模拟点击事件，开始下载
         downloadLink.click();
   }
+
+export const showFullScreen = (show=false) => {
+  //当前是否全屏
+  const checkFullScreen = () => {
+    return !!(
+      document.fullscreenElement ||
+      document.webkitFullscreenElement ||
+      document.mozFullScreenElement ||
+      document.msFullscreenElement
+    );
+  };
+  
+  if(show && !checkFullScreen()){
+    // 进入全屏
+    const elem = document?.documentElement;
+    if (elem?.requestFullscreen) {
+        elem?.requestFullscreen();
+      } else if (elem?.mozRequestFullScreen) { /* Firefox */
+        elem?.mozRequestFullScreen();
+      } else if (elem?.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
+        elem?.webkitRequestFullscreen();
+      } else if (elem?.msRequestFullscreen) { /* IE/Edge */
+        elem?.msRequestFullscreen();
+      }
+  }
+
+  if(!show && checkFullScreen()){
+    // 退出全屏
+    if (document?.exitFullscreen) {
+      document?.exitFullscreen();
+    } else if (document?.mozCancelFullScreen) { /* Firefox */
+      document?.mozCancelFullScreen();
+    } else if (document?.webkitExitFullscreen) { /* Chrome, Safari & Opera */
+      document?.webkitExitFullscreen();
+    } else if (document?.msExitFullscreen) { /* IE/Edge */
+      document?.msExitFullscreen();
+    }
+  }
+}

src/views/Home/MapCtrl/M2D/Map2D.js

@@ -82,7 +82,7 @@ export default class Map2D extends BaseMap {
         this.dispatch.runtime.setMapCenter({
           center: this.PROJ2GG(center),
           zoom: zoom,
-          pitch: config.homePitch,
+          pitch: config.pitch3d,
         })
       } 
     });

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

@@ -9,13 +9,13 @@ import { BouaLayer3D } from "./layers/BouaLayer3D";
 import { BouaMaskLayer3D } from "./layers/BouaMaskLayer3D";
 import { VillagesBouaLayer3D } from "./layers/VillagesBouaLayer3D"
 
-import { getCameraViewPosition, getCameraViewCenter } from './utils/cesutil'
+import { getCameraViewPosition, getCameraViewCenter, getNewPosition } from './utils/cesutil'
 
 
 const { Cesium } = window;
 
 function __prepare_ces(dispatch) {
-  Cesium.CesiumWidget.prototype.showErrorPanel = function (title) {
+  Cesium.CesiumWidget.prototype.showErrorPanel = function (title, error) {
     dispatch && dispatch.map.setMode('2d');
     if (title && title.indexOf('constructing') >= 0) {
       alert('无法初始化三维场景，如果一直出现此问题，请尝试下载最新的chrome浏览器');
@@ -104,31 +104,38 @@ export default class Map3D extends BaseMap {
       Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH
     ];
 
-    let isInitialMove = true;
-    //监听地图移动完成事件
-    viewer.camera.moveEnd.addEventListener(() => {
-      if (isInitialMove) {
-        isInitialMove = false;
-        return;
-      }
-      //获取当前相机高度
-      const { lon, lat, height:olZoom } = getCameraViewCenter(viewer);
+    this.layerMgr = new LayerMgr3D(viewer);
+    this.getLayer3D(viewer)//加载地图
+    
+    let lastPosition = {x:null,y:null,z:null};//记录上次移动坐标
+    let moveStartTime = Date.now();//记录上次setMapCenter事件, 用于防抖
+    let flag = false //帧检测移动后改为true
+    const timeInterval = 500; //防抖时间
+    viewer.scene.postRender.addEventListener(() => {
+      this.dispatch.runtime.tickViewChanged();
+      // this.layerMgr.frameUpdate();
+
+      const currentPos = viewer.camera.position
+      const { x, y, z } = lastPosition
+      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);
           if(lon && lat && olZoom){
             this.dispatch.runtime.setMapCenter({
               center: [lon, lat],
               zoom: olZoom,
-          pitch: config.homePitch,
+              pitch: config.pitch3d,
             })
           }
-    });
-
-    this.layerMgr = new LayerMgr3D(viewer);
-    this.getLayer3D(viewer)//加载地图
-    
-    viewer.scene.postRender.addEventListener(() => {
-      this.dispatch.runtime.tickViewChanged();
-      // this.layerMgr.frameUpdate();
+          flag = false
+          moveStartTime = Date.now()
+        }
+      }else{
+        //在移动
+        lastPosition = { x: currentPos.x, y: currentPos.y, z: currentPos.z };
+        flag = true
+      }
     });
 
     let destination = Cesium.Cartesian3.fromDegrees(115.064,30.989,5000) //默认相机位置
@@ -188,8 +195,24 @@ export default class Map3D extends BaseMap {
     return this.layerMgr.getLayer(name);
   }
 
-  zoomTo(cameraTarget) {
+  zoomTo(cameraTarget={}) {
     if (cameraTarget.center) {
+      if(cameraTarget.fixed){//固定相机朝向
+        const camera = this._map.camera;    
+        const destination = getNewPosition(cameraTarget.center, cameraTarget.zoom, camera)
+        if(!destination){
+          return
+        }
+        camera.flyTo({
+          destination: destination,
+          orientation: {
+            heading: camera.heading,
+            pitch: camera.pitch,
+            roll: 0.0,
+          },
+          duration: 1, 
+        });
+      }else{
         this._map.camera.flyTo({
           destination: getCameraViewPosition(cameraTarget),
           orientation: {
@@ -203,6 +226,7 @@ export default class Map3D extends BaseMap {
           // pitchAdjustHeight : 1000, // 在飞行过程中调整俯仰角的高度阈值
           // flyOverLongitude: 100, // 飞越经度，用于控制飞行路径
         });
+      }
     } else if (cameraTarget.bound) {
       const b = cameraTarget.bound;
       const p1 = Cesium.Cartesian3.fromDegrees(...b[0]);
@@ -221,3 +245,17 @@ export default class Map3D extends BaseMap {
     BouaMaskLayer3D(viewer)//县界外遮罩层
   }
 }
+
+// // 这是一个测试性能的工具留着
+// let listenerExecutionTimes = []; // 记录每次执行的时间
+// const start = performance.now();
+// const end = performance.now();
+// listenerExecutionTimes.push(end - start);
+
+// setInterval(() => {
+//   if (listenerExecutionTimes.length > 0) {
+//       const avg = listenerExecutionTimes.reduce((a, b) => a + b, 0) / listenerExecutionTimes.length;
+//       console.log(`平均每帧监听函数执行时间: ${avg.toFixed(3)}ms`);
+//       listenerExecutionTimes = []; // 清空
+//   }
+// }, 1000);

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

@@ -48,7 +48,7 @@ export default class LayerMgr3D extends LayerMgr {
    */
   addAppLayers(dispatch, visible, setting, otherParams) {
     visible = visible || {};
-    // dispatch.map.setMap(this.viewer);
+    dispatch.map.setMap(this.viewer);
     //河流
     this.addLayer(new HLLayer3D({ visible: visible[HLLayer3D.LayerName], setting, dispatch }));
     //湖泊

src/views/Home/MapCtrl/M3D/layers/FeatureLayer3D.js

@@ -75,7 +75,7 @@ export default class FeatureLayer3D extends BaseLayer3D {
    */
   setData(records) {
     const viewer = this._viewer;
-    if (!viewer || !viewer.dataSourceDisplay?.defaultDataSource) {
+    if (!viewer || !viewer?.dataSourceDisplay?.defaultDataSource) {
       console.log('viewer null');
       return;
     }

src/views/Home/MapCtrl/M3D/utils/cesutil.js

@@ -97,42 +97,43 @@ export function getCameraViewPosition(mapCenter) {
 }
 
 //获取摄像机焦点经纬度和高度
-export function getCameraViewCenter(viewer) {
+export function getCameraViewCenter(viewer={}) {
   // 1. 获取屏幕中心点的射线（从相机到屏幕中心）
-  const ray = viewer.camera.getPickRay(new Cesium.Cartesian2(
-    viewer.canvas.clientWidth / 2,
-    viewer.canvas.clientHeight / 2
+  const ray = viewer?.camera.getPickRay(new Cesium.Cartesian2(
+    viewer?.canvas.clientWidth / 2,
+    viewer?.canvas.clientHeight / 2
   ));
   
   // 2. 计算射线与地球表面的交点
-  const intersection = viewer.scene.globe.pick(ray, viewer.scene);
+  const intersection = viewer?.scene.globe.pick(ray, viewer?.scene);
   if (intersection) {
     // 如果有交点（看向地球）
     const cartographic = Cesium.Cartographic.fromCartesian(intersection);
     return {
       lon: Cesium.Math.toDegrees(cartographic.longitude),
       lat: Cesium.Math.toDegrees(cartographic.latitude),
-      height: heigjtToZoom(viewer.camera.positionCartographic.height)//cartographic.height
+      height: heigjtToZoom(viewer?.camera.positionCartographic.height)//cartographic.height
     };
   } else {
+    console.log('如果看向天空或太空，获取射线与椭球体的交点');
     // 如果看向天空或太空，获取射线与椭球体的交点
-    const ellipsoid = viewer.scene.globe.ellipsoid;
-    const intersection2 = viewer.scene.camera.pickEllipsoid(
+    const ellipsoid = viewer?.scene.globe.ellipsoid;
+    const intersection2 = viewer?.scene.camera.pickEllipsoid(
       new Cesium.Cartesian2(
-        viewer.canvas.clientWidth / 2,
-        viewer.canvas.clientHeight / 2
+        viewer?.canvas.clientWidth / 2,
+        viewer?.canvas.clientHeight / 2
       ),
       ellipsoid
     );
     
-    if (intersection2) {
-      const cartographic = Cesium.Cartographic.fromCartesian(intersection2);
-      return {
-        lon: Cesium.Math.toDegrees(cartographic.longitude),
-        lat: Cesium.Cartographic.toDegrees(cartographic.latitude),
-        height: 0
-      };
-    }
+    // if (intersection2) {
+    //   // const cartographic = Cesium.Cartographic.fromCartesian(intersection2);
+    //   // return {
+    //   //   lon: Cesium?.Math?.toDegrees(cartographic.longitude),
+    //   //   lat: Cesium?.Cartographic?.toDegrees(cartographic.latitude),
+    //   //   height: 0
+    //   // };
+    // }
   }
 }
 
@@ -192,5 +193,36 @@ export function zoomToHeight(olZoom) {
 }
 //cesium的摄像机height转openlayers的zoom
 export function heigjtToZoom(height) {
-  return Math.max(0, Math.min(28, Math.log2(120000000 / (height - 400) )))
+  return Math.max(0, Math.min(28, Math.log2(120000000 / (height>400?(height - 400):height) )))
+}
+
+//根据经纬度、当前相机朝向、zoom，返回Cartesian3位置
+export function getNewPosition(center, zoom, camera ) {
+  //相机坐标的高度
+  const height = zoomToHeight(zoom)
+  //获取摄像机朝向方向的单位向量（长度1）
+  const direction = Cesium.Cartesian3.normalize( camera.directionWC, new Cesium.Cartesian3());
+  const reverseDirection = Cesium.Cartesian3.negate(direction, new Cesium.Cartesian3());//这里要取反用来计算处摄像机所处的位置
+  //相机与地表焦点的坐标
+  const position = Cesium.Cartesian3.fromDegrees(center[0], center[1], 200);
+  //相机俯仰角
+  const pitch = camera.pitch
+  if(pitch>=0){
+    console.log('请朝向地面');
+    return false
+  }
+  //直线距离
+  const distance = height / Math.sin(-pitch);
+    // 计算移动后的位置
+    const newPosition = new Cesium.Cartesian3();
+    Cesium.Cartesian3.add(
+      position,                            // 当前位置
+      Cesium.Cartesian3.multiplyByScalar(
+        reverseDirection,                  // 方向向量
+        distance,                          // 移动距离
+        new Cesium.Cartesian3()            // 临时向量
+      ),
+      newPosition                          // 结果位置
+    );
+  return newPosition
 }

src/views/Home/components/Business/SiQuan/index.less

@@ -1,6 +1,6 @@
 .siquan-view {
   width: 100%;
-  height: 100%;
+  height: 0;
   position: relative;
   
   @import "../common.less";

src/views/Home/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import Header from './components/Layouts/Header';
 import SiQuan from './components/Business/SiQuan';
 import SiZhi from './components/Business/SiZhi';
@@ -7,11 +8,19 @@ import SiGuan from './components/Business/SiGuan';
 import MapCtrl from './MapCtrl/index'
 import MapToolBox from './mapToolBox'
 import './index.less';
+import { showFullScreen } from '@/utils/tools';
 
 const HomePage = () => {
   const [activeMenu, setActiveMenu] = useState('siquan');
   const [userInfo, setUserInfo] = useState({ userName: '系统管理员' });
   const [isReady, setIsReady] = useState(false);
+  const isFullScreen = useSelector(s => s.runtime.isFullScreen);
+  const dispatch = useDispatch()
+
+  useEffect(()=>{
+    //根据isFullScreen判断当前是否进入全屏
+    showFullScreen(isFullScreen)
+  },[isFullScreen])
 
   useEffect(() => {
     // 兼容 Hash 路由模式：参数可能跟在 # 后面 (例如 /#/home?token=...)
@@ -34,6 +43,7 @@ const HomePage = () => {
     
     setUserInfo({ userName: finalUserName });
     setIsReady(true);
+    dispatch.runtime.setHome()
   }, []);
 
   const renderContent = () => {

src/views/Home/mapToolBox/index.js

@@ -6,13 +6,20 @@ import { useLocation } from 'react-router'
 import './index.less'
 
 export default function Btn() {
-    const showPanels = useSelector((s) => s.runtime.showPanels)
-    const homeCheckedObj = useSelector((s) => s.runtime.homeCheckedObj)
-    const layerVisible = useSelector(s => s.map.layerVisible);
-    const mode = useSelector(s=>s.map.mode)
     const dispatch = useDispatch()
     const location = useLocation()
-    const [open, setOpen] = useState(false)
+    const showPanels = useSelector((s) => s.runtime.showPanels)
+    const layerVisible = useSelector(s => s.map.layerVisible);
+    const isFullScreen = useSelector(s => s.runtime.isFullScreen)
+    const mapCenter = useSelector(s => s.runtime.mapCenter)||{}
+    const mode = useSelector(s=>s.map.mode)
+    const [open, setOpen] = useState(false)//是否弹出图层窗口
+    const [targetZoom, setTargetZoom] = useState(null)//点击缩放按钮后地图目标的zoom值
+
+    useEffect(()=>{
+        //移动地图后同步targetZoom值
+        setTargetZoom(mapCenter?.zoom||null)
+    },[mapCenter])
 
     const layerVisibleChanged = (event)=>{
         const vo = { [event.target.name]: event.target.checked };
@@ -49,22 +56,45 @@ export default function Btn() {
         }
     }
 
-
     return (
         <div className="mapToolBox" style={{right: showPanels?'445px':'10px'}}>
             <div className='mapToolBtn'>
-                <div title="地图展示图层控制" onClick={()=>{setOpen(!open)}}>
-                    <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/tuceng.png`} />
+                <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={()=>{}}>
+                    <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/search.png`} />
                 </div>
                 <div title="还原地图展示位置" onClick={()=>dispatch.runtime.setHome()}>
-                    <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/ZhongXin.png`} />
+                    <img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/center.png`} />
                 </div>
-                <div title={`${showPanels?'收起':'展开'}悬浮功能块`} onClick={()=>dispatch.runtime.setShowPanels(!showPanels)}>
-                    {
-                        showPanels ? 
-                        <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/zhankai2.png`} /> 
-                        :<img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/shouqi2.png`} />
+                <div title="天气" onClick={()=>{}}>
+                    <img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/tianqi.png`} />
+                </div>
+                <div title="放大" onClick={()=>{
+                    if(mapCenter?.zoom === targetZoom){
+                        dispatch.runtime.setCameraTarget({...mapCenter, zoom: mapCenter.zoom + 1, fixed:true})
+                        setTargetZoom(mapCenter.zoom + 1)
                     }
+                }}>
+                    <img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/fangda.png`} />
+                </div>
+                <div title="缩小" onClick={()=>{
+                    if(mapCenter?.zoom === targetZoom){
+                        dispatch.runtime.setCameraTarget({...mapCenter, zoom: mapCenter.zoom - 1, fixed:true })
+                        setTargetZoom(mapCenter.zoom - 1)
+                    }
+                }}>
+                    <img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/suoxiao.png`} />
+                </div>
+                <div title="截图" onClick={()=>{}}>
+                    <img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/download.png`} />
+                </div>
+                <div title={isFullScreen?"退出全屏":"进入全屏"} onClick={()=>dispatch.runtime.setIsFullScreen(!isFullScreen)}>
+                    <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/${isFullScreen?'quanping2.png':'quanping.png'}`} />
+                </div>
+                <div title="地图展示图层控制" onClick={()=>{setOpen(!open)}}>
+                    <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/tuceng.png`} />
                 </div>
             </div>
 

src/views/Home/mapToolBox/index.less

@@ -12,8 +12,10 @@
         align-items: center;
 
         .mapToolBtnIcon{
-            width: 30px;
-            height: 30px;
+            width: 28px;
+            height: 28px;
+            padding: 7px;
+            background: url(../../../../public//assets/icons/bg.png) 50% 50% / 100% 100% no-repeat;
             margin-top: 5px;
             cursor: pointer;
         }