From c1514cfc69b679d05398bb1def6b24c772426aa0 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期二, 14 二月 2023 09:11:46 +0800
Subject: [PATCH] 综合展示图层管理图标切换
---
src/components/mapol.vue | 138 +++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 136 insertions(+), 2 deletions(-)
diff --git a/src/components/mapol.vue b/src/components/mapol.vue
index fe89722..1a78887 100644
--- a/src/components/mapol.vue
+++ b/src/components/mapol.vue
@@ -9,16 +9,35 @@
id="cenBg"
v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
></div>
+
+ </div>
+ <div v-show="$store.state.isNaviget" class="sindagis-map-compass">
+ <span
+ class="left"
+ @click="leftClick"
+ ></span>
+ <span
+ class="center"
+ @click="recoveryClick"
+ :style="{transform: `rotate(${rotate}deg)`}"
+ ></span>
+ <span
+ class="right"
+ @click="rightClick"
+ ></span>
</div>
</div>
</template>
<script>
+
+import { easeOut } from 'ol/easing'
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 {
OverviewMap,
defaults as defaultControls,
@@ -37,6 +56,8 @@
centerFlag: false,
isActive: true,
isMenuLayer: false,
+ rotate: 0,
+ currentDir: ''
}
},
mounted() {
@@ -64,10 +85,20 @@
}),
controls: defaultControls().extend([
new FullScreen(),
- new ScaleLine(),
+
]),
interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
})
+ // var scaleLine = new ScaleLine({
+ // units: "metric"
+ // });
+ // map.addControl(scaleLine);
+
+ map.on("moveend", function (e) {
+ console.log(($(window).width() - $(".ol-scale-line-inner").width()) + "px");
+ // $(".ol-scale-line").css("left", ($(window).width() - $(".ol-scale-line").width() - 25) + "px");
+ });
+
},
changeMenulayer() {
@@ -84,11 +115,54 @@
map.getLayers().item(1).setVisible(false)
}
},
+ leftClick() {
+ var view = map.getView();
+ var center = map.getView().getCenter();
+ var rotation = map.getView().getRotation();
+ rotation = rotation - Math.PI / 2
+ this.rotate -= 90
+ view.animate({
+ center: center, //鏃嬭浆涓績鐐�
+ rotation: rotation,
+ easing: easeOut //鏃嬭浆閫熷害
+ })
+ this.currentDir = 'left'
+ },
+ recoveryClick() {
+ var view = map.getView();
+ var center = map.getView().getCenter();
+ let a = this.rotate % 360 // -270
+ if (a != 0) { // 澶嶄綅
+ let dis = 360 - Math.abs(a)
+ let dis1 = Math.abs(a)
+ dis = dis > dis1 ? dis1 : dis
+ if (dis == 180) dis = -180
+ this.rotate = (this.rotate + dis) % 360 == 0 ? this.rotate + dis : this.rotate - dis
+ }
+ view.animate({
+ center: center,
+ rotation: 0,
+ easing: easeOut
+ })
+ },
+ rightClick() {
+ var view = map.getView();
+ var center = map.getView().getCenter();
+ var rotation = map.getView().getRotation();
+ rotation = rotation + Math.PI / 2
+ this.rotate += 90
+ view.animate({
+ center: center,
+ rotation: rotation,
+ easing: easeOut
+ })
+ this.currentDir = 'right'
+ },
},
}
</script>
-<style scoped>
+<style lang="scss" scoped>
#mapol {
width: 100%;
height: 100%;
@@ -147,4 +221,64 @@
background-size: 100% 100%;
border-radius: 5px;
}
+.ol-scale-line {
+ bottom: 55px !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;
+}
+
+.sindagis-map-compass .left,
+.sindagis-map-compass .center,
+.sindagis-map-compass .right {
+ position: absolute;
+ outline: none;
+ border: none;
+ cursor: pointer;
+ opacity: 1;
+}
+
+.sindagis-map-compass .left {
+ background: url("../assets/img/compass.png") -75px -5px / 266px no-repeat;
+ left: 2px;
+ top: 5px;
+ z-index: 1;
+ width: 15px;
+ height: 42px;
+}
+
+.sindagis-map-compass .left:hover {
+ background: url("../assets/img/compass.png") -89px -5px / 266px no-repeat;
+}
+
+.sindagis-map-compass .center {
+ background: url("../assets/img/compass.png") -56px -4px / 266px no-repeat;
+ left: 19px;
+ top: 4px;
+ width: 14px;
+ height: 44px;
+ transform: rotate(0deg);
+ transition: 1s;
+}
+.sindagis-map-compass .right {
+ background: url("../assets/img/compass.png") -75px -5px / 266px no-repeat;
+ right: 2px;
+ top: 5px;
+ z-index: 1;
+ width: 15px;
+ height: 42px;
+ transform: scaleX(-1);
+}
+.sindagis-map-compass .right:hover {
+ background: url("../assets/img/compass.png") -89px -5px / 266px no-repeat;
+}
+
</style>
--
Gitblit v1.9.3