src/models/runtime/index.ts

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

src/utils/tools.js

@@ -627,42 +627,3 @@ 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.pitch3d,
+          pitch: config.homePitch,
         })
       } 
     });

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, getNewPosition } from './utils/cesutil'
+import { getCameraViewPosition, getCameraViewCenter } from './utils/cesutil'
 
 
 const { Cesium } = window;
 
 function __prepare_ces(dispatch) {
-  Cesium.CesiumWidget.prototype.showErrorPanel = function (title, error) {
+  Cesium.CesiumWidget.prototype.showErrorPanel = function (title) {
     dispatch && dispatch.map.setMode('2d');
     if (title && title.indexOf('constructing') >= 0) {
       alert('无法初始化三维场景，如果一直出现此问题，请尝试下载最新的chrome浏览器');
@@ -104,38 +104,31 @@ export default class Map3D extends BaseMap {
       Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH
     ];
 
-    this.layerMgr = new LayerMgr3D(viewer);
+    let isInitialMove = true;
-    this.getLayer3D(viewer)//加载地图
+    //监听地图移动完成事件
-    
+    viewer.camera.moveEnd.addEventListener(() => {
-    let lastPosition = {x:null,y:null,z:null};//记录上次移动坐标
+      if (isInitialMove) {
-    let moveStartTime = Date.now();//记录上次setMapCenter事件, 用于防抖
+        isInitialMove = false;
-    let flag = false //帧检测移动后改为true
+        return;
-    const timeInterval = 500; //防抖时间
+      }
-    viewer.scene.postRender.addEventListener(() => {
+      //获取当前相机高度
-      this.dispatch.runtime.tickViewChanged();
+      const { lon, lat, height:olZoom } = getCameraViewCenter(viewer);
-      // 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.pitch3d,
+          pitch: config.homePitch,
         })
       }
-          flag = false
+    });
-          moveStartTime = Date.now()
+
-        }
+    this.layerMgr = new LayerMgr3D(viewer);
-      }else{
+    this.getLayer3D(viewer)//加载地图
-        //在移动
+    
-        lastPosition = { x: currentPos.x, y: currentPos.y, z: currentPos.z };
+    viewer.scene.postRender.addEventListener(() => {
-        flag = true
+      this.dispatch.runtime.tickViewChanged();
-      }
+      // this.layerMgr.frameUpdate();
     });
 
     let destination = Cesium.Cartesian3.fromDegrees(115.064,30.989,5000) //默认相机位置
@@ -195,24 +188,8 @@ 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: {
@@ -226,7 +203,6 @@ 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]);
@@ -245,17 +221,3 @@ 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,43 +97,42 @@ export function getCameraViewPosition(mapCenter) {
 }
 
 //获取摄像机焦点经纬度和高度
-export function getCameraViewCenter(viewer={}) {
+export function getCameraViewCenter(viewer) {
   // 1. 获取屏幕中心点的射线（从相机到屏幕中心）
-  const ray = viewer?.camera.getPickRay(new Cesium.Cartesian2(
+  const ray = viewer.camera.getPickRay(new Cesium.Cartesian2(
-    viewer?.canvas.clientWidth / 2,
+    viewer.canvas.clientWidth / 2,
-    viewer?.canvas.clientHeight / 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 ellipsoid = viewer.scene.globe.ellipsoid;
-    const intersection2 = viewer?.scene.camera.pickEllipsoid(
+    const intersection2 = viewer.scene.camera.pickEllipsoid(
       new Cesium.Cartesian2(
-        viewer?.canvas.clientWidth / 2,
+        viewer.canvas.clientWidth / 2,
-        viewer?.canvas.clientHeight / 2
+        viewer.canvas.clientHeight / 2
       ),
       ellipsoid
     );
     
-    // if (intersection2) {
+    if (intersection2) {
-    //   // const cartographic = Cesium.Cartographic.fromCartesian(intersection2);
+      const cartographic = Cesium.Cartographic.fromCartesian(intersection2);
-    //   // return {
+      return {
-    //   //   lon: Cesium?.Math?.toDegrees(cartographic.longitude),
+        lon: Cesium.Math.toDegrees(cartographic.longitude),
-    //   //   lat: Cesium?.Cartographic?.toDegrees(cartographic.latitude),
+        lat: Cesium.Cartographic.toDegrees(cartographic.latitude),
-    //   //   height: 0
+        height: 0
-    //   // };
+      };
-    // }
+    }
   }
 }
 
@@ -193,36 +192,5 @@ export function zoomToHeight(olZoom) {
 }
 //cesium的摄像机height转openlayers的zoom
 export function heigjtToZoom(height) {
-  return Math.max(0, Math.min(28, Math.log2(120000000 / (height>400?(height - 400):height) )))
+  return Math.max(0, Math.min(28, Math.log2(120000000 / (height - 400) )))
-}
-
-//根据经纬度、当前相机朝向、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: 0;
+  height: 100%;
   position: relative;
   
   @import "../common.less";

src/views/Home/index.js

@@ -1,5 +1,4 @@
 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';
@@ -8,19 +7,11 @@ 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=...)
@@ -43,7 +34,6 @@ const HomePage = () => {
     
     setUserInfo({ userName: finalUserName });
     setIsReady(true);
-    dispatch.runtime.setHome()
   }, []);
 
   const renderContent = () => {

src/views/Home/mapToolBox/index.js

@@ -6,20 +6,13 @@ 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 showPanels = useSelector((s) => s.runtime.showPanels)
+    const [open, setOpen] = useState(false)
-    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 };
@@ -56,46 +49,23 @@ export default function Btn() {
         }
     }
 
+
     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={()=>{}}>
-                    <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={()=>{}}>
-                    <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 title="还原地图展示位置" onClick={()=>dispatch.runtime.setHome()}>
+                    <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/ZhongXin.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>
             </div>
 
             <div className='mapToolLayer' style={{width: open ? '300px' : '0',}}>

src/views/Home/mapToolBox/index.less

@@ -3,7 +3,6 @@
     z-index: 100;
     right: 445px;
     top: 100px;
-    transition: all 0.3s;
     .mapToolBtn{
         width:40px;
         padding-bottom: 5px;
@@ -13,10 +12,8 @@
         align-items: center;
 
         .mapToolBtnIcon{
-            width: 28px;
+            width: 30px;
-            height: 28px;
+            height: 30px;
-            padding: 7px;
-            background: url(../../../../public//assets/icons/bg.png) 50% 50% / 100% 100% no-repeat;
             margin-top: 5px;
             cursor: pointer;
         }