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/mobilemap/index.vue | 264 +++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 259 insertions(+), 5 deletions(-)
diff --git a/src/components/mobilemap/index.vue b/src/components/mobilemap/index.vue
index 8c377cd..a41a9ae 100644
--- a/src/components/mobilemap/index.vue
+++ b/src/components/mobilemap/index.vue
@@ -30,6 +30,8 @@
<mobileActivity></mobileActivity>
<!-- 盖住左下角 -->
<div class="cover_mobileMap">智慧社区</div>
+ <!-- 指示器 -->
+ <div class="heights">{{ heights }}---{{ heights1 }}</div>
</div>
</template>
<script>
@@ -40,6 +42,9 @@
name: "mobilemapBox",
data() {
return {
+ butbut: null,
+ heights: 0,
+ heights1: 0,
DC: "",
bigPopup: {
width: 0,
@@ -279,13 +284,250 @@
// if (height > 2000) {
// conBack(2000);
// }
- if (height < 0 && isSet) {
- conBack(0);
+ if (height <= 79 && isSet) {
+ conBack(79);
}
- if (height > 4000 && isSet) {
- conBack(4000);
+ // if (height > 220 && height <= 280 && isSet) {
+ // conBack(280);
+ // }
+ // if (height > 280 && height <= 340 && isSet) {
+ // conBack(340);
+ // }
+ // if (height > 340 && height <= 400 && isSet) {
+ // conBack(400);
+ // }
+ if (height > 200 && isSet) {
+ conBack(200);
}
});
+
+ // 按钮事件
+ that.butbut = function () {
+ //放大
+ document.querySelector(".dc-zoom-controller").children[0].onclick =
+ function () {
+ if (that.dimension == "2.5D") {
+ const height = Math.ceil(
+ viewer.camera.positionCartographic.height
+ );
+
+ if (height > 360) {
+ viewer.camera.setView({
+ destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ viewer.camera.positionCartographic.longitude,
+ viewer.camera.positionCartographic.latitude,
+ 330
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0,
+ },
+ });
+
+ return;
+ }
+
+ if (height > 300) {
+ viewer.camera.setView({
+ destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ viewer.camera.positionCartographic.longitude,
+ viewer.camera.positionCartographic.latitude,
+ 270
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0,
+ },
+ });
+
+ return;
+ }
+
+ if (height > 240) {
+ viewer.camera.setView({
+ destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ viewer.camera.positionCartographic.longitude,
+ viewer.camera.positionCartographic.latitude,
+ 200
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0,
+ },
+ });
+ }
+ }
+ };
+ //缩小
+ document.querySelector(".dc-zoom-controller").children[2].onclick =
+ function () {
+ if (that.dimension == "2.5D") {
+ const height = Math.ceil(
+ viewer.camera.positionCartographic.height
+ );
+
+ if (height <= 240) {
+ viewer.camera.setView({
+ destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ viewer.camera.positionCartographic.longitude,
+ viewer.camera.positionCartographic.latitude,
+ 270
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0,
+ },
+ });
+ }
+
+ if (height > 240 && height <= 300) {
+ viewer.camera.setView({
+ destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ viewer.camera.positionCartographic.longitude,
+ viewer.camera.positionCartographic.latitude,
+ 330
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0,
+ },
+ });
+ }
+
+ if (height > 300 && height < 360) {
+ viewer.camera.setView({
+ destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ viewer.camera.positionCartographic.longitude,
+ viewer.camera.positionCartographic.latitude,
+ 400
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0,
+ },
+ });
+ }
+ }
+ };
+ //滚轮事件
+ // 指示器
+ var ii = 1,
+ startHeight = 0,
+ 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);
+ const height = Math.ceil(viewer.camera.positionCartographic.height);
+ if (ii == 1 && startHeight == 0) {
+ startHeight = height;
+ }
+ ii++;
+ cutHeight = height - startHeight;
+ // console.log(cutHeight);
+ console.log(height);
+ that.heights = height;
+ that.heights1 = cutHeight;
+ // return;
+ 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);
+ }
+ }
+ //放大
+ } 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);
+ }
+ }
+ }
+ }
+ };
+ }
+ });
+ };
// 地图点击事件
// viewer.on(DC.MouseEventType.CLICK, (e) => {
@@ -643,7 +885,8 @@
};
that.dimension == "2.5D"
? doit2(
- [114.03928791, 27.62954732, 360.0],
+ [114.04020791, 27.62934732, 160.0],
+ // [114.04062292, 27.62666834, 220.0],
[
that.dimensionData.heading,
that.dimensionData.pitch,
@@ -826,6 +1069,9 @@
}
DC.ready(initViewer);
+ setTimeout(() => {
+ that.butbut();
+ }, 0);
},
methods: {
openPopupS(position, lntLat, query) {
@@ -849,4 +1095,12 @@
height: 100%;
position: relative;
}
+.heights {
+ background-color: #fff;
+ font-size: 24px;
+ position: fixed;
+ top: 0;
+ right: 0;
+ z-index: 9999999;
+}
</style>
--
Gitblit v1.9.3