From 6f2fb62fe828bdd74b0cd59b9cbdf6c83559c1b4 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期一, 28 八月 2023 17:44:20 +0800
Subject: [PATCH] 添加二维地图，菜单，图层管理页面修改
---
src/views/baseMapSwitching/baseMapSwitching.vue | 7 +-
src/views/Map/mapView.vue | 44 ++++++++++++++
package.json | 2
src/views/Map/olMap.vue | 31 ++++++++++
src/assets/js/Map/menuTool.js | 8 ++
src/views/plotting/plotting.vue | 2
src/views/menus.vue | 16 +++++
src/assets/js/Map/olMap.js | 27 +++++++++
src/views/layer/layerManage.vue | 7 +
src/views/Index.vue | 23 +++----
src/store/index.ts | 2
11 files changed, 150 insertions(+), 19 deletions(-)
diff --git a/package.json b/package.json
index 58425f3..cbe5e1d 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
"js-base64": "^3.7.5",
"jsencrypt": "^3.3.2",
"mitt": "^3.0.1",
- "ol": "^7.3.0",
+ "ol": "^7.5.1",
"particles.vue3": "^2.9.3",
"terraformer-wkt-parser": "^1.2.1",
"vue": "^3.2.13",
diff --git a/src/assets/js/Map/menuTool.js b/src/assets/js/Map/menuTool.js
index 174db9f..354bb80 100644
--- a/src/assets/js/Map/menuTool.js
+++ b/src/assets/js/Map/menuTool.js
@@ -297,19 +297,27 @@
}
this.oldLeftMenuId = res.id;
+
+
switch (res.id) {
case "l1":
+ store.state.isShowMap = true;
break;
case "l2":
+ store.state.isShowMap = true;
break;
case "l3": //鍦ㄧ嚎鍒跺浘
+ store.state.isShowMap = true;
this.setThematicMap();
break;
case "l4":
+ store.state.isShowMap = true;
break;
case "l5":
+ store.state.isShowMap = false
break;
case "l6":
+ store.state.isShowMap = true;
break;
}
},
diff --git a/src/assets/js/Map/olMap.js b/src/assets/js/Map/olMap.js
new file mode 100644
index 0000000..fc5f47c
--- /dev/null
+++ b/src/assets/js/Map/olMap.js
@@ -0,0 +1,27 @@
+
+import { Map, View } from "ol";//鍦板浘,瑙嗗浘
+import OSM from "ol/source/OSM"; //鍙互鐞嗚В涓烘暟鎹簮,灏辨槸涓�寮犲浘鐗�
+import TileLayer from "ol/layer/Tile"; //鍙互鐞嗚В涓哄浘灞�
+import { fromLonLat } from "ol/proj";//灏嗗潗鏍囦粠缁忓害/绾害杞崲涓轰笉鍚岀殑鎶曞奖銆�
+import XYZ from "ol/source/XYZ"
+const olMap = {
+ initMap() {
+ //google鍦板浘
+ var googleMapLayer = new TileLayer({
+ source: new XYZ({
+ url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}'
+ })
+ });
+
+ var map = new Map({
+ target: "mapView",
+ layers: [googleMapLayer],//AMapLayer, baiduMapLayer
+ view: new View({
+ center: [10997148, 4569099],
+ zoom: 4
+ }),
+ });
+
+ },
+}
+export default olMap;
\ No newline at end of file
diff --git a/src/store/index.ts b/src/store/index.ts
index 38a190b..b115d35 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,5 +1,6 @@
import { createStore } from "vuex";
import { setToken } from "@/utils/auth";
+import { fa } from "element-plus/es/locale";
export default createStore({
state: {
loginCode: "",
@@ -27,6 +28,7 @@
showDetails: false,
},
restLayer: false,
+ isShowMap: true,
},
mutations: {
//鑾峰彇鐧诲綍Code
diff --git a/src/views/Index.vue b/src/views/Index.vue
index cec7aeb..5e5fc7a 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -1,8 +1,6 @@
<template>
<div class="body_box">
- <div id="cesiumContainer">
- </div>
<export-map
v-if="layerExportshow"
@SETexportMap="SETexportMap"
@@ -22,6 +20,13 @@
<details-query v-if="store.state.details.showDetails">
</details-query>
+ <div v-if="store.state.isShowMap">
+ <map-view></map-view>
+ </div>
+ <div v-if="!store.state.isShowMap">
+ <ol-map></ol-map>
+ </div>
+
</div>
</template>
@@ -40,7 +45,8 @@
//搴曢儴鑿滃崟
import bottomBtn from "@/components/bottomBtn.vue";
import exportMap from "./export/exportMap.vue";
-import InitMap from "@/assets/js/Map/index.js";
+import mapView from "@/views/Map/mapView.vue";
+import olMap from "@/views/Map/olMap.vue";
//缁忕含搴︽樉绀�
import mouseMove from "@/components/mouseMove.vue";
//绌洪棿鏌ヨ
@@ -55,17 +61,11 @@
import router from "@/router";
import { useStore } from "vuex"; // 寮曞叆useStore 鏂规硶
-let map;
-var viewer;
const store = useStore(); // 璇ユ柟娉曠敤浜庤繑鍥瀞tore 瀹炰緥
const layerExportshow = ref(false);
const layerSpatialshow = ref(false);
const layerLocationshow = ref(false);
-const init = () => {
- viewer = InitMap.Viewer;
- map = InitMap.sgworld;
- window.setMouseMove(true);
-};
+
//鍏抽棴鐘舵��
const SETexportMap = (res) => {
layerExportshow.value = res;
@@ -115,10 +115,9 @@
router.push("/Login");
}
- InitMap.init3DMap();
- init();
// setCloseNavigatBar();
window.functionForJs = functionForJs;
+ store.state.isShowMap = true;
});
</script>
<style lang="less" scoped>
diff --git a/src/views/Map/mapView.vue b/src/views/Map/mapView.vue
new file mode 100644
index 0000000..03074f3
--- /dev/null
+++ b/src/views/Map/mapView.vue
@@ -0,0 +1,44 @@
+<template>
+ <div
+ id="cesiumContainer"
+ class="cesiumContainer"
+ >
+
+ </div>
+</template>
+
+<script lang="ts" setup>
+import InitMap from "@/assets/js/Map/index.js";
+import {
+ ref,
+ onMounted,
+ onBeforeUnmount,
+ reactive,
+ defineProps,
+ defineEmits,
+ nextTick,
+} from "vue";
+import store from "@/store";
+let map;
+var viewer;
+const init = () => {
+ viewer = InitMap.Viewer;
+ map = InitMap.sgworld;
+ // store.state.restLayer = true;
+};
+onMounted(() => {
+ InitMap.init3DMap();
+ init();
+ window.setLayer();
+ window.setMouseMove(true);
+});
+</script>
+
+<style lang="less" scoped>
+.cesiumContainer {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Map/olMap.vue b/src/views/Map/olMap.vue
new file mode 100644
index 0000000..bb31dca
--- /dev/null
+++ b/src/views/Map/olMap.vue
@@ -0,0 +1,31 @@
+<template>
+ <div
+ id="mapView"
+ class="mapView"
+ ></div>
+</template>
+
+<script lang="ts" setup>
+import olMap from "@/assets/js/Map/olMap";
+import {
+ ref,
+ onMounted,
+ onBeforeUnmount,
+ reactive,
+ defineProps,
+ defineEmits,
+} from "vue";
+onMounted(() => {
+ olMap.initMap();
+});
+</script>
+
+<style lang="less" scoped>
+.mapView {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/baseMapSwitching/baseMapSwitching.vue b/src/views/baseMapSwitching/baseMapSwitching.vue
index 835953d..4120fd6 100644
--- a/src/views/baseMapSwitching/baseMapSwitching.vue
+++ b/src/views/baseMapSwitching/baseMapSwitching.vue
@@ -45,10 +45,9 @@
let list = ref([]);
const activceIndex = ref();
const setProjectionLayerChange = (res) => {
- server.delLayerAll();
- projection.addTreeData(res);
+ // projection.addTreeData(res);
activceIndex.value = res.id;
- store.state.restLayer = true;
+ // store.state.restLayer = true;
};
const getProjectionLayer = async () => {
const data = await perms_selectProjectLayers();
@@ -72,6 +71,8 @@
height: 680px;
background: rgba(7, 8, 14, 0.8);
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
+ z-index: 40;
+ position: absolute;
.baseMapSwitchingTitle {
width: calc(100% - 27px);
height: 42px;
diff --git a/src/views/layer/layerManage.vue b/src/views/layer/layerManage.vue
index e686c42..31ecd80 100644
--- a/src/views/layer/layerManage.vue
+++ b/src/views/layer/layerManage.vue
@@ -110,7 +110,7 @@
const stretchValue = ref("");
let estreeRef = ref();
-
+const setLayer = ref();
const transparence = ref(0);
var treeData = ref([]);
var layerListData = ref([]);
@@ -318,7 +318,9 @@
{ deep: true }
);
getLayer();
-onMounted(() => {});
+onMounted(() => {
+ window.setLayer = getLayer;
+});
</script>
<style lang="less" scoped>
@@ -327,6 +329,7 @@
height: 680px;
background: rgba(7, 8, 14, 0.8);
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
+ z-index: 40;
.layerTitle {
width: calc(100% - 27px);
height: 42px;
diff --git a/src/views/menus.vue b/src/views/menus.vue
index 1add11b..05d6489 100644
--- a/src/views/menus.vue
+++ b/src/views/menus.vue
@@ -95,6 +95,7 @@
reactive,
defineProps,
defineEmits,
+ nextTick,
} from "vue";
import { Operation } from "@element-plus/icons-vue";
import menuData from "@/assets/js/Map/menuData";
@@ -127,11 +128,23 @@
store.state.doubleMenu = true;
store.state.doubleMap = false;
};
+const setShowMapChange = (res) => {
+ switch (res.id) {
+ case "15":
+ debugger;
+ break;
+ default:
+ debugger;
+ break;
+ }
+ // store.state.isShowMap = res;
+};
const setMenuClick = (res) => {
if (res.id == "l6") {
// fullScreen.value = !fullScreen.value;
screen();
}
+
if (res.id == "l3") {
thematicMapState.value = false;
thematicMapBtnState.value = false;
@@ -200,6 +213,7 @@
position: absolute;
top: 27px;
left: 0px;
+ z-index: 40;
.logo_box {
display: flex;
align-items: center;
@@ -232,7 +246,7 @@
top: 105px;
width: 71px;
height: 850px;
-
+ z-index: 40;
.imgBox {
width: 100%;
display: flex;
diff --git a/src/views/plotting/plotting.vue b/src/views/plotting/plotting.vue
index d02be96..ebf2e59 100644
--- a/src/views/plotting/plotting.vue
+++ b/src/views/plotting/plotting.vue
@@ -77,6 +77,8 @@
height: 680px;
background: rgba(7, 8, 14, 0.8);
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
+ z-index: 40;
+ position: absolute;
.plottingTitle {
width: calc(100% - 27px);
height: 42px;
--
Gitblit v1.9.3