作者:桔子
本文同步发布于https://www.jianshu.com/p/80d96b971039
这一节来实现一个状态栏控件。状态栏是三维球上比较常见的一种控件,主要显示当前鼠标的位置以及当前相机的高度。实现该控件的核心是利用Vue的data特性,将鼠标状态及相机状态和输出进行绑定,下面来看实现过程。
一、data绑定
<template>
<div class="statusbar">
<p class="status-x">{{x}}</p>
<p class="status-y">{{y}}</p>
<p class="status-z">{{z}}</p>
<p class="camerastatus">{{cameraZ}}</p>
</div>
</template>
data: () => {
return {
x: "",
y: "",
z: "",
cameraZ: ""
};
}
二、扩展鼠标事件,绑定修改data
addEvt() {
let _that = this;
if (this.$globe.viewer) {
let scene = this.$globe.viewer.scene;
_that.$globe.viewer.screenSpaceEventHandler.setInputAction(e => {
_that.mouseEvtCallback(e.endPosition, scene);
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
} else {
setTimeout(function() {
_that.addEvt();
}, 1000);
}
},
mouseEvtCallback(p, scene) {
let position = scene.pickPosition(p);
if (position) {
//将笛卡尔坐标转化为经纬度坐标
let cartographic = Cesium.Cartographic.fromCartesian(position);
let longitude = Cesium.Math.toDegrees(cartographic.longitude);
let latitude = Cesium.Math.toDegrees(cartographic.latitude);
// let height=cartographic.height
let height = scene.getHeight(longitude, latitude);
height = height ? height : 0;
let cameraposition = scene.camera.position;
let cameracartographic = Cesium.Cartographic.fromCartesian(
cameraposition
);
// let longitude = Cesium.Math.toDegrees(cartographic.longitude);
// let latitude = Cesium.Math.toDegrees(cartographic.latitude);
let cameraheight = cameracartographic.height;
this.$data.x = "经度:" + this.formatDegree(longitude);
this.$data.y = "纬度:" + this.formatDegree(latitude);
height =
height > 0
? height > 1000
? (height / 1000).toFixed(2) + "千米"
: height.toFixed(2) + "米"
: 0 + "米";
this.$data.z = "高度:" + height;
cameraheight =
cameraheight > 1000
? (cameraheight / 1000).toFixed(2) + "千米"
: cameraheight.toFixed(2) + "米";
this.$data.cameraZ = "相机高度:" + cameraheight;
}
},
来看下效果
相关代码,已经上传GitHub,https://github.com/OrangeOrg/vue-webgl-components,后续也将进一步完善,欢迎大家下载使用。