《Cesium 进阶知识点》- 监听鼠标移动和缩放等场景信息

效果 

 关键代码

使用对象 Cesium.ScreenSpaceEventHandler 监听鼠标 Cesium.ScreenSpaceEventType.MOUSE_MOVE 和 WHEEL事件。

//鼠标位置信息
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
//鼠标移动监听，插件跟踪
handler.setInputAction((position) => {
    // TODO 

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// 鼠标中间滚动
handler.setInputAction((event) => {
    // TODO 
    
}, Cesium.ScreenSpaceEventType.WHEEL);

完整代码

这里涉及到获取级别信息，详见《《Cesium 进阶知识点》- 获取当前场景的级别》

<template>
    <div id="index">
        <div id="cesiumContainer">
            <!-- 位置信息 -->
            <div class="viewer-position" >{{levelInfo}}{{ positionInfo }}</div>
        </div>
    </div>
</template>
<script>

export default {
    data () {
        return {
            levelInfo: '',
            positionInfo: ''
        }
    },
	methods: {
        init() {
            let viewer = new Cesium.Viewer('cesiumContainer');
            //鼠标位置信息
            let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
            //鼠标移动监听，插件跟踪
            handler.setInputAction((position) => {
                //捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
                let ellipsoid = viewer.scene.globe.ellipsoid;
                let worldPos = viewer.scene.pickPosition(position.endPosition);
                let cartesian = viewer.camera.pickEllipsoid(position.endPosition, ellipsoid);
                if (cartesian) {
                    // 级别
                    
                    //将笛卡尔三维坐标转为地图坐标（弧度）
                    let cartographic = ellipsoid.cartesianToCartographic(cartesian);
                    //将地图坐标（弧度）转为十进制
                    //经度
                    let log = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
                    //纬度
                    let lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
                    //视高
                    let alt = (viewer.camera.positionCartographic.height / 1000).toFixed(2);
                    //海拔
                    let height = (viewer.scene.globe.getHeight(cartographic) / 1000).toFixed(2);
                    //方位角
                    let heading = Cesium.Math.toDegrees(viewer.camera.heading).toFixed(2);
                    if (worldPos) {
                        cartographic = ellipsoid.cartesianToCartographic(worldPos);
                        height = cartographic.height.toFixed(2);
                    }
                    this.positionInfo = `  经度：${log}°  纬度：${lat}°  海拔：${height}m  视高：${alt}km  方位角：${heading}°`
                }
                // 级别在 wheel 和 mouse move 都设置。避免在使用 flyTo或zoomTo等自动跳转功能时级别无变化。注意：也只能部分避免，当鼠标不移动时也失效
                this.levelInfo = '级数：0级  ';
                let tileRender = viewer.scene._globe._surface._tilesToRender;
                if (tileRender && tileRender.length > 0) {
                    this.levelInfo = "级数：" + viewer.scene._globe._surface._tilesToRender[0]._level + '级  ';
                }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
            // 鼠标中间滚动
            handler.setInputAction((event) => {
                this.levelInfo = '级数：0级  ';
                let tileRender = viewer.scene._globe._surface._tilesToRender;
                if (tileRender && tileRender.length > 0) {
                    this.levelInfo = "级数：" + viewer.scene._globe._surface._tilesToRender[0]._level + '级  ';
                }
            }, Cesium.ScreenSpaceEventType.WHEEL);
        }
	},
    mounted() {
        this.$nextTick(() => {
			this.init()
        });
    }
}
</script>
<style>
* {
    padding: 0;
    margin: 0;
}
#index, #cesiumContainer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.viewer-position {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 25px;
    z-index: 1;
    padding-top: 8px;
    padding-right: 10px;
    color: white;
    text-align: right;
    font-size: 10px;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
</style>