From e40ee62d3e9b71ffe3432d32a53a00c4097b5708 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Fri, 31 Dec 2021 09:03:28 +0800
Subject: [PATCH] +3d 2.5d
---
src/components/mobilemap/index.vue | 128 +++++++++++++++----------
src/store/getters.js | 1
src/store/modules/mobile.js | 65 ++++++++++++-
src/components/mobileCortrol/index.vue | 40 ++++++-
src/components/mobileGoTo/index.vue | 39 ++++++-
5 files changed, 198 insertions(+), 75 deletions(-)
diff --git a/src/components/mobileCortrol/index.vue b/src/components/mobileCortrol/index.vue
index f4236f4..f377287 100644
--- a/src/components/mobileCortrol/index.vue
+++ b/src/components/mobileCortrol/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="m-left-control">
- <div class="m-l-inbut zoom-in" @click="zoomIn">
+ <div class="m-l-inbut zoom-in" @click="zoomIn()">
<i class="el-icon-refresh"></i>
</div>
<div
@@ -8,7 +8,7 @@
:class="{ active: dimension == '2D' }"
@click="zoomIn('2D')"
>
- 2D
+ 3D
</div>
<div
class="m-l-inbut zoom-in m-l-inbut-3d"
@@ -48,7 +48,9 @@
// noOpen: true,
// });
if (val) {
- this.$store.dispatch("MSET_DIMENSIONS", val);
+ if (this.dimension != val) {
+ this.$store.dispatch("MSET_DIMENSIONS", val);
+ }
return;
}
this.startPointFn();
@@ -58,6 +60,11 @@
</script>
<style scoped lang='scss'>
+@property --color {
+ syntax: "<color>";
+ inherits: false;
+ initial-value: 25%;
+}
.m-left-control {
position: fixed;
left: 20px;
@@ -81,18 +88,33 @@
position: relative;
top: 60px;
font-size: 16px;
- &:hover {
- background-color: rgb(21, 136, 230);
- box-shadow: -2px -2px 3px rgb(3, 74, 136) inset;
- }
+ // &:hover {
+ // background-color: rgb(21, 136, 230);
+ // box-shadow: -2px -2px 3px rgb(3, 74, 136) inset;
+ // }
}
.m-l-inbut-3d {
@extend .m-l-inbut-2d;
top: 55px;
}
+
.active {
- background-color: rgb(72, 157, 226);
- box-shadow: -2px -2px 3px rgb(16, 93, 161) inset;
+ // background-color: rgb(92, 181, 255);
+ box-shadow: -4px -4px 10px rgb(13, 98, 167) inset;
+ // color: rgb(0, 0, 0);
+ // box-shadow: -4px -4px 10px rgb(13, 98, 167) inset;
+
+ // position: relative;
+ // &::before {
+ // top: 1px;
+ // left: 1px;
+ // position: absolute;
+ // content: "";
+ // width: 100%;
+ // height: 100%;
+ // box-shadow: -2px -2px 15px rgb(4, 95, 170) inset;
+ // // border: 1px solid rgb(14, 54, 87);
+ // }
}
}
</style>
diff --git a/src/components/mobileGoTo/index.vue b/src/components/mobileGoTo/index.vue
index 9122866..3aaf38a 100644
--- a/src/components/mobileGoTo/index.vue
+++ b/src/components/mobileGoTo/index.vue
@@ -1,7 +1,9 @@
<template>
<div v-show="openmobileGoTo" class="mobileGoTo">
- <el-input v-model="lnt"></el-input>
- <el-input v-model="lat"></el-input>
+ <el-input v-model="height"></el-input>
+ <el-input v-model="heading"></el-input>
+ <el-input v-model="pitch"></el-input>
+ <el-input v-model="roll"></el-input>
<!-- <el-input v-model="alt"></el-input> -->
<el-button type="primary" @click="submitForm('')">跳转</el-button>
</div>
@@ -18,6 +20,8 @@
"query",
"MobileWindowChangeData",
"ccDataState",
+ "perspectiveControls",
+ "perspectiveControl",
]),
},
data() {
@@ -25,6 +29,10 @@
lnt: "121.53772514948211",
lat: "31.23938286341316",
alt: "90.648862227",
+ height: 800,
+ heading: 0,
+ pitch: -45,
+ roll: 0,
};
},
watch: {
@@ -36,21 +44,34 @@
this.lnt = this.query.lntLat[0];
this.lat = this.query.lntLat[1];
},
+ perspectiveControls() {
+ this.height = this.perspectiveControl.height;
+ this.heading = this.perspectiveControl.heading;
+ this.pitch = this.perspectiveControl.pitch;
+ this.roll = this.perspectiveControl.roll;
+ },
},
methods: {
submitForm() {
if (this.lnt && this.lat) {
let that = this;
// 定制化窗体
- let position = {};
- let lntLat = [that.lnt, that.lat];
+ // let position = {};
+ // let lntLat = [that.lnt, that.lat];
+ // let d = {
+ // position,
+ // lntLat,
+ // query: { position, lntLat },
+ // useJWD: true, //仅使用经纬度
+ // };
+ // that.$store.dispatch("setMobileWindows", d);
let d = {
- position,
- lntLat,
- query: { position, lntLat },
- useJWD: true, //仅使用经纬度
+ height: this.height,
+ heading: this.heading,
+ pitch: this.pitch,
+ roll: this.roll,
};
- that.$store.dispatch("setMobileWindows", d);
+ that.$store.dispatch("MSET_GOTOCC", d);
}
},
},
diff --git a/src/components/mobilemap/index.vue b/src/components/mobilemap/index.vue
index 70a3c30..94dcfca 100644
--- a/src/components/mobilemap/index.vue
+++ b/src/components/mobilemap/index.vue
@@ -47,6 +47,7 @@
"popupsDom",
"MobileWindowsHideFixed",
"dimension",
+ "dimensionData",
]),
},
watch: {
@@ -200,35 +201,40 @@
// console.log(height);
});
+ // viewer.on(that.DC.SceneEventType.CAMERA_MOVE_END, (e) => {
viewer.on(that.DC.SceneEventType.CAMERA_CHANGED, (e) => {
+ //相机移动最后参数
//控制高度
const height = Math.ceil(viewer.camera.positionCartographic.height);
- let orientation = {
- heading: that.DC.Namespace.Cesium.Math.toRadians(0), // 方向
- pitch: that.DC.Namespace.Cesium.Math.toRadians(
- that.dimension == "2D" ? -90 : that.dimension == "2.5D" ? -45 : -45
- ), // 倾斜角度
- roll: 0,
+ let conBack = (height) => {
+ viewer.camera.setView({
+ destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ viewer.camera.positionCartographic.longitude,
+ viewer.camera.positionCartographic.latitude,
+ height
+ ),
+ orientation: {
+ heading: that.DC.Namespace.Cesium.Math.toRadians(
+ that.dimensionData.heading
+ ), // 方向
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(
+ that.dimensionData.pitch
+ ), // 倾斜角度
+ roll: that.dimensionData.roll,
+ },
+ });
};
- if (height < 300) {
- viewer.camera.setView({
- destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
- viewer.camera.positionCartographic.longitude,
- viewer.camera.positionCartographic.latitude,
- 300
- ),
- orientation: orientation,
- });
+ // if (height < 300) {
+ // conBack(300);
+ // }
+ // if (height > 2000) {
+ // conBack(2000);
+ // }
+ if (height < 500) {
+ conBack(500);
}
- if (height > 2000) {
- viewer.camera.setView({
- destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
- viewer.camera.positionCartographic.longitude,
- viewer.camera.positionCartographic.latitude,
- 2000
- ),
- orientation: orientation,
- });
+ if (height > 6000) {
+ conBack(6000);
}
});
@@ -276,15 +282,16 @@
//白模型↑
//精细模型↓
- // const tilesetLayer = new that.DC.TilesetLayer("tilesetLayer");
- // viewer.addLayer(tilesetLayer);
- // const tileset = new that.DC.Tileset(
- // "http://data.mars3d.cn/3dtiles/max-shihua/tileset.json",
- // {
- // luminanceAtZenith: 0.5,
- // }
- // );
- // tilesetLayer.addOverlay(tileset);
+ const tilesetLayer = new that.DC.TilesetLayer("tilesetLayer");
+ viewer.addLayer(tilesetLayer);
+ const tileset = new that.DC.Tileset(
+ "http://data.mars3d.cn/3dtiles/max-shihua/tileset.json",
+ {
+ luminanceAtZenith: 0.5,
+ }
+ );
+ tilesetLayer.addOverlay(tileset);
+ // tilesetLayer.show = false;
//精细模型↑
// 2.5D贴图↓
@@ -325,6 +332,19 @@
// 2.5D贴图↑
let startPoint;
if (false) {
+ startPoint = () => {
+ viewer.flyTo(tileset);
+ // that.$store.dispatch("mapFlyTo", {
+ // //飞入
+ // lntLat: [115.87988885, 28.72502592, 2100],
+ // // lntLat: [115.87186406, 28.74449337, 1200],
+ // // lntLat: [121.50492752204283, 31.21567802276832, 2530],
+ // heading: 0,
+ // pitch: -45,
+ // roll: 0,
+ // noOpen: true,
+ // });
+ };
setTimeout((res) => {
//转圈
that.$store.dispatch("mapFlyTo", {
@@ -344,26 +364,14 @@
// roll: 0,
// noOpen: true,
// });
- startPoint = () => {
- that.$store.dispatch("mapFlyTo", {
- //飞入
- lntLat: [115.87988885, 28.72502592, 2100],
- // lntLat: [115.87186406, 28.74449337, 1200],
- // lntLat: [121.50492752204283, 31.21567802276832, 2530],
- heading: 0,
- pitch: -45,
- roll: 0,
- noOpen: true,
- });
- };
+
startPoint();
},
});
// viewer.flyTo(tileset);
}, 2500);
} else {
- startPoint = (val) => {
- console.log(val);
+ startPoint = () => {
// viewer.zoomToPosition(
// new DC.Position(115.86798885, 28.72502592, 2100, 0, -45)
// );
@@ -377,16 +385,18 @@
),
orientation: {
// 指向
- heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ heading: that.DC.Namespace.Cesium.Math.toRadians(
+ that.dimensionData.heading
+ ),
// 视角
pitch: that.DC.Namespace.Cesium.Math.toRadians(
- val == "2D" ? -90 : val == "2.5D" ? -45 : -45
+ that.dimensionData.pitch
),
- roll: 0.0,
+ roll: that.dimensionData.roll,
},
});
};
- startPoint(that.dimension);
+ startPoint();
}
//传递默认位置
that.$store.commit("MSET_MORENWEIZHI", startPoint);
@@ -474,11 +484,25 @@
viewer.distanceLegend.enable = false;
if (true) {
// viewer.scene.screenSpaceCameraController.enableZoom = false; //控制视角缩放
- viewer.scene.screenSpaceCameraController.enableTilt = false; //控制视角旋转
+ // viewer.scene.screenSpaceCameraController.enableTilt = false; //控制视角旋转
// viewer.scene.screenSpaceCameraController.minimumZoomDistance = 200; //最小缩放
// viewer.scene.screenSpaceCameraController.maximumZoomDistance = 1900; //最大缩放
// 2D和哥伦布视图
// 控制视角平移：scene.screenSpaceCameraController.enableTranslate = true;
+ // 最小
+ viewer.scene.screenSpaceCameraController.minimumZoomDistance = 500;
+ // 最大
+ viewer.scene.screenSpaceCameraController.maximumZoomDistance = 6000;
+ // 设置相机缩小时的速率
+ viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000;
+ // 设置相机放大时的速率
+ viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000;
+ // 视角平移
+ viewer.scene.screenSpaceCameraController.enableRotate = true;
+ // 视角缩放
+ viewer.scene.screenSpaceCameraController.enableZoom = true;
+ // 视角旋转
+ viewer.scene.screenSpaceCameraController.enableTilt = false;
}
}
diff --git a/src/store/getters.js b/src/store/getters.js
index 29f0986..df7ad6d 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -17,6 +17,7 @@
MobileWindowChangeDataFixed: state => state.mobile.MobileWindowChangeDataFixed, // 固定窗口
startPointFn: state => state.mobile.startPointFn,// 默认起始点位置
dimension: state => state.mobile.dimension,// 维度
+ dimensionData: state => state.mobile.dimensionData,// 维度镜头数据
perspectiveControl: state => state.mobile.perspectiveControl,///视角控制：高度、角度 ()=>{}
}
diff --git a/src/store/modules/mobile.js b/src/store/modules/mobile.js
index 2350f45..b106fc0 100644
--- a/src/store/modules/mobile.js
+++ b/src/store/modules/mobile.js
@@ -30,8 +30,14 @@
},
//默认起始点函数
startPointFn: '',
- dimension: "2D",// 维度
+ dimension: "2.5D",// 维度
+ dimensionData: {// 维度镜头数据
+ heading: 0,
+ pitch: -90,
+ roll: 0
+ },
perspectiveControl: '',//视角控制：高度、角度 ()=>{}
+ perspectiveControls: '',//视角控制：高度、角度 ()=>{}
},
mutations: {
MSET_VIEWER(state, viewer) {
@@ -96,11 +102,25 @@
//切换2D和2.5D
MSET_DIMENSION(state, data) {
state.dimension = data;
+ if (data == "2D") {
+ state.dimensionData = {// 维度镜头数据
+ heading: 0,
+ pitch: -90,
+ roll: 0
+ };
+ } else if (data == "2.5D") {
+ state.dimensionData = {// 维度镜头数据
+ heading: 0,
+ pitch: -90,
+ roll: 0
+ };
+ }
},
//切换控制
MSET_PERSPECTIVECONTROL(state, data) {
state.perspectiveControl = data;
- }
+ state.perspectiveControls = !state.perspectiveControls;
+ },
},
actions: {
MSET_CREADE({ state, commit, dispatch }) {
@@ -111,12 +131,12 @@
// 关闭前一个弹窗？
dispatch("closeMobileWindowsDom");
let clas, Flys;
-
+ const nowHeight = Math.ceil(state.mviewer.camera.positionCartographic.height);
if (state.dimension == "2D") {
Flys = [
+data.lntLat[0] + 0.01197,
+data.lntLat[1] - 0.0001,
- 330,
+ nowHeight,
]
clas = [
data.from == "PopupOurOnce" ? +data.lntLat[0] : +data.lntLat[0],
@@ -190,7 +210,7 @@
// 330,
...Flys,
0,
- state.dimension == "2D" ? -90 : state.dimension == "2.5D" ? -45 : -45
+ state.dimensionData.pitch
);
dispatch("mapFlyTo", {//飞入
lntLat: [Position.lng, Position.lat, Position.alt],
@@ -332,6 +352,41 @@
},
MSET_DIMENSIONS({ state, commit, dispatch }, val) {
commit("MSET_DIMENSION", val);
+ //控制高度
+ const height = Math.ceil(state.mviewer.camera.positionCartographic.height);
+ state.mviewer.camera.setView({
+ destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ state.mviewer.camera.positionCartographic.longitude,
+ state.mviewer.camera.positionCartographic.latitude,
+ height
+ ),
+ orientation: {
+ heading: global.DC.Namespace.Cesium.Math.toRadians(state.dimensionData.heading), // 方向
+ pitch: global.DC.Namespace.Cesium.Math.toRadians(
+ state.dimensionData.pitch
+ ), // 倾斜角度
+ roll: state.dimensionData.roll,
+ },
+ });
+ },
+ MSET_GOTOCC({ state, commit, dispatch }, val) {
+ // commit("MSET_DIMENSION", val);
+ //控制高度
+ // const height = Math.ceil(state.mviewer.camera.positionCartographic.height);
+ state.mviewer.camera.setView({
+ destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ state.mviewer.camera.positionCartographic.longitude,
+ state.mviewer.camera.positionCartographic.latitude,
+ val.height
+ ),
+ orientation: {
+ heading: global.DC.Namespace.Cesium.Math.toRadians(val.heading), // 方向
+ pitch: global.DC.Namespace.Cesium.Math.toRadians(
+ val.pitch
+ ), // 倾斜角度
+ roll: val.roll,
+ },
+ });
}
}
}
--
Gitblit v1.9.3