From 01f9c88fd0ee768155e5b341c2bb95a85bc11a08 Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Sat, 05 Mar 2022 17:49:36 +0800
Subject: [PATCH] ++
---
src/components/mobilemap/index.vue | 438 +++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 398 insertions(+), 40 deletions(-)
diff --git a/src/components/mobilemap/index.vue b/src/components/mobilemap/index.vue
index 99a655e..4d2bb22 100644
--- a/src/components/mobilemap/index.vue
+++ b/src/components/mobilemap/index.vue
@@ -27,18 +27,24 @@
<!-- 退出活动 -->
<mobileCloseRouterMany></mobileCloseRouterMany>
<!-- 活动窗口 -->
- <!-- <mobileActivity></mobileActivity> -->
+ <mobileActivity></mobileActivity>
<!-- 盖住左下角 -->
- <div class="cover_mobileMap">智慧社区</div>
+ <div class="cover_mobileMap">智慧校区</div>
+ <!-- 指示器 -->
+ <!-- <div class="heights">{{ heights }}---{{ heights1 }}</div> -->
</div>
</template>
<script>
import axios from "axios";
+import { getBuildClock } from "@/api/mobile/buildsClock/buildsClock"; // 楼栋详情
import { mapGetters } from "vuex";
export default {
name: "mobilemapBox",
data() {
return {
+ butbut: null,
+ heights: 0,
+ heights1: 0,
DC: "",
bigPopup: {
width: 0,
@@ -81,6 +87,20 @@
[116.41526036, 27.95352217, 100],
],
areaLayer: null,
+ mapCenter: [115.871863, 28.743861, 400.0],
+ //控制4层缩放
+ onelayerNum: 80,
+ towlayerNum: 120,
+ threelayerNum: 160,
+ forlayerNum: 200,
+ intervallayerNum: 20,
+ frislayertHeight: 160, //默认高度
+ // onelayerNum: 80,
+ // towlayerNum: 200,
+ // threelayerNum: 320,
+ // forlayerNum: 440,
+ // intervallayerNum: 60,
+ // frislayertHeight: 320, //默认高度
};
},
computed: {
@@ -95,6 +115,8 @@
"dimension",
"dimensionData",
"areaLayer", //绿布
+ "areaLayerSelect", //绿布颜色控制
+ "urlParameterData", //url 参数
]),
},
watch: {
@@ -111,6 +133,7 @@
},
},
mounted() {
+ // return;
var DC = global.DC;
this.DC = DC;
@@ -277,13 +300,250 @@
// if (height > 2000) {
// conBack(2000);
// }
- if (height < 0 && isSet) {
- conBack(0);
+ // if (height <= 79 && isSet) {
+ // conBack(79);
+ // }
+ if (height <= that.onelayerNum - 1 && isSet) {
+ conBack(that.onelayerNum - 1);
}
- 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);
+ // }
+ if (height > that.forlayerNum && isSet) {
+ conBack(that.forlayerNum);
}
});
+
+ // 按钮事件
+ let butSetViews = (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, // 定位的时间间隔
+ });
+ // overii();
+ };
+ 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 > 180) {
+ // butSetViews(160);
+ // return;
+ // }
+
+ // if (height > 140) {
+ // butSetViews(120);
+ // return;
+ // }
+
+ // if (height > 100) {
+ // butSetViews(80);
+ // }
+ if (height > that.forlayerNum - that.intervallayerNum) {
+ butSetViews(that.threelayerNum);
+ return;
+ }
+
+ if (height > that.threelayerNum - that.intervallayerNum) {
+ butSetViews(that.towlayerNum);
+ return;
+ }
+
+ if (height > that.towlayerNum - that.intervallayerNum) {
+ butSetViews(that.onelayerNum);
+ }
+ }
+ };
+ //缩小
+ document.querySelector(".dc-zoom-controller").children[2].onclick =
+ function () {
+ if (that.dimension == "2.5D") {
+ const height = Math.ceil(
+ viewer.camera.positionCartographic.height
+ );
+ console.log(height);
+
+ // if (height <= 100) {
+ // butSetViews(120);
+ // }
+
+ // if (height > 100 && height <= 140) {
+ // butSetViews(160);
+ // }
+
+ // if (height > 140 && height < 180) {
+ // butSetViews(200);
+ // }
+
+ if (height <= that.towlayerNum - that.intervallayerNum) {
+ butSetViews(that.towlayerNum);
+ }
+
+ if (
+ height > that.towlayerNum - that.intervallayerNum &&
+ height <= that.threelayerNum - that.intervallayerNum
+ ) {
+ butSetViews(that.threelayerNum);
+ }
+
+ if (
+ height > that.threelayerNum - that.intervallayerNum &&
+ height < that.forlayerNum - that.intervallayerNum
+ ) {
+ butSetViews(that.forlayerNum);
+ }
+ }
+ };
+ //滚轮事件
+ // 指示器
+ 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, // 定位的时间间隔
+ });
+ 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, "see");
+ 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 > 2) {
+ // if (height >= 83 && height < 120) {
+ // setViews(120);
+ // }
+ // if (height >= 123 && height < 160) {
+ // setViews(160);
+ // }
+ // if (height >= 163 && height < 200) {
+ // setViews(200);
+ // }
+ if (
+ height >= that.onelayerNum + 2 &&
+ height < that.towlayerNum
+ ) {
+ setViews(that.towlayerNum);
+ }
+ if (
+ height >= that.towlayerNum + 2 &&
+ height < that.threelayerNum
+ ) {
+ setViews(that.threelayerNum);
+ }
+ if (
+ height >= that.threelayerNum + 2 &&
+ height < that.forlayerNum
+ ) {
+ setViews(that.forlayerNum);
+ }
+ }
+ //放大
+ } 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);
+ // }
+ if (cutHeight < -2) {
+ if (
+ height <= that.forlayerNum &&
+ height > that.threelayerNum - 2
+ ) {
+ setViews(that.threelayerNum);
+ }
+ if (
+ height <= that.threelayerNum - 2 &&
+ height > that.towlayerNum - 2
+ ) {
+ setViews(that.towlayerNum);
+ }
+ if (
+ height <= that.towlayerNum - 2 &&
+ height > that.onelayerNum
+ ) {
+ setViews(that.onelayerNum);
+ }
+ }
+ }
+ }
+ };
+ }
+ });
+ };
// 地图点击事件
// viewer.on(DC.MouseEventType.CLICK, (e) => {
@@ -519,30 +779,29 @@
areaLayer.show = true;
});
that.$store.commit("MSET_areaLayer", areaLayer);
- var select = {
- overlay: undefined,
- color: undefined,
- };
+ // var select = {
+ // overlay: undefined,
+ // color: undefined,
+ // };
viewer.on(that.DC.MouseEventType.CLICK, (e) => {
// console.log(e);
if (e.overlay != undefined && e.layer.id == "areaLayer") {
- if (select.overlay != undefined) {
- if (e.overlay != select.overlay) {
- select.overlay.setStyle({
- material: select.color,
+ if (that.areaLayerSelect.overlay != undefined) {
+ if (e.overlay != that.areaLayerSelect.overlay) {
+ that.areaLayerSelect.overlay.setStyle({
+ material: that.areaLayerSelect.color,
outline: false,
});
- select.overlay = undefined;
- select.color = undefined;
+ that.$store.commit("mset_changeSelect", [undefined, undefined]);
}
}
- if (select.overlay == undefined) {
- select.overlay = e.overlay;
+ if (that.areaLayerSelect.overlay == undefined) {
+ that.areaLayerSelect.overlay = e.overlay;
- select.color = e.overlay._style.material;
- select.overlay.setStyle({
+ that.areaLayerSelect.color = e.overlay._style.material;
+ that.areaLayerSelect.overlay.setStyle({
outline: true,
outlineColor: that.DC.Namespace.Cesium.Color.fromBytes(
3,
@@ -560,29 +819,58 @@
),
});
}
- // 定制化窗体
- that.openPopupS(
- {},
- [e.wgs84SurfacePosition.lng, e.wgs84SurfacePosition.lat],
- {
- name: "楼栋号:" + e.overlay.attr["楼栋号"],
- bgImg:
- "http://223.82.109.183:2081/zhxy/upload/20220105/3c05dd70a9eac17b7e49afbfc7b1b68e.png",
- address: "",
- introduce: "",
- data: e,
- lntLat: [e.wgs84SurfacePosition.lng, e.wgs84SurfacePosition.lat],
- }
- );
+
+ //如果是地图点击建筑，调用接口查详情
+ let ids =
+ e.overlay.attr["楼栋号"] == "8栋"
+ ? "9栋"
+ : e.overlay.attr["楼栋号"] == "9栋"
+ ? "8栋"
+ : e.overlay.attr["楼栋号"];
+ let eIntlat = [
+ e.wgs84SurfacePosition.lng,
+ e.wgs84SurfacePosition.lat,
+ ];
+ getBuildClock({
+ mechanismname: "香琴湾" + ids,
+ }).then((res) => {
+ const item = res.data.data;
+ // data.query.bgImg = ds.mechanismname;
+ // data.query.name = ds.tpurl;
+ // data.query.panoramaurl = ds.panoramaurl;
+ // data.query.bgImg = ds.tpurl;
+ // data.query.bgImg = ds.tpurl;
+ let useData = {
+ name: item.mechanismname,
+ lntLat: eIntlat,
+ alt: item.gd,
+ heading: item.heading,
+ pitch: item.pitch,
+ roll: item.roll,
+ bgImg: item.tpurl,
+ QRImg: item.codeurl,
+ websiteUrl: item.websiteurl,
+ telePhone: item.telephone,
+ address: item.address,
+ introduce: item.introduce,
+ video: item.videourl,
+ buts: ["定位", "实景", "图集"],
+ panoramaurl: item.panoramaurl, //全景
+ fromTo: "mapClick",
+ };
+ // 定制化窗体
+ // console.log(item, useData, "111111");
+ // return;
+ that.openPopupS({}, eIntlat, useData);
+ });
} else {
- if (select.overlay != undefined) {
- select.overlay.setStyle({
- material: select.color,
+ if (that.areaLayerSelect.overlay != undefined) {
+ that.areaLayerSelect.overlay.setStyle({
+ material: that.areaLayerSelect.color,
outline: false,
});
- select.overlay = undefined;
- select.color = undefined;
+ that.$store.commit("mset_changeSelect", [undefined, undefined]);
}
}
});
@@ -614,7 +902,8 @@
};
that.dimension == "2.5D"
? doit2(
- [114.03928791, 27.62954732, 360.0],
+ [that.mapCenter[0], that.mapCenter[1], that.frislayertHeight],
+ // [114.04062292, 27.62666834, 220.0],
[
that.dimensionData.heading,
that.dimensionData.pitch,
@@ -742,6 +1031,11 @@
//判断默认维度
//原本默认是2.5d 改为3d默认时做出改变
if (that.dimension == "2.5D") {
+ that.$store.commit("set_frislayertHeight", that.frislayertHeight); //送入默认弹窗高度
+ that.$store.commit("set_zoomRange", [
+ that.onelayerNum,
+ that.forlayerNum,
+ ]); //送入移动端缩放范围
that.$store.commit("MSET_DIMENSION", "2.5D"); //切换2.5D设置
} else if (that.dimension == "3D") {
// setTimeout((res) => {
@@ -769,6 +1063,8 @@
// });
// }, 2000);
}
+ viewer.scene.screenSpaceCameraController._minimumZoomRate = 1000;
+ viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000;
if (false) {
//镜头改变示例
// viewer.scene.screenSpaceCameraController.enableZoom = false; //控制视角缩放
@@ -795,6 +1091,50 @@
}
DC.ready(initViewer);
+ setTimeout(() => {
+ that.butbut();
+ //判断是否有url参数
+ // console.log(that.urlParameterData);
+ if (typeof that.urlParameterData != "string") {
+ // console.log(that.urlParameterData);
+ that.$store.commit("initurlParameterLayer"); //初始化自定义标签图层
+ if (that.urlParameterData.methods == "goto") {
+ //url有定位的参数
+ // alert(that.urlParameterData.jd);
+ // alert(that.urlParameterData.wd);
+ // 创建标记
+ let dsa = {
+ list: [
+ {
+ name: that.urlParameterData.name || "无标题",
+ jd: that.urlParameterData.jd,
+ wd: that.urlParameterData.wd,
+ },
+ ],
+ clear: true,
+ };
+ that.$store.dispatch("addurlParameterLayerIcon", dsa);
+ // that.flytos(
+ // //飞入标记
+ // +that.urlParameterData.jd + 0.012,
+ // +that.urlParameterData.wd
+ // );
+
+ let d = {
+ position: {},
+ lntLat: [+that.urlParameterData.jd, +that.urlParameterData.wd],
+ query: {
+ introduce: "自定义标签",
+ address: "",
+ ...(that.urlParameterData || {}),
+ lntLat: [+that.urlParameterData.jd, +that.urlParameterData.wd],
+ },
+ useJWD: true, //仅使用经纬度
+ };
+ that.$store.dispatch("setMobileWindows", d);
+ }
+ }
+ }, 0);
},
methods: {
openPopupS(position, lntLat, query) {
@@ -808,6 +1148,16 @@
};
that.$store.dispatch("setMobileWindows", d);
},
+ flytos(jd, wd) {
+ let height = this.frislayertHeight;
+ this.$store.dispatch("mapFlyTo", {
+ lntLat: [jd, wd, height], //114.04020791, 27.62934732
+ heading: 0,
+ pitch: -90,
+ roll: 0,
+ noOpen: true,
+ });
+ },
},
};
</script>
@@ -818,4 +1168,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