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 | 331 +++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 299 insertions(+), 32 deletions(-)
diff --git a/src/components/mapol.vue b/src/components/mapol.vue
index fe89722..56a3a30 100644
--- a/src/components/mapol.vue
+++ b/src/components/mapol.vue
@@ -1,24 +1,93 @@
<template>
<div id="mapol">
- <div
- @click="changeMenulayer"
- class="center CenDiv"
- :class="{ center1: centerFlag }"
- >
+ <div style="display: flex">
<div
- id="cenBg"
- v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
- ></div>
+ @click="changeMenulayer"
+ 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"
+ 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>
+ </div>
+ </div>
+ <!-- <div-->
+ <!-- @click="changeMenulayer"-->
+ <!-- class="center CenDiv"-->
+ <!-- :class="{ center1: centerFlag }"-->
+ <!-- >-->
+ <!-- <div-->
+ <!-- id="cenBg"-->
+ <!-- v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"-->
+ <!-- ></div>-->
+
+ <!-- </div>-->
+ <div
+ class="sindagis-map-compass"
+ style=" bottom: 130px; right: 40px;"
+ >
+ <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,43 +106,109 @@
centerFlag: false,
isActive: true,
isMenuLayer: false,
+ rotate: 0,
+ currentDir: '',
+ show2DMap: false,
}
},
mounted() {
- this.init2DMap()
+ this.init2DMap();
+ this.$bus.$on('changemapType', (e) => {
+ this.show2DMap = e;
+ });
},
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: transform([105.02, 34.9], "EPSG:4326", "EPSG:3857"),
+ center: [105.02, 34.9],
zoom: 4,
- projection: "EPSG:3857",
+ projection: "EPSG:4326",
+ minZoom: 5,
}),
controls: defaultControls().extend([
new FullScreen(),
- new ScaleLine(),
+
]),
interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
})
+
+
+ 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");
+ // $(".ol-scale-line").css("left", ($(window).width() - $(".ol-scale-line").width() - 25) + "px");
+ });
+
+ },
+
+ //浜岀淮/涓夌淮鍦板浘鍒囨崲
+ changeMapType() {
+ //
+ this.show2DMap = !this.show2DMap;
+ //浜岀淮
+ if (this.show2DMap) {
+ this.$bus.$emit("changemap", 2);
+ }
+ //涓夌淮
+ else {
+ this.$bus.$emit("changemap", 3);
+ }
+ this.$bus.$emit("changemapType", this.show2DMap);
},
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) {
@@ -84,11 +219,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%;
@@ -109,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;
}
@@ -128,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%;
@@ -147,4 +325,93 @@
background-size: 100% 100%;
border-radius: 5px;
}
+.ol-scale-line {
+ bottom: 55px !important;
+ right: 130px !important;
+}
+
+.sindagis-map-compass {
+ position: absolute;
+
+ z-index: 5;
+ 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;
+}
+.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 {
+}
+.mapTypeTwo {
+ width: 100%;
+ height: 100%;
+ //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/2D.png");
+ //background-image: url("../assets/img/synthesis/2D 鎷疯礉 2.png");
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+.changeLayer {
+}
</style>
--
Gitblit v1.9.3