|
|
@@ -1,44 +1,30 @@
|
|
|
<template>
|
|
|
<div id="cesiumContainer">
|
|
|
<!-- <div class="get_now_camera_view">
|
|
|
- <van-button @click="getNowCameraPosition"> 当前视角 </van-button>
|
|
|
+ <van-button @click="consoleCameraPosition"> 当前视角 </van-button>
|
|
|
<van-button @click="setViewDefaultlocation"> 复位 </van-button>
|
|
|
- </div> -->
|
|
|
- <!-- <el-dialog
|
|
|
- title="提示"
|
|
|
- :visible.sync="dialogVisible"
|
|
|
- width="30%"
|
|
|
- :before-close="hideInfoDailog"
|
|
|
- >
|
|
|
- <span>{{ dialogInfoStr }}</span>
|
|
|
- <span slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="hideInfoDailog">关 闭</el-button>
|
|
|
- <el-button :class="'copy_info_dialog'" type="primary">复 制</el-button>
|
|
|
- </span>
|
|
|
- </el-dialog> -->
|
|
|
- <!-- get-container="body" -->
|
|
|
- <Tool></Tool>
|
|
|
+ </div>
|
|
|
<van-popup
|
|
|
- v-model="dialogVisible"
|
|
|
- round
|
|
|
+ v-model:show="dialogVisible"
|
|
|
:style="{ height: '50%', width: '80%' }"
|
|
|
:closed="hideInfoDailog"
|
|
|
>
|
|
|
<div>
|
|
|
- <span>{{ dialogInfoStr }}</span>
|
|
|
+ <div style="font-size: 16px">{{ dialogInfoStr }}</div>
|
|
|
<van-button @click="hideInfoDailog">关 闭</van-button>
|
|
|
<van-button :class="'copy_info_dialog'" type="primary">
|
|
|
复 制
|
|
|
</van-button>
|
|
|
</div>
|
|
|
- </van-popup>
|
|
|
+ </van-popup> -->
|
|
|
+
|
|
|
+ <Tool></Tool>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
// import Clipboard from "clipboard";
|
|
|
import { defineAsyncComponent } from "vue";
|
|
|
-// import Tool from "@/components/Tool.vue";
|
|
|
import Water from "@/utils/Water";
|
|
|
|
|
|
export default {
|
|
|
@@ -135,6 +121,7 @@ export default {
|
|
|
},
|
|
|
created() {},
|
|
|
mounted() {
|
|
|
+ let that = this;
|
|
|
// this.clipboard = new Clipboard(".copy_info_dialog", {
|
|
|
// // 点击copy按钮，直接通过text直接返回复印的内容
|
|
|
// text: function () {
|
|
|
@@ -149,8 +136,12 @@ export default {
|
|
|
this.mainFunc();
|
|
|
// camera范围限制
|
|
|
this.bindLimitCameraFunc();
|
|
|
+
|
|
|
// 取消滑动事件
|
|
|
this.controlCZ(false);
|
|
|
+
|
|
|
+ // 自定义滑动事件
|
|
|
+ this.wetherScroll(this.changeCamera);
|
|
|
});
|
|
|
});
|
|
|
|
|
|
@@ -163,6 +154,14 @@ export default {
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
+ consoleCameraPosition() {
|
|
|
+ this.getNowCameraPosition().then((result) => {
|
|
|
+ this.showInfoDailog(
|
|
|
+ JSON.stringify(result.result).replaceAll("{", "").replaceAll("}", "")
|
|
|
+ );
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
initViewer() {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
globalVariable.viewer = new Cesium.Viewer("cesiumContainer", {
|
|
|
@@ -235,25 +234,118 @@ export default {
|
|
|
this.addTree();
|
|
|
},
|
|
|
|
|
|
- bindCameraNo() {
|
|
|
- globalVariable.viewer.scene.preUpdate.addEventListener(this.cameraddte);
|
|
|
- },
|
|
|
- unbindCamera() {
|
|
|
- globalVariable.viewer.scene.preUpdate.removeEventListener(this.cameraddte);
|
|
|
+ // bindCameraNo() {
|
|
|
+ // globalVariable.viewer.scene.preUpdate.addEventListener(this.cameraddte);
|
|
|
+ // },
|
|
|
+ // unbindCamera() {
|
|
|
+ // globalVariable.viewer.scene.preUpdate.removeEventListener(
|
|
|
+ // this.cameraddte
|
|
|
+ // );
|
|
|
+ // },
|
|
|
+ // cameraddte() {
|
|
|
+ // // 获取当前位置，当前方向，强制禁止X轴、Y轴
|
|
|
+ // var heading = Cesium.Math.toDegrees(globalVariable.viewer.camera.heading);
|
|
|
+ // var pitch = Cesium.Math.toDegrees(globalVariable.viewer.camera.pitch); //Cesium.Math.toDegrees作用是把弧度转换成度数
|
|
|
+ // var roll = Cesium.Math.toDegrees(globalVariable.viewer.camera.roll);
|
|
|
+
|
|
|
+ // var positionCartesian = globalVariable.viewer.camera.position;
|
|
|
+ // // var position = Cesium.Cartographic.fromCartesian(positionCartesian);
|
|
|
+ // // var lon = Cesium.Math.toDegrees(position.longitude);
|
|
|
+ // // var lat = Cesium.Math.toDegrees(position.latitude);
|
|
|
+ // // var h = globalVariable.viewer.camera.positionCartographic.height;
|
|
|
+ // globalVariable.viewer.camera.setView({
|
|
|
+ // destination: positionCartesian, //赤道上空1000km高度
|
|
|
+ // orientation: {
|
|
|
+ // heading: Cesium.Math.toRadians(heading), // 相机方向指向当地东向
|
|
|
+ // pitch: 0.0, // 再将相机方向转向地心，此时Up方向指向当地东向
|
|
|
+ // roll: 0.0,
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+
|
|
|
+ changeCamera(direction) {
|
|
|
+ switch (direction) {
|
|
|
+ case "left":
|
|
|
+ globalVariable.viewer.camera.lookLeft((Math.PI / 180) * 2);
|
|
|
+ break;
|
|
|
+
|
|
|
+ case "right":
|
|
|
+ globalVariable.viewer.camera.lookRight((Math.PI / 180) * 2);
|
|
|
+ break;
|
|
|
+
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
- cameraddte() {
|
|
|
- globalVariable.viewer.camera
|
|
|
- // 获取当前位置，当前方向，强制禁止X轴、Y轴
|
|
|
+ wetherScroll(func) {
|
|
|
+ let startX = 0;
|
|
|
+ let startY = 0;
|
|
|
+ let endX = 0;
|
|
|
+ let endY = 0;
|
|
|
+ let distanceX = 0;
|
|
|
+ let distanceY = 0;
|
|
|
+ let body = document.getElementsByTagName("body")[0];
|
|
|
+ var clientHeight = document.documentElement.clientHeight;
|
|
|
+ var clientWidth = document.documentElement.clientWidth;
|
|
|
+ body.addEventListener("touchstart", function (event) {
|
|
|
+ var touch = event.targetTouches[0];
|
|
|
+ //滑动起点的坐标
|
|
|
+ startX = touch.pageX;
|
|
|
+ startY = touch.pageY;
|
|
|
+ // console.log("startX:"+startX+","+"startY:"+startY);
|
|
|
+ });
|
|
|
+ body.addEventListener("touchmove", function (event) {
|
|
|
+ var touch = event.targetTouches[0];
|
|
|
+ //手势滑动时，手势坐标不断变化，取最后一点的坐标为最终的终点坐标
|
|
|
+ endX = touch.pageX;
|
|
|
+ endY = touch.pageY;
|
|
|
+ distanceX = endX - startX;
|
|
|
+ distanceY = endY - startY;
|
|
|
+ if (startX != Math.abs(distanceX)) {
|
|
|
+ //在滑动的距离超过屏幕高度的20%时，做某种操作
|
|
|
+ if (Math.abs(distanceX) > clientWidth * 0.05) {
|
|
|
+ //向下滑实行函数someAction1，向上滑实行函数someAction2
|
|
|
+ //向左滑实行函数someAction1，向右滑实行函数someAction2
|
|
|
+ distanceX < 0 ? func("left") : func("right");
|
|
|
+ startX = endX;
|
|
|
+ startY = endY;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log("endX:"+endX+","+"endY:"+endY);
|
|
|
+ });
|
|
|
+ body.addEventListener("touchend", function (event) {
|
|
|
+ // distanceX = endX - startX;
|
|
|
+ // distanceY = endY - startY;
|
|
|
+ // // console.log("distanceX:"+distanceX+","+"distanceY:"+distanceY);
|
|
|
+ // //移动端设备的屏幕宽度
|
|
|
+ // var clientHeight = document.documentElement.clientHeight;
|
|
|
+ // // console.log(clientHeight;*0.2);
|
|
|
+ // //判断是否滑动了，而不是屏幕上单击了
|
|
|
+ // if (startY != Math.abs(distanceY)) {
|
|
|
+ // //在滑动的距离超过屏幕高度的20%时，做某种操作
|
|
|
+ // if (Math.abs(distanceY) > clientHeight * 0.2) {
|
|
|
+ // //向下滑实行函数someAction1，向上滑实行函数someAction2
|
|
|
+ // distanceY < 0 ? someAction1() : someAction2();
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ startX = 0;
|
|
|
+ startY = 0;
|
|
|
+ endX = 0;
|
|
|
+ endY = 0;
|
|
|
+ distanceX = 0;
|
|
|
+ distanceY = 0;
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
// 禁用/开启 操作
|
|
|
controlCZ(bool) {
|
|
|
- globalVariable.viewer.scene.screenSpaceCameraController.enableLook = true;
|
|
|
-
|
|
|
- globalVariable.viewer.scene.screenSpaceCameraController.enableRotate = true;
|
|
|
- globalVariable.viewer.scene.screenSpaceCameraController.enableTilt = true;
|
|
|
- globalVariable.viewer.scene.screenSpaceCameraController.enableTranslate = true;
|
|
|
+ globalVariable.viewer.scene.screenSpaceCameraController.enableLook = bool;
|
|
|
+ globalVariable.viewer.scene.screenSpaceCameraController.enableRotate =
|
|
|
+ bool;
|
|
|
+ globalVariable.viewer.scene.screenSpaceCameraController.enableTilt = bool;
|
|
|
+ globalVariable.viewer.scene.screenSpaceCameraController.enableTranslate =
|
|
|
+ bool;
|
|
|
globalVariable.viewer.scene.screenSpaceCameraController.enableZoom = bool;
|
|
|
},
|
|
|
|
|
|
@@ -592,6 +684,7 @@ export default {
|
|
|
|
|
|
// 地图（模型上）左击事件
|
|
|
singleClick2() {
|
|
|
+ let that = this;
|
|
|
var handler = new Cesium.ScreenSpaceEventHandler(
|
|
|
globalVariable.viewer.scene.canvas
|
|
|
);
|
|
|
@@ -613,12 +706,14 @@ export default {
|
|
|
lat:${lat}
|
|
|
height:${height}
|
|
|
`;
|
|
|
- console.log(
|
|
|
+ that.showInfoDailog(
|
|
|
JSON.stringify({
|
|
|
lon: lon,
|
|
|
lat: lat,
|
|
|
h: height,
|
|
|
})
|
|
|
+ .replaceAll("{", "")
|
|
|
+ .replaceAll("}", "")
|
|
|
);
|
|
|
}
|
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
wandequan