From 97277a2c41d80bbf375f88a47e242f1b17602b2b Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期三, 29 十一月 2023 16:53:10 +0800
Subject: [PATCH] 发布管理修改
---
src/components/mapol.vue | 156 +++++++++++++++++++++++++++++++++++----------------
1 files changed, 106 insertions(+), 50 deletions(-)
diff --git a/src/components/mapol.vue b/src/components/mapol.vue
index 27fd561..56a3a30 100644
--- a/src/components/mapol.vue
+++ b/src/components/mapol.vue
@@ -3,20 +3,45 @@
<div style="display: flex">
<div
@click="changeMenulayer"
- class="center CenDiv"
- :class="{ center1: centerFlag }"
+ 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="搴曞浘鍒囨崲"
id="cenBg"
- v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
+ class="mapBaseMap"
></div>
</div>
<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缁村垏鎹�"
id="cenBg"
:class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"
></div>
@@ -34,8 +59,8 @@
<!-- </div>-->
<div
- v-show="$store.state.isNaviget"
class="sindagis-map-compass"
+ style=" bottom: 130px; right: 40px;"
>
<span
class="left"
@@ -95,24 +120,28 @@
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: [imageLayer, vectorLayer],
+ // layers: layerBase,
view: new View({
center: [105.02, 34.9],
zoom: 4,
projection: "EPSG:4326",
- minZoom: 4,
+ minZoom: 5,
}),
controls: defaultControls().extend([
new FullScreen(),
@@ -120,10 +149,38 @@
]),
interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
})
- // var scaleLine = new ScaleLine({
- // units: "metric"
- // });
- // map.addControl(scaleLine);
+
+
+ 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"
+ });
+ map.addControl(scaleLine);
map.on("moveend", function (e) {
console.log(($(window).width() - $(".ol-scale-line-inner").width()) + "px");
@@ -134,7 +191,7 @@
//浜岀淮/涓夌淮鍦板浘鍒囨崲
changeMapType() {
- //
+ //
this.show2DMap = !this.show2DMap;
//浜岀淮
if (this.show2DMap) {
@@ -148,9 +205,10 @@
},
changeMenulayer() {
- this.isActive = !this.isActive
- this.isMenuLayer = !this.isMenuLayer
- this.setLayerVisible()
+ this.$bus.$emit("setChangeBaseMapLayer", {type:'ol',boolen:true})
+ // this.isActive = !this.isActive
+ // this.isMenuLayer = !this.isMenuLayer
+ // this.setLayerVisible()
},
setLayerVisible() {
if (this.isActive == true) {
@@ -229,8 +287,8 @@
display: flex;
flex-direction: column;
justify-content: space-between;
- box-shadow: 3px 3px 6px #666;
- border: 1px solid rgba(204, 204, 204, 0.76);
+ // box-shadow: 3px 3px 6px #666;
+ // border: 1px solid rgba(204, 204, 204, 0.76);
border-radius: 5px;
cursor: pointer;
}
@@ -248,9 +306,9 @@
flex-direction: column;
justify-content: space-between;
}
-.CenDiv:hover {
- border: 1px solid #409eff;
-}
+// .CenDiv:hover {
+// border: 1px solid #409eff;
+// }
.active {
width: 100%;
height: 100%;
@@ -269,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;
@@ -326,36 +383,35 @@
.sindagis-map-compass .right:hover {
background: url("../assets/img/compass.png") -89px -5px / 266px no-repeat;
}
-
+.mapBaseMap {
+ width: 100%;
+ height: 100%;
+ //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