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