From fc1f22df5322aa89ffcf60040b01eff0451df3a3 Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期三, 07 六月 2023 17:56:05 +0800
Subject: [PATCH] 页面样式调整，功能调整
---
src/assets/js/Map/index.js | 289 +++++++++++-----------
vue.config.js | 6
package-lock.json | 98 +++---
src/views/menus.vue | 26 -
src/views/Index.vue | 7
src/main.ts | 1
src/assets/js/Map/server.js | 62 ++--
src/views/login.vue | 71 ++--
src/assets/css/global.css | 18 +
src/components/topBtn.vue | 73 ++++-
src/router/index.ts | 26 +
src/App.vue | 4
src/assets/js/Map/config.js | 26 +-
postcss.config.js | 36 +-
src/components/bottomBtn.vue | 22 +
15 files changed, 420 insertions(+), 345 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 571a066..67c9437 100644
--- a/package-lock.json
+++ b/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": {
diff --git a/postcss.config.js b/postcss.config.js
index d828404..e49b26a 100644
--- a/postcss.config.js
+++ b/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, // 濡傛灉璁剧疆浜唅nclude锛岄偅灏嗗彧鏈夊尮閰嶅埌鐨勬枃浠舵墠浼氳杞崲
- 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, // 濡傛灉璁剧疆浜唅nclude锛岄偅灏嗗彧鏈夊尮閰嶅埌鐨勬枃浠舵墠浼氳杞崲
+ landscape: false, // 鏄惁娣诲姞鏍规嵁 landscapeWidth 鐢熸垚鐨勫獟浣撴煡璇㈡潯浠� @media (orientation: landscape)
+ landscapeUnit: "vw", // 妯睆鏃朵娇鐢ㄧ殑鍗曚綅
+ landscapeWidth: 1366, // 妯睆鏃朵娇鐢ㄧ殑瑙嗗彛瀹藉害
},
+ },
};
diff --git a/src/App.vue b/src/App.vue
index b4baf58..a9db5c9 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/assets/css/global.css b/src/assets/css/global.css
index b51e146..f8a823e 100644
--- a/src/assets/css/global.css
+++ b/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;
}
\ No newline at end of file
diff --git a/src/assets/js/Map/config.js b/src/assets/js/Map/config.js
index 30957fd..6d0b0d5 100644
--- a/src/assets/js/Map/config.js
+++ b/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;
\ No newline at end of file
+ //妞悆浣撳垵濮嬪寲鍔犺浇鍥剧墖
+ 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;
diff --git a/src/assets/js/Map/index.js b/src/assets/js/Map/index.js
index 0e4e025..985855d 100644
--- a/src/assets/js/Map/index.js
+++ b/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);
- // 灏哅oon2000鍧愭爣绯荤殑绗涘崱灏斿潗鏍囪浆鎹负缁忕含搴﹀潗鏍�
- 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);
+ // 灏哅oon2000鍧愭爣绯荤殑绗涘崱灏斿潗鏍囪浆鎹负缁忕含搴﹀潗鏍�
+ const moonPosition = Cesium.Cartographic.fromCartesian(moonCartesian3);
+ // 杈撳嚭杞崲鍚庣殑缁忕含搴﹀潗鏍囧拰楂樺害
+ console.log(moonPosition);
+ },
};
export default InitMap;
diff --git a/src/assets/js/Map/server.js b/src/assets/js/Map/server.js
index fce49f4..435295b 100644
--- a/src/assets/js/Map/server.js
+++ b/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;
\ No newline at end of file
+ //娣诲姞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;
diff --git a/src/components/bottomBtn.vue b/src/components/bottomBtn.vue
index e7173c5..d56a088 100644
--- a/src/components/bottomBtn.vue
+++ b/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;
diff --git a/src/components/topBtn.vue b/src/components/topBtn.vue
index e51214e..ad62ff9 100644
--- a/src/components/topBtn.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/main.ts b/src/main.ts
index 5e5ee19..a6fdf86 100644
--- a/src/main.ts
+++ b/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);
diff --git a/src/router/index.ts b/src/router/index.ts
index e0b2e18..80dc851 100644
--- a/src/router/index.ts
+++ b/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;
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 7bd0519..936ea97 100644
--- a/src/views/Index.vue
+++ b/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";
diff --git a/src/components/login.vue b/src/views/login.vue
similarity index 75%
rename from src/components/login.vue
rename to src/views/login.vue
index 66a38c8..228f626 100644
--- a/src/components/login.vue
+++ b/src/views/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;
}
}
}
diff --git a/src/components/menus.vue b/src/views/menus.vue
similarity index 80%
rename from src/components/menus.vue
rename to src/views/menus.vue
index 253d2b3..7e2f774 100644
--- a/src/components/menus.vue
+++ b/src/views/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 {
diff --git a/vue.config.js b/vue.config.js
index b51b2ff..417d7dc 100644
--- a/vue.config.js
+++ b/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": "",
},
},
},
--
Gitblit v1.9.3