From d91f0dfcd2ef95fb3624d94ade24fe69a9169a58 Mon Sep 17 00:00:00 2001 From: 13693261870 <252740454@qq.com> Date: 星期日, 04 二月 2024 15:15:00 +0800 Subject: [PATCH] Merge branch 'master' of http://192.168.20.92:8888/r/P2022036_Web2 --- src/components/mapol.vue | 137 ++++++++++++++++++++++++++++----------------- 1 files changed, 85 insertions(+), 52 deletions(-) diff --git a/src/components/mapol.vue b/src/components/mapol.vue index 35e0c43..56a3a30 100644 --- a/src/components/mapol.vue +++ b/src/components/mapol.vue @@ -3,7 +3,18 @@ <div style="display: flex"> <div @click="changeMenulayer" - class="center CenDiv" + class="changeLayer" + style=" position: absolute; + bottom: 84px; + right: 46px; + height: 30px; + width: 30px; + z-index: 101; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + border: 1px solid rgba(255, 255, 255, 0.5);" > <div title="搴曞浘鍒囨崲" @@ -15,6 +26,19 @@ <div @click="changeMapType" class="changeMapType" + v-if="$store.state.setChangeBaseMap" + style=" position: absolute; + + bottom: 52px; + right: 46px; + height: 30px; + width: 30px; + z-index: 101; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + border: 1px solid rgba(255, 255, 255, 0.5);" > <div title="2/3缁村垏鎹�" @@ -35,8 +59,8 @@ <!-- </div>--> <div - v-show="$store.state.isNaviget" class="sindagis-map-compass" + style=" bottom: 130px; right: 40px;" > <span class="left" @@ -96,19 +120,23 @@ methods: { 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}", - // }), - // }) - // 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}", - // }), - // }) + var layerBase = []; + // if (!is_production) { + // 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}", + // }), + // }) + // 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}", + // }), + // }) + // layerBase = [vectorLayer, imageLayer] + // } window.map = new Map({ target: "mapol", - layers: [], + // layers: layerBase, view: new View({ center: [105.02, 34.9], zoom: 4, @@ -122,23 +150,37 @@ interactions: defaultInteractions().extend([new DragRotateAndZoom()]), }) - window.olBaseMapLayer = new TileLayer({ - title: "楂樺痉鍦板浘", - source: new XYZ({ - url: gaoDeBaseUrl[1].url, - wrapX: false + + if (is_production) { + var base_ulr = window.sceneConfig.baseUrl; + if (base_ulr.indexOf('{host}') > -1) { + base_ulr = base_ulr.replace("{host}", iisHost) + } + window.olBaseMapLayer = new TileLayer({ + title: "楂樺痉鍦板浘", + source: new XYZ({ + url: base_ulr, + wrapX: false + }) + }); + window.map.addLayer(window.olBaseMapLayer); + } else { + window.olBaseMapLayer = 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}", + }), }) + window.map.addLayer(window.olBaseMapLayer); + } + + + + + + var scaleLine = new ScaleLine({ + units: "metric" }); - window.map.addLayer(window.olBaseMapLayer); - - - - - - // var scaleLine = new ScaleLine({ - // units: "metric" - // }); - // map.addControl(scaleLine); + map.addControl(scaleLine); map.on("moveend", function (e) { console.log(($(window).width() - $(".ol-scale-line-inner").width()) + "px"); @@ -149,7 +191,7 @@ //浜岀淮/涓夌淮鍦板浘鍒囨崲 changeMapType() { - // + // this.show2DMap = !this.show2DMap; //浜岀淮 if (this.show2DMap) { @@ -163,7 +205,7 @@ }, changeMenulayer() { - this.$bus.$emit("setChangeBaseMapLayer", true) + this.$bus.$emit("setChangeBaseMapLayer", {type:'ol',boolen:true}) // this.isActive = !this.isActive // this.isMenuLayer = !this.isMenuLayer // this.setLayerVisible() @@ -285,14 +327,13 @@ } .ol-scale-line { bottom: 55px !important; + right: 130px !important; } .sindagis-map-compass { position: absolute; - right: 50px; - bottom: 90px; + z-index: 5; - right: 25px; width: 52px; height: 54px; background: url("../assets/img/compass.png") 0% 0% / 266px no-repeat; @@ -345,40 +386,32 @@ .mapBaseMap { width: 100%; height: 100%; - margin-left: 10px; - background-image: url("../assets/img/synthesis/搴曞浘.png"); + //margin-left: 10px; + background-image: url("../assets/img/basemap.png"); + //background-image: url("../assets/img/synthesis/搴曞浘.png"); background-repeat: no-repeat; background-size: contain; } .changeMapType { - position: absolute; - bottom: 1%; - left: calc(1% + 75px); - height: 40px; - width: 60px; - z-index: 101; - display: flex; - justify-content: center; - align-items: center; - // box-shadow: 3px 3px 6px #666; - border-radius: 5px; - // background: #fff; - cursor: pointer; } .mapTypeTwo { width: 100%; height: 100%; - margin-left: 10px; - background-image: url("../assets/img/synthesis/3D.png"); + //margin-left: 10px; + background-image: url("../assets/img/3D.png"); + //background-image: url("../assets/img/synthesis/3D.png"); background-repeat: no-repeat; background-size: contain; } .mapTypeThree { width: 100%; height: 100%; - margin-left: 10px; - background-image: url("../assets/img/synthesis/2D 鎷疯礉 2.png"); + //margin-left: 10px; + background-image: url("../assets/img/2D.png"); + //background-image: url("../assets/img/synthesis/2D 鎷疯礉 2.png"); background-repeat: no-repeat; background-size: contain; } +.changeLayer { +} </style> -- Gitblit v1.9.3