页面样式调整，功能调整

WX

2023-06-07 fc1f22df5322aa89ffcf60040b01eff0451df3a3

页面样式调整，功能调整

 package-lock.json

@@ -624,11 +624,6 @@
      "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
      "dev": true
    },
    "@popperjs/core": {
      "version": "npm:@sxzz/popperjs-es@2.11.7",
      "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
    },
    "@sideway/address": {
      "version": "4.1.4",
      "resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz",
@@ -1120,6 +1115,49 @@
        "webpack-merge": "^5.7.3",
        "webpack-virtual-modules": "^0.4.2",
        "whatwg-fetch": "^3.6.2"
      },
      "dependencies": {
        "@vue/vue-loader-v15": {
          "version": "npm:vue-loader@15.10.1",
          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.1.tgz",
          "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
          "dev": true,
          "requires": {
            "@vue/component-compiler-utils": "^3.1.0",
            "hash-sum": "^1.0.2",
            "loader-utils": "^1.1.0",
            "vue-hot-reload-api": "^2.3.0",
            "vue-style-loader": "^4.1.0"
          },
          "dependencies": {
            "hash-sum": {
              "version": "1.0.2",
              "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
              "dev": true
            }
          }
        },
        "json5": {
          "version": "1.0.2",
          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
          "dev": true,
          "requires": {
            "minimist": "^1.2.0"
          }
        },
        "loader-utils": {
          "version": "1.4.2",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
          "dev": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^1.0.1"
          }
        }
      }
    },
    "@vue/cli-shared-utils": {
@@ -1311,47 +1349,6 @@
      "version": "3.2.47",
      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.47.tgz",
      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
    },
    "@vue/vue-loader-v15": {
      "version": "npm:vue-loader@15.10.1",
      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
      "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
      "dev": true,
      "requires": {
        "@vue/component-compiler-utils": "^3.1.0",
        "hash-sum": "^1.0.2",
        "loader-utils": "^1.1.0",
        "vue-hot-reload-api": "^2.3.0",
        "vue-style-loader": "^4.1.0"
      },
      "dependencies": {
        "hash-sum": {
          "version": "1.0.2",
          "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
          "dev": true
        },
        "json5": {
          "version": "1.0.2",
          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
          "dev": true,
          "requires": {
            "minimist": "^1.2.0"
          }
        },
        "loader-utils": {
          "version": "1.4.2",
          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
          "dev": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^1.0.1"
          }
        }
      }
    },
    "@vue/web-component-wrapper": {
      "version": "1.3.0",
@@ -2663,7 +2660,7 @@
    },
    "default-passive-events": {
      "version": "2.0.0",
      "resolved": "https://registry.npmmirror.com/default-passive-events/-/default-passive-events-2.0.0.tgz",
      "resolved": "https://registry.npmjs.org/default-passive-events/-/default-passive-events-2.0.0.tgz",
      "integrity": "sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ=="
    },
    "defaults": {
@@ -2854,6 +2851,13 @@
        "lodash-unified": "^1.0.2",
        "memoize-one": "^6.0.0",
        "normalize-wheel-es": "^1.2.0"
      },
      "dependencies": {
        "@popperjs/core": {
          "version": "npm:@sxzz/popperjs-es@2.11.7",
          "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
          "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
        }
      }
    },
    "emoji-regex": {

 postcss.config.js

@@ -1,21 +1,21 @@
module.exports = {
    plugins: {
        "postcss-px-to-viewport": {
            unitToConvert: "px", // éœ€è¦è½¬æ¢çš„单位，默认为"px"
            viewportWidth: 1920, // è®¾è®¡ç¨¿çš„视口宽度
            unitPrecision: 5, // å•ä½è½¬æ¢åŽä¿ç•™çš„精度
            propList: ["*"], // èƒ½è½¬åŒ–为vw的属性列表
            viewportUnit: "vw", // å¸Œæœ›ä½¿ç”¨çš„视口单位
            fontViewportUnit: "vw", // å­—体使用的视口单位
            selectorBlackList: [], // éœ€è¦å¿½ç•¥çš„CSS选择器，不会转为视口单位，使用原有的px等单位。
            minPixelValue: 1, // è®¾ç½®æœ€å°çš„转换数值，如果为1的话，只有大于1的值会被转换
            mediaQuery: false, // åª’体查询里的单位是否需要转换单位
            replace: true, //  æ˜¯å¦ç›´æŽ¥æ›´æ¢å±žæ€§å€¼ï¼Œè€Œä¸æ·»åŠ å¤‡ç”¨å±žæ€§
            exclude: undefined, // å¿½ç•¥æŸäº›æ–‡ä»¶å¤¹ä¸‹çš„文件或特定文件，例如 'node_modules' ä¸‹çš„文件
            include: undefined, // å¦‚果设置了include，那将只有匹配到的文件才会被转换
            landscape: false, // æ˜¯å¦æ·»åŠ æ ¹æ® landscapeWidth ç”Ÿæˆçš„媒体查询条件 @media (orientation: landscape)
            landscapeUnit: "vw", // æ¨ªå±æ—¶ä½¿ç”¨çš„单位
            landscapeWidth: 1366, // æ¨ªå±æ—¶ä½¿ç”¨çš„视口宽度
        },
  plugins: {
    "postcss-px-to-viewport": {
      unitToConvert: "px", // éœ€è¦è½¬æ¢çš„单位，默认为"px"
      viewportWidth: 1920, // è®¾è®¡ç¨¿çš„视口宽度
      unitPrecision: 5, // å•ä½è½¬æ¢åŽä¿ç•™çš„精度
      propList: ["*"], // èƒ½è½¬åŒ–为vw的属性列表
      viewportUnit: "vw", // å¸Œæœ›ä½¿ç”¨çš„视口单位
      fontViewportUnit: "vw", // å­—体使用的视口单位
      selectorBlackList: [], // éœ€è¦å¿½ç•¥çš„CSS选择器，不会转为视口单位，使用原有的px等单位。
      minPixelValue: 1, // è®¾ç½®æœ€å°çš„转换数值，如果为1的话，只有大于1的值会被转换
      mediaQuery: false, // åª’体查询里的单位是否需要转换单位
      replace: true, //  æ˜¯å¦ç›´æŽ¥æ›´æ¢å±žæ€§å€¼ï¼Œè€Œä¸æ·»åŠ å¤‡ç”¨å±žæ€§
      exclude: undefined, // å¿½ç•¥æŸäº›æ–‡ä»¶å¤¹ä¸‹çš„文件或特定文件，例如 'node_modules' ä¸‹çš„文件
      include: undefined, // å¦‚果设置了include，那将只有匹配到的文件才会被转换
      landscape: false, // æ˜¯å¦æ·»åŠ æ ¹æ® landscapeWidth ç”Ÿæˆçš„媒体查询条件 @media (orientation: landscape)
      landscapeUnit: "vw", // æ¨ªå±æ—¶ä½¿ç”¨çš„单位
      landscapeWidth: 1366, // æ¨ªå±æ—¶ä½¿ç”¨çš„视口宽度
    },
  },
};

 src/App.vue

@@ -1,7 +1,7 @@
<template>
  <router-view />
</template>
<script  setup lang='ts'>
<script setup lang="ts">
import {
  ref,
  onMounted,
@@ -13,7 +13,7 @@
import router from "./router";

onMounted(() => {
  router.push("/Login");
  // router.push("/Login");
});
</script>


 src/assets/css/global.css

@@ -72,4 +72,22 @@
  background: #3DBEFD !important;
  color:rgba(1, 15, 22, 0.85) !important;

}
.btnbox{
  background: rgba(104, 156, 255, 0.2);
  border: 1px solid #234066;
  border-radius: 2px;
}
.btnbox:hover {
  background: rgba(104, 156, 255, 0.2);
  border: 1px solid #689cff;
}
.el-input__wrapper{
  background: rgba(13, 19, 29, 0.4);
  border: 1px solid rgba(214, 228, 255, 0.4);
}
.el-input__wrapper.is-focus{
  /* border: 1px solid #D6E4FF;
  box-shadow:none; */
  box-shadow:0 0 0 1px #D6E4FF;
}

 src/assets/js/Map/config.js

@@ -1,15 +1,15 @@

//配置文件地址
const config = {
    //椭球体初始化加载图片
    imgUrl: "Workers/image/earth.jpg",
    //license许可
    licenseServer: "http://183.162.245.49:18080",
    //tmsserver
    moonTms: "http://192.168.20.39:9055/gisserver/tmsserver/moondom",
    //Wmtsserver
    moonWmts: 'http://172.16.2.10:50001/sj_raster/v6/wmts/service/system/10000101/5?ak=mf72ff9295c740ec0f37e61433e8a3ad8d&srs=ESRI:104903',
    //地形
    moonTerrain: 'http://172.16.2.10:50001/sj_raster/v6/terrain_mesh/10002301/21',
}
export default config;
  //椭球体初始化加载图片
  imgUrl: "Workers/image/earth.jpg",
  //license许可
  licenseServer: "http://183.162.245.49:18080",
  //tmsserver
  moonTms: "/TMS",
  //Wmtsserver
  moonWmts:
    "http://172.16.2.10:50001/sj_raster/v6/wmts/service/system/10000101/5?ak=mf72ff9295c740ec0f37e61433e8a3ad8d&srs=ESRI:104903",
  //地形
  moonTerrain: "http://172.16.2.10:50001/sj_raster/v6/terrain_mesh/10002301/21",
};
export default config;

 src/assets/js/Map/index.js

@@ -4,161 +4,164 @@
import server from "./server";

const InitMap = {
    earthCtrl: null,
    Viewer: null,
    //地图初始化
    init3DMap() {
        //设置月球坐标系
        SmartEarth.Cesium.Ellipsoid.WGS84 = new SmartEarth.Cesium.Ellipsoid(
            1737400.0,
            1737400.0,
            1737400.0
        );
        //页面初始化
        this.earthCtrl = new SmartEarth.EarthCtrl("cesiumContainer", {
            licenseServer: "https://cim.smartearth.cn/",
            StaticFileBaseUrl: "/CIMSDK/"
        });
  earthCtrl: null,
  Viewer: null,
  //地图初始化
  init3DMap() {
    //设置月球坐标系
    SmartEarth.Cesium.Ellipsoid.WGS84 = new SmartEarth.Cesium.Ellipsoid(
      1737400.0,
      1737400.0,
      1737400.0
    );
    //页面初始化
    this.earthCtrl = new SmartEarth.EarthCtrl("cesiumContainer", {
      licenseServer: "https://cim.smartearth.cn/",
      StaticFileBaseUrl: "/CIMSDK/",
    });
    // this.earthCtrl.environment.disableAllEffect();

        this.Viewer = this.earthCtrl._Viewer;
        window.earthCtrl = this.earthCtrl;
        window.Viewer = this.earthCtrl._Viewer;
    this.Viewer = this.earthCtrl._Viewer;
    this.Viewer.scene.skyAtmosphere.show = false;
    window.earthCtrl = this.earthCtrl;
    window.Viewer = this.earthCtrl._Viewer;

        Viewer.imageryLayers.removeAll();
    Viewer.imageryLayers.removeAll();

        Viewer.scene.globe.showGroundAtmosphere = false;
    Viewer.scene.globe.showGroundAtmosphere = false;

        // var terrain = new SmartEarth.Cesium.CesiumTerrainProvider({
        //     url: config.moonTerrain,
        //     tilingScheme: new SmartEarth.Cesium.GeographicTilingScheme({
        //         ellipsoid: SmartEarth.Cesium.Ellipsoid.MOON,
        //     }),
        // });
        // Viewer.terrainProvider = terrain;
        // Viewer.scene.globe.terrainExaggeration = 5;
        // server.AddWmtesLayer(config.moonWmts);
        // var param = {
        //     name: labelName,
        //     id: earthCtrl.factory.createUUID(),
        //     text: "文字工具",
        //     font: '50pt monospace',
        //     outlineWidth: 2,
        //     fillColor: SmartEarth.Cesium.Color.RED,
        //     lon: 47.5087,
        //     lat: 23.6963,
        //     alt: 10
        // };
        // labelEntity = earthCtrl.factory.createLabel(param);
        server.AddTmsLayer(config.moonTms);
    // var terrain = new SmartEarth.Cesium.CesiumTerrainProvider({
    //     url: config.moonTerrain,
    //     tilingScheme: new SmartEarth.Cesium.GeographicTilingScheme({
    //         ellipsoid: SmartEarth.Cesium.Ellipsoid.MOON,
    //     }),
    // });
    // Viewer.terrainProvider = terrain;
    // Viewer.scene.globe.terrainExaggeration = 5;
    // server.AddWmtesLayer(config.moonWmts);
    // var param = {
    //     name: labelName,
    //     id: earthCtrl.factory.createUUID(),
    //     text: "文字工具",
    //     font: '50pt monospace',
    //     outlineWidth: 2,
    //     fillColor: SmartEarth.Cesium.Color.RED,
    //     lon: 47.5087,
    //     lat: 23.6963,
    //     alt: 10
    // };
    // labelEntity = earthCtrl.factory.createLabel(param);
    server.AddTmsLayer(config.moonTms);

        // server.AddTmsLayer('http://localhost:8080/abc');
    // server.AddTmsLayer('http://localhost:8080/abc');

        // earthCtrl.camera.flyTo(47.5087, 23.6963, 300, 9.5, -45, 0.0, 5);
    // earthCtrl.camera.flyTo(47.5087, 23.6963, 300, 9.5, -45, 0.0, 5);

        // //添加鼠标左击事件
        // this.addMouseLeftClickEvents();
        // this.addMouseMouseMoveEvents();
    },
    //鼠标左键点击事件添加
    addMouseLeftClickEvents() {
        if (window.handleLeftClick) {
            window.handleLeftClick.removeInputAction(
                Cesium.ScreenSpaceEventType.LEFT_CLICK
            ); //移除事件
            window.handleLeftClick = null;
        }
        window.handleLeftClick = new Cesium.ScreenSpaceEventHandler(
            window.Viewer.scene.canvas
        );
        window.handleLeftClick.setInputAction(function (event) {
            let cartesian = window.Viewer.camera.pickEllipsoid(event.position);
            if (cartesian) {
                let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                let lng = Cesium.Math.toDegrees(cartographic.longitude); // ç»åº¦
                let lat = Cesium.Math.toDegrees(cartographic.latitude); // çº¬åº¦
                let alt = cartographic.height; // é«˜åº¦ï¼Œæ¤­çƒé¢height永远等于0
                let coordinate = {
                    longitude: Number(lng.toFixed(6)),
                    latitude: Number(lat.toFixed(6)),
                    altitude: Number(alt.toFixed(2)),
    // //添加鼠标左击事件
    // this.addMouseLeftClickEvents();
    // this.addMouseMouseMoveEvents();
  },
  //鼠标左键点击事件添加
  addMouseLeftClickEvents() {
    if (window.handleLeftClick) {
      window.handleLeftClick.removeInputAction(
        Cesium.ScreenSpaceEventType.LEFT_CLICK
      ); //移除事件
      window.handleLeftClick = null;
    }
    window.handleLeftClick = new Cesium.ScreenSpaceEventHandler(
      window.Viewer.scene.canvas
    );
    window.handleLeftClick.setInputAction(function (event) {
      let cartesian = window.Viewer.camera.pickEllipsoid(event.position);
      if (cartesian) {
        let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        let lng = Cesium.Math.toDegrees(cartographic.longitude); // ç»åº¦
        let lat = Cesium.Math.toDegrees(cartographic.latitude); // çº¬åº¦
        let alt = cartographic.height; // é«˜åº¦ï¼Œæ¤­çƒé¢height永远等于0
        let coordinate = {
          longitude: Number(lng.toFixed(6)),
          latitude: Number(lat.toFixed(6)),
          altitude: Number(alt.toFixed(2)),
        };
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  },

                };
  addMouseMouseMoveEvents() {
    if (window.handleMouseMove) {
      window.handleMouseMove.removeInputAction(
        Cesium.ScreenSpaceEventType.MOUSE_MOVE
      ); //移除事件
      window.handleMouseMove = null;
    }
    window.handleMouseMove = new Cesium.ScreenSpaceEventHandler(
      window.Viewer.scene.canvas
    );
    window.handleMouseMove.setInputAction(function (movement) {
      let cartesian = window.Viewer.camera.pickEllipsoid(
        movement.endPosition,
        window.Viewer.scene.globe.ellipsoid
      );
      if (cartesian) {
        //将笛卡尔坐标转换为地理坐标
        var cartographic =
          window.Viewer.scene.globe.ellipsoid.cartesianToCartographic(
            cartesian
          );
        //将弧度转为度的十进制度表示
        var lng = Cesium.Math.toDegrees(cartographic.longitude);
        var lat = Cesium.Math.toDegrees(cartographic.latitude);
        //获取相机高度
        var alt = Math.ceil(window.Viewer.camera.positionCartographic.height);

            }
        let coordinate = {
          longitude: Number(lng.toFixed(6)),
          latitude: Number(lat.toFixed(6)),
          altitude: Number(alt.toFixed(2)),
          type: "MOUSE_MOVE",
        };
        window.addMouseEvents(coordinate);
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  },

        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
  //CGCS2000转月球坐标---待验证
  Cjcs2000ToMoon() {
    // å®šä¹‰å¾…转换的经纬度坐标和高度
    const longitude = 110.5;
    const latitude = 34.5;
    const height = 0;

    addMouseMouseMoveEvents() {
        if (window.handleMouseMove) {
            window.handleMouseMove.removeInputAction(
                Cesium.ScreenSpaceEventType.MOUSE_MOVE
            ); //移除事件
            window.handleMouseMove = null;
        }
        window.handleMouseMove = new Cesium.ScreenSpaceEventHandler(window.Viewer.scene.canvas);
        window.handleMouseMove.setInputAction(function (movement) {
            let cartesian = window.Viewer.camera.pickEllipsoid(
                movement.endPosition,
                window.Viewer.scene.globe.ellipsoid
            );
            if (cartesian) {
                //将笛卡尔坐标转换为地理坐标
                var cartographic =
                    window.Viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
                //将弧度转为度的十进制度表示
                var lng = Cesium.Math.toDegrees(cartographic.longitude);
                var lat = Cesium.Math.toDegrees(cartographic.latitude);
                //获取相机高度
                var alt = Math.ceil(window.Viewer.camera.positionCartographic.height);
    // å®šä¹‰CGCS2000坐标系
    const cgcs2000 = new Cesium.Ellipsoid(
      6378137.0,
      6378137.0,
      6356752.3142451793
    );

                let coordinate = {
                    longitude: Number(lng.toFixed(6)),
                    latitude: Number(lat.toFixed(6)),
                    altitude: Number(alt.toFixed(2)),
                    type: 'MOUSE_MOVE'
                };
                window.addMouseEvents(coordinate)
            }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    },
    // å®šä¹‰Moon2000坐标系
    const moon2000 = new Cesium.Ellipsoid(1737400.0, 1737400.0, 1737400.0);

    //CGCS2000转月球坐标---待验证
    Cjcs2000ToMoon() {
        // å®šä¹‰å¾…转换的经纬度坐标和高度
        const longitude = 110.5;
        const latitude = 34.5;
        const height = 0;

        // å®šä¹‰CGCS2000坐标系
        const cgcs2000 = new Cesium.Ellipsoid(
            6378137.0,
            6378137.0,
            6356752.3142451793
        );

        // å®šä¹‰Moon2000坐标系
        const moon2000 = new Cesium.Ellipsoid(1737400.0, 1737400.0, 1737400.0);

        // å°†ç»çº¬åº¦åæ ‡è½¬æ¢ä¸ºç¬›å¡å°”坐标系
        const cartesian3 = Cesium.Cartesian3.fromDegrees(
            longitude,
            latitude,
            height,
            cgcs2000
        );
        // å°†ç¬›å¡å°”坐标系转换为Moon2000坐标系
        const moonCartesian3 = Cesium.Transforms.eastNorthUpToFixedFrame(
            cartesian3,
            cgcs2000,
            moon2000
        );
        // è¾“出转换后的经纬度坐标和高度
        console.log(moonCartesian3);
        // å°†Moon2000坐标系的笛卡尔坐标转换为经纬度坐标
        const moonPosition = Cesium.Cartographic.fromCartesian(moonCartesian3);
        // è¾“出转换后的经纬度坐标和高度
        console.log(moonPosition);
    },
    // å°†ç»çº¬åº¦åæ ‡è½¬æ¢ä¸ºç¬›å¡å°”坐标系
    const cartesian3 = Cesium.Cartesian3.fromDegrees(
      longitude,
      latitude,
      height,
      cgcs2000
    );
    // å°†ç¬›å¡å°”坐标系转换为Moon2000坐标系
    const moonCartesian3 = Cesium.Transforms.eastNorthUpToFixedFrame(
      cartesian3,
      cgcs2000,
      moon2000
    );
    // è¾“出转换后的经纬度坐标和高度
    console.log(moonCartesian3);
    // å°†Moon2000坐标系的笛卡尔坐标转换为经纬度坐标
    const moonPosition = Cesium.Cartographic.fromCartesian(moonCartesian3);
    // è¾“出转换后的经纬度坐标和高度
    console.log(moonPosition);
  },
};
export default InitMap;

 src/assets/js/Map/server.js

@@ -1,32 +1,32 @@
const server = {
    //添加GisServer服务TMS切片服务
    AddTmsLayer(url) {
        var urlTemplateImageryProvider = new SmartEarth.Cesium.UrlTemplateImageryProvider({
            url: url + "/{z}/{x}/{reverseY}.png",
            maximumLevel: 4,
            minimumLevel: 1,
            tilingScheme: new SmartEarth.Cesium.GeographicTilingScheme({
                numberOfLevelZeroTilesX: 2,
                numberOfLevelZeroTilesY: 1,
            }),
        });
        window.Viewer.imageryLayers.addImageryProvider(urlTemplateImageryProvider);
    },
    AddWmtesLayer(url) {
        var urlTemplateImageryProvider = earthCtrl.factory.createImageryLayer({
            sourceType: "wmts",
            url: url,
            layer: "",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleCRS84Quad01",
            minimumLevel: 0,
            maximumLevel: 18,
            style: "",
            tilingScheme: new SmartEarth.Cesium.GeographicTilingScheme({
                ellipsoid: SmartEarth.Cesium.Ellipsoid.MOON,
            }),
        })
    },

}
export default server;
  //添加GisServer服务TMS切片服务
  AddTmsLayer(url) {
    var urlTemplateImageryProvider =
      new SmartEarth.Cesium.UrlTemplateImageryProvider({
        url: url + "/{z}/{x}/{reverseY}.png",
        maximumLevel: 4,
        minimumLevel: 1,
        tilingScheme: new SmartEarth.Cesium.GeographicTilingScheme({
          numberOfLevelZeroTilesX: 2,
          numberOfLevelZeroTilesY: 1,
        }),
      });
    window.Viewer.imageryLayers.addImageryProvider(urlTemplateImageryProvider);
  },
  AddWmtesLayer(url) {
    var urlTemplateImageryProvider = earthCtrl.factory.createImageryLayer({
      sourceType: "wmts",
      url: url,
      layer: "",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleCRS84Quad01",
      minimumLevel: 0,
      maximumLevel: 18,
      style: "",
      tilingScheme: new SmartEarth.Cesium.GeographicTilingScheme({
        ellipsoid: SmartEarth.Cesium.Ellipsoid.MOON,
      }),
    });
  },
};
export default server;

 src/components/bottomBtn.vue

@@ -4,14 +4,12 @@
      v-show="mapFlag == '2D'"
      class="ChangeMap twoImg"
      @click="setMapImg('2D')"
    >
    </div>
    ></div>
    <div
      v-show="mapFlag != '2D'"
      class="ChangeMap threeImg"
      @click="setMapImg('3D')"
    >
    </div>
    ></div>
  </div>
</template>

@@ -40,13 +38,19 @@
<style lang="less" scoped>
.bottom_btn {
  position: absolute;
  bottom: 68px;
  right: 70px;

  /*  prettier-ignore */
  bottom: 68PX;
  /*  prettier-ignore */
  right: 70PX;

  .ChangeMap {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /*  prettier-ignore */
    width: 30PX;
    /*  prettier-ignore */
    height: 30PX;
    /*  prettier-ignore */
    border: 1PX solid rgba(255, 255, 255, 0.1);
  }
  .twoImg {
    background: url("../assets/img/2D.png") no-repeat;

 src/components/topBtn.vue

@@ -4,16 +4,41 @@
      <div
        class="first_Menu"
        :title="item.name"
        v-for="(item,i) in menuOptions"
        v-for="(item, i) in menuOptions"
        :key="i"
        @click="setMenuClick(item)"
      >
        <div class="First_img">
          <img
            class="imgIcon"
            :src="require('../assets/img/topBtn/'+item.imgUrl)"
          >
            :src="require('../assets/img/topBtn/' + item.imgUrl)"
          />
        </div>
        <div
        <div class="menu_second">
          <div class="upTop">
            <div class="upimg"></div>
          </div>
          <div class="second_Box">
            <div
              class="second_Menu"
              :title="res.name"
              v-for="(res, j) in item.children"
              :key="j"
              @click="setMenuClick(res)"
              :class="{ second_Menu_click: checkFlag == res.id }"
            >
              <img
                class="imgIcon"
                style="margin-bottom: 5px"
                :src="require('../assets/img/topBtn/' + res.imgUrl)"
              />
              <div class="name_box">
                {{ res.name }}
              </div>
            </div>
          </div>
        </div>
        <!-- <div
          class="menu_second"
          v-if="item.children && item.children.length > 0"
          v-show="menuFlag == item.id"
@@ -25,24 +50,22 @@
            <div
              class="second_Menu"
              :title="res.name"
              v-for="(res,j) in item.children"
              v-for="(res, j) in item.children"
              :key="j"
              @click="setMenuClick(res)"
              :class="{'second_Menu_click':checkFlag == res.id}"
              :class="{ second_Menu_click: checkFlag == res.id }"
            >
              <img
                class="imgIcon"
                style="margin-bottom: 5px;"
                :src="require('../assets/img/topBtn/'+res.imgUrl)"
              >
              <div>
                style="margin-bottom: 5px"
                :src="require('../assets/img/topBtn/' + res.imgUrl)"
              />
              <div class="name_box">
                {{ res.name }}
              </div>

            </div>
          </div>

        </div>

        </div> -->
      </div>
    </div>
  </div>
@@ -100,7 +123,7 @@
      height: 30px;
    }
    .first_Menu {
      min-width: 50px;
      width: 50px;
      height: 50px;
      margin-right: 7px;
      background: url("../assets/img/topBtn/图标bj.png") no-repeat;
@@ -113,6 +136,7 @@
        align-items: center;
      }
    }

    .upTop {
      width: 100%;
      height: 10px;
@@ -125,13 +149,15 @@
      }
    }
    .menu_second {
      margin-top: 0px;
      display: none;
    }
    .second_Box {
      min-width: 50px;
      background: #07080e;
      box-shadow: inset 0px 0px 15px 0px rgb(38, 47, 71, 0.68);

      .second_Menu {
        min-width: 50px;
        background: #07080e;
        box-shadow: inset 0px 0px 8px 0px rgb(38, 47, 71, 0.68);
        margin-top: 1px;
@@ -140,9 +166,12 @@
        padding: 10px 10px;
        font-weight: 300;
        color: #d1e0ff;
        line-height: 7px;
        // display: flex;
        text-align: center;
        border: 1px solid none;
        .name_box {
          line-height: 7px;
          white-space: nowrap;
        }
      }

      .second_Menu_click {
@@ -153,6 +182,12 @@
          0px 7px 8px 0px rgba(38, 47, 71, 0.68);
      }
    }
    .first_Menu:hover .menu_second {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 0px;
    }
  }
}
</style>
</style>

 src/main.ts

@@ -13,6 +13,7 @@
//粒子特效
import VueParticles from "vue-particles";
import Drag from "./utils/drag";

const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);

 src/router/index.ts

@@ -1,7 +1,7 @@
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

// ç™»å½•é¡µ
import Login from "../components/login.vue";
import Login from "../views/login.vue";
//首页
import Index from "../views/Index.vue";
const routes: Array<RouteRecordRaw> = [
@@ -11,9 +11,13 @@
    component: Login,
  },
  {
    path: "/Index",
    path: "/",
    name: "Index",
    component: Index,
    meta: {
      title: "首页",
      requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
    },
  },
];

@@ -21,5 +25,21 @@
  history: createWebHashHistory(),
  routes,
});

//路由守卫
router.beforeEach((to, from, next) => {
  next();
  // if (to.matched.some((auth) => auth.meta.requireAuth)) {
  //   // èŽ·å–token
  //   let token = getToken();
  //   if (token) {
  //     next();
  //   } else {
  //     next({
  //       path: "/login",
  //     });
  //   }
  // } else {
  //   next();
  // }
});
export default router;

 src/views/Index.vue

@@ -2,13 +2,12 @@
  <div class="body_box">
    <div
      id="cesiumContainer"
      style="width: 100%; height: 100%; position: absolute;"
      style="width: 100%; height: 100%; position: absolute"
    ></div>

    <menus></menus>
    <bottom-btn></bottom-btn>
    <top-btn></top-btn>
    <layer-manage> </layer-manage>
  </div>
</template>

@@ -22,13 +21,11 @@
  defineEmits,
} from "vue";
//左侧菜单
import menus from "@/components/menus.vue";
import menus from "@/views/menus.vue";
//底部菜单
import bottomBtn from "@/components/bottomBtn.vue";
//顶部菜单
import topBtn from "@/components/topBtn.vue";
//图层管理页面
import layerManage from "@/views/layer/layerManage.vue";

import InitMap from "@/assets/js/Map/index.js";


 src/views/login.vue

ÎļþÃû´Ó src/components/login.vue ÐÞ¸Ä
@@ -1,7 +1,7 @@
<template>
  <div class="loginBox">
    <!-- ç²’子特效 -->
    <vue-particles
    <!-- <vue-particles
      color="#dedede"
      :particleOpacity="0.7"
      :particlesNumber="80"
@@ -18,7 +18,7 @@
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles>
    </vue-particles> -->
    <div class="loginEarth">
      <iframe
        id="ifream"
@@ -28,25 +28,21 @@
        v-bind:src="reportUrl"
      ></iframe>
    </div>
    <div class="title_img">
      <h3>月球大数据地理空间分析展示平台</h3>
    </div>
    <div class="loginMenu">
      <div class="login_title">
        <span>用户登录</span>
      </div>
      <el-form
        ref="loginForm"
        class="loginForm"
      >
      <el-form ref="loginForm" class="loginForm">
        <el-form-item prop="uid">
          <el-input
            placeholder="输入登录账号"
            class="nobr"
            size="meddle"
            autocomplete="off"
            :prefix-icon="User"
          >
            <i
              slot="prefix"
              class="el-icon-user"
            ></i>
          </el-input>
        </el-form-item>

@@ -56,11 +52,8 @@
            placeholder="请输入登录密码"
            class="nobr"
            autocomplete="off"
            :prefix-icon="Lock"
          >
            <i
              slot="prefix"
              class="el-icon-lock"
            ></i>
          </el-input>
        </el-form-item>

@@ -74,32 +67,24 @@
            </el-form-item>
          </el-col>

          <el-col
            :span="6"
            align="right"
          >
          <el-col :span="6" align="right"> </el-col>
        </el-form-item>

          </el-col>
        </el-form-item>
        <el-form-item>
          <img alt="" /><span style="color: black">证书安装与添加信任站点</span>
        </el-form-item>
        <el-form-item>
          <img alt="" /><span style="color: black">使用帮助文档</span>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="nobr loginbtn"
            class="nobr loginbtn btnbox"
            @click="setLogin()"
          >登录</el-button>
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup lang='ts'>
<script setup lang="ts">
import router from "@/router";
import { User, Lock } from "@element-plus/icons-vue";
import {
  ref,
  onMounted,
@@ -113,7 +98,7 @@
  reportUrl.value = "/mapscreen/index.html";
};
const setLogin = () => {
  router.push("/index");
  router.push("/");
};

onMounted(() => {
@@ -136,16 +121,18 @@
  }
  .loginMenu {
    position: absolute;
    right: 12%;
    top: 20%;
    right: 16%;
    top: 50%;
    transform: translateY(-50%);
    padding: 40px;
    background: rgba(255, 255, 255, 0.2);
    background: rgba(7, 8, 14, 0.8);
    border: 1px solid #d6e4ff;
    border-radius: 8px;
    .login_title {
      font-size: 25px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #3b4d6e;
      color: #689cff;
    }

    .loginForm {
@@ -170,8 +157,18 @@
    .loginbtn {
      width: 384px;
      height: 50px;
      background: #3b4d6e;
      border-radius: 5px;
    }
  }
  .title_img {
    position: absolute;
    left: 15%;
    top: 8%;
    width: 20%;
    /* transform: translateX(-50%); */
    h3 {
      color: #fff;
      font-size: 40px;
      white-space: nowrap;
    }
  }
}

 src/views/menus.vue

ÎļþÃû´Ó src/components/menus.vue ÐÞ¸Ä
@@ -1,39 +1,32 @@
<template>
  <div class="menus">
    <div class="logo_box">
      <img
        src="../assets/img/logo.png"
        alt=""
        class="logo"
      />
      <img src="../assets/img/logo.png" alt="" class="logo" />
      <div class="logo_name">
        <h3>月球大数据地理空间分析展示平台</h3>
        <img
          src="../assets/img/logob.png"
          alt=""
          class="logo_name_b"
        />
        <img src="../assets/img/logob.png" alt="" class="logo_name_b" />
      </div>
    </div>
    <div class="menus_box">
      <div
        class="imgBox"
        v-for="(item,i) in menuOptions"
        v-for="(item, i) in menuOptions"
        @click="setMenuClick(item)"
      >
        <img
          v-if="checkMenuFlag != item.id"
          class="imgIcon"
          :src="require('../assets/img/leftBtn/'+item.imgUrl)"
        >
          :src="require('../assets/img/leftBtn/' + item.imgUrl)"
        />
        <img
          v-if="checkMenuFlag == item.id"
          class="imgIcon"
          :src="require('../assets/img/leftBtn/'+item.checkImgUrl)"
        >
          :src="require('../assets/img/leftBtn/' + item.checkImgUrl)"
        />
      </div>
    </div>
  </div>
  <layer-manage> </layer-manage>
</template>

<script lang="ts" setup>
@@ -47,9 +40,12 @@
} from "vue";
import menuData from "@/assets/js/Map/menuData";
import menuTool from "@/assets/js/Map/menuTool";
//图层管理页面
import layerManage from "@/views/layer/layerManage.vue";
const menuOptions = ref([]);
const checkMenuFlag = ref("");
const setMenuClick = (res) => {
  console.log(res);
  if (checkMenuFlag.value && checkMenuFlag.value == res.id) {
    checkMenuFlag.value = null;
  } else {

 vue.config.js

@@ -13,12 +13,12 @@
    //proxy: "http://192.168.20.70:8001/"
    // // é…ç½®è·¨åŸŸ-请求后端的代理接口
    proxy: {
      "/abc": {
        target: "http://172.16.2.10:50001/sj_raster/v6/service/10000501/1", //对应自己的接口
      "/TMS": {
        target: "http://192.168.20.39:9055/gisserver/tmsserver/moondom", //对应自己的接口
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/abc": "",
          "^/TMS": "",
        },
      },
    },