From 6e0ef2d1f836680e6a55b7fc2d813b759038c144 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期二, 25 十月 2022 15:35:34 +0800
Subject: [PATCH] 路径规划,底图切换

---
 src/components/mapol.vue |  104 +++++++++++++++++++++++++++++++++++++++++++++------
 1 files changed, 91 insertions(+), 13 deletions(-)

diff --git a/src/components/mapol.vue b/src/components/mapol.vue
index c65c6de..f712116 100644
--- a/src/components/mapol.vue
+++ b/src/components/mapol.vue
@@ -1,17 +1,31 @@
 <template>
-  <div id="mapol"></div>
+  <div id="mapol">
+    <div
+      @click="changeMenulayer"
+      class="center CenDiv"
+      :class="{ center1: centerFlag }"
+    >
+      <div
+        id="cenBg"
+        v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
+      ></div>
+    </div>
+  </div>
 </template>
 
 <script>
-import TileLayer from "ol/layer/Tile";
-import XYZ from "ol/source/XYZ";
-import Map from "ol/Map";
-import View from "ol/View";
-import { transform } from "ol/proj";
+import TileLayer from 'ol/layer/Tile';
+import XYZ from 'ol/source/XYZ';
+import Map from 'ol/Map';
+import View from 'ol/View';
+import { transform } from 'ol/proj';
 export default {
-  name: "",
+  name: '',
   data() {
-    return {};
+    return {
+      isActive: true,
+      isMenuLayer: false,
+    };
   },
   mounted() {
     this.init2DMap();
@@ -20,23 +34,37 @@
     init2DMap() {
       var vectorLayer = new TileLayer({
         source: new XYZ({
-          url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
+          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
         }),
       });
       var imageLayer = 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}",
+          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',
         }),
       });
       window.map = new Map({
-        target: "mapol",
+        target: 'mapol',
         layers: [imageLayer, vectorLayer],
         view: new View({
-          center: transform([105.02, 34.9], "EPSG:4326", "EPSG:3857"),
+          center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),
           zoom: 4,
-          projection: "EPSG:3857",
+          projection: 'EPSG:3857',
         }),
       });
+    },
+    changeMenulayer() {
+      this.isActive = !this.isActive;
+      this.isMenuLayer = !this.isMenuLayer;
+      this.setLayerVisible();
+    },
+    setLayerVisible() {
+      if (this.isActive == true) {
+        map.getLayers().item(0).setVisible(false);
+        map.getLayers().item(1).setVisible(true);
+      } else {
+        map.getLayers().item(0).setVisible(true);
+        map.getLayers().item(1).setVisible(false);
+      }
     },
   },
 };
@@ -51,4 +79,54 @@
   padding: 0;
   position: relative;
 }
+.center {
+  left: 1%;
+}
+.CenDiv {
+  position: absolute;
+  bottom: 1%;
+  height: 40px;
+  width: 60px;
+  z-index: 101;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  box-shadow: 3px 3px 6px #666;
+  border: 1px solid rgba(204, 204, 204, 0.76);
+  border-radius: 5px;
+  cursor: pointer;
+}
+.center1 {
+  right: 1%;
+}
+.right {
+  position: absolute;
+  top: 50px;
+  right: 0;
+  width: 20%;
+  height: calc(100% - 50px);
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.CenDiv:hover {
+  border: 1px solid #409eff;
+}
+.active {
+  width: 100%;
+  height: 100%;
+  background: url('../assets/img/Layer/imgLayer2.png') no-repeat center;
+  position: absolute;
+  background-size: 100% 100%;
+  border-radius: 5px;
+}
+.menuLayer {
+  width: 100%;
+  height: 100%;
+  background: url('../assets/img/Layer/imgLayer1.png') no-repeat center;
+  position: absolute;
+  background-size: 100% 100%;
+  border-radius: 5px;
+}
 </style>

--
Gitblit v1.9.3