From 0fa88f9c2e3c8ce335e7cd6dfc6c8e5641950735 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Wed, 09 Feb 2022 15:53:24 +0800
Subject: [PATCH] +弹窗图片可点击，列表展示文字区域点击是定位，图片可点击，+活动打开后隐藏右侧控制栏，+操作方式更改
---
src/components/mobileWindow/index.vue | 8 +
src/components/mobilemap/index.vue | 136 ++++++++++++++++----------
src/components/mobileActivity/index.vue | 2
src/components/mobilePopupOurAfter/index.vue | 2
src/styles/mobile/popup.scss | 1
src/components/mobileLeftNav/index.vue | 24 ++++
src/store/getters.js | 1
src/store/modules/mobile.js | 60 +++++++----
src/components/mobilePopupOurOnce/index.vue | 15 ++-
9 files changed, 161 insertions(+), 88 deletions(-)
diff --git a/src/components/mobileActivity/index.vue b/src/components/mobileActivity/index.vue
index f579db8..a0bb2c6 100644
--- a/src/components/mobileActivity/index.vue
+++ b/src/components/mobileActivity/index.vue
@@ -305,6 +305,8 @@
this.$store.commit("removePolylineMany");
//关闭随地图弹窗
this.$store.dispatch("closeMobileWindowsDom");
+ //显示右侧栏
+ this.$store.commit("SET_SeeAndNotSee", true);
},
checkDom(methods, name, fn) {
// 声明定时器
diff --git a/src/components/mobileLeftNav/index.vue b/src/components/mobileLeftNav/index.vue
index 1c75245..20103b1 100644
--- a/src/components/mobileLeftNav/index.vue
+++ b/src/components/mobileLeftNav/index.vue
@@ -1,5 +1,5 @@
<template>
- <div class="m-left-nav" :style="[navStyle]">
+ <div :class="['m-left-nav', seeRight ? '' : 'nones']" :style="[navStyle]">
<!-- :style="[coutrolStyle]" -->
<div class="m-left-coutrol" @click="changeIconHide">
<i :class="icons"></i>
@@ -44,9 +44,26 @@
this.imgStyle.right = "0";
}
},
+ seeRight() {
+ if (this.seeRight) {
+ this.leftNavData[0].flag = false;
+ this.leftNavData[0].img = this.leftNavData[0].checked;
+ this[this.leftNavData[0].layer].show = true;
+ } else {
+ let lnd = this.leftNavData;
+ for (let k in lnd) {
+ if (this[this.leftNavData[k].layer]._show) {
+ // console.log(lnd[k].label, "所有开启");
+ this.leftNavData[k].flag = false;
+ this.leftNavData[k].img = this.leftNavData[k].normal;
+ this[this.leftNavData[k].layer].show = false;
+ }
+ }
+ }
+ },
},
computed: {
- ...mapGetters(["iconHide", "dimensionData"]),
+ ...mapGetters(["iconHide", "dimensionData", "seeRight"]),
},
data() {
return {
@@ -475,4 +492,7 @@
}
}
}
+.nones {
+ display: none;
+}
</style>
diff --git a/src/components/mobilePopupOurAfter/index.vue b/src/components/mobilePopupOurAfter/index.vue
index 20028e5..4b1d5f4 100644
--- a/src/components/mobilePopupOurAfter/index.vue
+++ b/src/components/mobilePopupOurAfter/index.vue
@@ -261,6 +261,8 @@
openBigPopup(val) {
if (val.name == "活动" && !this.useHD) {
this.openHDPopup(this.avtivityData[0][0]);
+ //隐藏右侧栏
+ this.$store.commit("SET_SeeAndNotSee", false);
return;
}
const d = {
diff --git a/src/components/mobilePopupOurOnce/index.vue b/src/components/mobilePopupOurOnce/index.vue
index 097ce3b..f69923c 100644
--- a/src/components/mobilePopupOurOnce/index.vue
+++ b/src/components/mobilePopupOurOnce/index.vue
@@ -8,18 +8,23 @@
}"
>
<div class="mobilePopupOurOnce_left">
- <img :src="icon" alt="" :key="icon" />
+ <!-- <img :src="icon" alt="" :key="icon" /> -->
<el-image
- style="width: 100px; height: 100px"
+ style="width: 80px; height: 80px"
:src="icon"
:id="'mobileBigImgs' + icon + ''"
- v-show="false"
:preview-src-list="srcList"
>
+ <!-- v-show="false" -->
</el-image>
</div>
- <div class="mobilePopupOurOnce_right">
- <div class="mobilePopupOurOnce_r_up">{{ onceData.name }}</div>
+ <div class="mobilePopupOurOnce_right" @click.self.stop="openOnce('定位')">
+ <div
+ class="mobilePopupOurOnce_r_up"
+ @click.self.stop="openOnce('定位')"
+ >
+ {{ onceData.name }}
+ </div>
<div class="mobilePopupOurOnce_r_down">
<div v-for="(item, index) in seebut" :key="index">
<el-link
diff --git a/src/components/mobileWindow/index.vue b/src/components/mobileWindow/index.vue
index a9ba440..a44e4a3 100644
--- a/src/components/mobileWindow/index.vue
+++ b/src/components/mobileWindow/index.vue
@@ -31,14 +31,16 @@
<i class="el-icon-close icon" @click="closeWindow"></i>
</div>
<video :src="video" controls="controls" autoplay v-if="video"></video>
- <img :src="url" alt="" v-show="url && !video" />
+ <!-- <img :src="url" alt="" v-show="url && !video" /> -->
+ <!-- style="width: 100px; height: 100px" -->
<el-image
- style="width: 100px; height: 100px"
+ class="imgs"
:src="url"
id="mobileBigImgs"
- v-show="false"
+ v-show="url && !video"
:preview-src-list="srcList"
>
+ <!-- v-show="false" -->
</el-image>
<!-- <div>{{ query.query }}</div> -->
<div class="mobileBig-center-our" v-show="!video">
diff --git a/src/components/mobilemap/index.vue b/src/components/mobilemap/index.vue
index f177910..a41a9ae 100644
--- a/src/components/mobilemap/index.vue
+++ b/src/components/mobilemap/index.vue
@@ -31,7 +31,7 @@
<!-- 盖住左下角 -->
<div class="cover_mobileMap">智慧社区</div>
<!-- 指示器 -->
- <!-- <div class="heights">{{ heights }}---{{ heights1 }}</div> -->
+ <div class="heights">{{ heights }}---{{ heights1 }}</div>
</div>
</template>
<script>
@@ -284,8 +284,8 @@
// if (height > 2000) {
// conBack(2000);
// }
- if (height <= 190 && isSet) {
- conBack(190);
+ if (height <= 79 && isSet) {
+ conBack(79);
}
// if (height > 220 && height <= 280 && isSet) {
// conBack(280);
@@ -296,8 +296,8 @@
// if (height > 340 && height <= 400 && isSet) {
// conBack(400);
// }
- if (height > 400 && isSet) {
- conBack(400);
+ if (height > 200 && isSet) {
+ conBack(200);
}
});
@@ -431,29 +431,43 @@
// 指示器
var ii = 1,
startHeight = 0,
- cutHeight = 0;
- let overii = function () {
- ii = 1;
- startHeight = 0;
- cutHeight = 0;
- };
- let setViews = (num) => {
- viewer.camera.setView({
- destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
- viewer.camera.positionCartographic.longitude,
- viewer.camera.positionCartographic.latitude,
- num
- ),
- orientation: {
- // 指向
- heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
- // 视角
- pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
- roll: 0.0,
- },
- });
- overii();
- };
+ cutHeight = 0,
+ overii = function () {
+ ii = 1;
+ startHeight = 0;
+ cutHeight = 0;
+ },
+ setViews = (num) => {
+ viewer.camera.flyTo({
+ destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ viewer.camera.positionCartographic.longitude,
+ viewer.camera.positionCartographic.latitude,
+ num
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0,
+ },
+ duration: 0.5, // 定位的时间间隔
+ });
+ // that.$store.dispatch("mapFlyTo", {
+ // //飞入
+ // lntLat: [
+ // viewer.camera.positionCartographic.longitude,
+ // viewer.camera.positionCartographic.latitude,
+ // num,
+ // ],
+ // heading: 0,
+ // pitch: -90,
+ // roll: 0.0,
+ // noOpen: true,
+ // });
+ overii();
+ },
+ isCameraTime = null;
viewer.on(that.DC.SceneEventType.CAMERA_CHANGED, (e) => {
if (that.dimension == "2.5D") {
// console.log(e);
@@ -468,35 +482,49 @@
that.heights = height;
that.heights1 = cutHeight;
// return;
- if (ii != 1) {
- if (cutHeight >= 0) {
- if (cutHeight > 3) {
- if (height >= 200 && height < 270) {
- setViews(270);
+ if (isCameraTime) {
+ clearTimeout(isCameraTime);
+ isCameraTime = setTimeout(() => {
+ takes();
+ isCameraTime = null;
+ }, 200);
+ } else {
+ isCameraTime = setTimeout(() => {
+ takes();
+ isCameraTime = null;
+ }, 200);
+ }
+ let takes = () => {
+ if (ii != 1) {
+ if (cutHeight >= 0) {
+ if (cutHeight > 3) {
+ if (height >= 83 && height < 120) {
+ setViews(120);
+ }
+ if (height >= 123 && height < 160) {
+ setViews(160);
+ }
+ if (height >= 163 && height < 200) {
+ setViews(200);
+ }
}
- if (height >= 273 && height < 330) {
- setViews(330);
- }
- if (height >= 333 && height < 400) {
- setViews(400);
- }
- }
- //放大
- } else {
- //缩小
- if (cutHeight < -3) {
- if (height <= 400 && height > 327) {
- setViews(330);
- }
- if (height <= 327 && height > 267) {
- setViews(270);
- }
- if (height <= 267 && height > 200) {
- setViews(200);
+ //放大
+ } else {
+ //缩小
+ if (cutHeight < -3) {
+ if (height <= 200 && height > 157) {
+ setViews(160);
+ }
+ if (height <= 157 && height > 117) {
+ setViews(120);
+ }
+ if (height <= 117 && height > 80) {
+ setViews(80);
+ }
}
}
}
- }
+ };
}
});
};
@@ -857,7 +885,7 @@
};
that.dimension == "2.5D"
? doit2(
- [114.03928791, 27.62954732, 200.0],
+ [114.04020791, 27.62934732, 160.0],
// [114.04062292, 27.62666834, 220.0],
[
that.dimensionData.heading,
diff --git a/src/store/getters.js b/src/store/getters.js
index a9348c2..6ee1b17 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -33,6 +33,7 @@
showActivity: (state) => state.mobile.showActivity, // 显影活动弹窗
showActivityData: (state) => state.mobile.showActivityData, // 活动弹窗数据
isOpenDrawALineMany: (state) => state.mobile.isOpenDrawALineMany, // 显影活动弹窗
+ seeRight: (state) => state.mobile.seeRight, // 右侧控制栏显影
};
const navigation = {
diff --git a/src/store/modules/mobile.js b/src/store/modules/mobile.js
index 2df62a2..6a2d88c 100644
--- a/src/store/modules/mobile.js
+++ b/src/store/modules/mobile.js
@@ -75,6 +75,7 @@
drawALineLayerMany: null, //活动路线图层
drawAPointLayerMany: null, //活动点图层
isOpenDrawALineMany: null, //是否开启活动
+ seeRight: true, //右侧控制栏显影
},
mutations: {
MSET_VIEWER(state, viewer) {
@@ -224,9 +225,9 @@
state.startPointFn(); //移动默认视角
state.areaLayer.show = true; //绿布
//2.5D视角限制
- state.mviewer.scene.screenSpaceCameraController.minimumZoomDistance = 190;
+ state.mviewer.scene.screenSpaceCameraController.minimumZoomDistance = 80;
// 最大
- state.mviewer.scene.screenSpaceCameraController.maximumZoomDistance = 400;
+ state.mviewer.scene.screenSpaceCameraController.maximumZoomDistance = 200;
// 设置相机缩小时的速率
state.mviewer.scene.screenSpaceCameraController._minimumZoomRate = 2000;
// 设置相机放大时的速率
@@ -335,6 +336,9 @@
state.select.overlay = data[0];
state.select.color = data[1];
},
+ SET_SeeAndNotSee(state, data) {
+ state.seeRight = data;
+ },
},
actions: {
MSET_CREADE({ state, commit, dispatch }) {
@@ -437,6 +441,7 @@
// console.log(state.dimension);
if (state.dimension != "2.5D") {
// if (true) {
+ // if (true) {
dispatch("mapFlyTo", {
//飞入
lntLat: [Position.lng, Position.lat, Position.alt],
@@ -445,28 +450,35 @@
roll: Position.roll,
});
} else {
- state.mviewer.camera.setView({
- // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
- // fromDegrees()方法，将经纬度和高程转换为世界坐标
- destination: new global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
- // 114.0351,
- // 27.6314,
- // 200.0
- Position.lng - 0.012,
- Position.lat,
- Position.alt || 15000.0
- ),
- orientation: {
- heading: global.DC.Namespace.Cesium.Math.toRadians(
- Position.heading
- ),
- pitch: global.DC.Namespace.Cesium.Math.toRadians(Position.pitch),
- // heading: data.heading,
- // pitch: data.pitch,
- roll: Position.roll,
- },
+ dispatch("mapFlyTo", {
+ //飞入
+ lntLat: [Position.lng, +Position.lat - 0.0003, 160],
+ heading: Position.heading,
+ pitch: Position.pitch,
+ roll: Position.roll,
});
- commit("MSET_MOBILEWINDOWSHIDE", false); // 显示弹窗
+ // state.mviewer.camera.setView({
+ // // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
+ // // fromDegrees()方法，将经纬度和高程转换为世界坐标
+ // destination: new global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
+ // // 114.0351,
+ // // 27.6314,
+ // // 200.0
+ // Position.lng - 0.012,
+ // Position.lat - 0.0003,
+ // Position.alt || 15000.0
+ // ),
+ // orientation: {
+ // heading: global.DC.Namespace.Cesium.Math.toRadians(
+ // Position.heading
+ // ),
+ // pitch: global.DC.Namespace.Cesium.Math.toRadians(Position.pitch),
+ // // heading: data.heading,
+ // // pitch: data.pitch,
+ // roll: Position.roll,
+ // },
+ // });
+ // commit("MSET_MOBILEWINDOWSHIDE", false); // 显示弹窗
}
// })
commit("MSET_POPUPDOM", popupsDom);
@@ -540,7 +552,7 @@
// 自定义回调
setTimeout(() => {
data.fn();
- }, 500);
+ }, 200);
}
if (!data.noOpen) {
setTimeout(() => {
diff --git a/src/styles/mobile/popup.scss b/src/styles/mobile/popup.scss
index 3b283b5..a50f19e 100644
--- a/src/styles/mobile/popup.scss
+++ b/src/styles/mobile/popup.scss
@@ -101,6 +101,7 @@
width: 100%;
height: 100%;
}
+ .imgs,
img {
margin-left: calc(50% - 35px);
width: 70px;
--
Gitblit v1.9.3