<template>
|
<div
|
class="mouseBox"
|
@setMouseMove="setMouseMove"
|
>
|
<div class="earthImage"></div>
|
<div class="earthLable">经度 : </div>
|
<div class="earthLable"> {{ longitude }}</div>
|
<div class="earthLable">纬度 : </div>
|
<div class="earthLable"> {{ latitude }}</div>
|
<div class="earthLable">分辨率 : </div>
|
<div class="earthLable"> {{ rate }}</div>
|
<div class="earthLable"> m/px</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
} from "vue";
|
const longitude = ref("0.00");
|
const latitude = ref("0.00");
|
const rate = ref("0.00");
|
const setMouseMove = (res) => {
|
let handlerPoint = new SmartEarth.Cesium.ScreenSpaceEventHandler(
|
window.Viewer.scene.canvas
|
);
|
var ellipsoid = window.Viewer.scene.globe.ellipsoid;
|
handlerPoint.setInputAction(function (movement) {
|
//捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
|
var cartesian = window.Viewer.camera.pickEllipsoid(
|
movement.endPosition,
|
ellipsoid
|
);
|
if (cartesian) {
|
//将笛卡尔三维坐标转为地图坐标（弧度）
|
var cartographic =
|
window.Viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
|
//将地图坐标（弧度）转为十进制的度数
|
longitude.value = SmartEarth.Cesium.Math.toDegrees(
|
cartographic.longitude
|
).toFixed(6);
|
latitude.value = SmartEarth.Cesium.Math.toDegrees(
|
cartographic.latitude
|
).toFixed(6);
|
let scene = window.Viewer.scene;
|
// 获取画布的大小
|
var width = scene.canvas.clientWidth;
|
var height = scene.canvas.clientHeight;
|
//获取画布中心两个像素的坐标（默认地图渲染在画布中心位置）
|
var left = scene.camera.getPickRay(
|
new SmartEarth.Cesium.Cartesian2((width / 2) | 0, (height - 1) / 2)
|
);
|
var right = scene.camera.getPickRay(
|
new SmartEarth.Cesium.Cartesian2((1 + width / 2) | 0, (height - 1) / 2)
|
);
|
|
var globe = scene.globe;
|
var leftPosition = globe.pick(left, scene);
|
var rightPosition = globe.pick(right, scene);
|
|
if (!Cesium.defined(leftPosition) || !Cesium.defined(rightPosition)) {
|
return;
|
}
|
|
var leftCartographic =
|
globe.ellipsoid.cartesianToCartographic(leftPosition);
|
var rightCartographic =
|
globe.ellipsoid.cartesianToCartographic(rightPosition);
|
var geodesic = new SmartEarth.Cesium.EllipsoidGeodesic();
|
geodesic.setEndPoints(leftCartographic, rightCartographic);
|
rate.value = geodesic.surfaceDistance.toFixed(6); //分辨率
|
}
|
}, SmartEarth.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
};
|
onMounted(() => {
|
window.setMouseMove = setMouseMove;
|
// const handleMouseMove =
|
});
|
</script>
|
|
<style lang="less" scoped>
|
.mouseBox {
|
height: 47px;
|
background: rgba(1, 0, 28, 0.3);
|
|
left: 100px;
|
bottom: 14px;
|
width: 596px;
|
position: absolute;
|
z-index: 40;
|
padding-left: 10px;
|
display: flex;
|
align-items: center;
|
.earthImage {
|
width: 20px;
|
height: 20px;
|
background: url("../assets/img/形状 9.png") no-repeat;
|
background-size: 100% 100%;
|
margin-left: 10px;
|
}
|
.earthLable {
|
font-size: 16px;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
color: #ffffff;
|
line-height: 5px;
|
margin-left: 10px;
|
}
|
}
|
</style>
|
