添加二维地图，菜单，图层管理页面修改

Surpriseplus

2023-08-28 6f2fb62fe828bdd74b0cd59b9cbdf6c83559c1b4

添加二维地图，菜单，图层管理页面修改

 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",

 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;
    }
  },

 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;

 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

 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(); // è¯¥æ–¹æ³•ç”¨äºŽè¿”回store å®žä¾‹
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>

 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>

 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>

 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;

 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;

 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;

 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;