效果?

?關(guān)鍵代碼

使用對(duì)象?Cesium.ScreenSpaceEventHandler 監(jiān)聽鼠標(biāo) Cesium.ScreenSpaceEventType.MOUSE_MOVE 和 WHEEL事件。

//鼠標(biāo)位置信息
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
//鼠標(biāo)移動(dòng)監(jiān)聽，插件跟蹤
handler.setInputAction((position) => {
    // TODO 

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// 鼠標(biāo)中間滾動(dòng)
handler.setInputAction((event) => {
    // TODO 
    
}, Cesium.ScreenSpaceEventType.WHEEL);

完整代碼

這里涉及到獲取級(jí)別信息，詳見《《Cesium 進(jìn)階知識(shí)點(diǎn)》- 獲取當(dāng)前場(chǎng)景的級(jí)別》文章來源地址http://www.zghlxwxcb.cn/news/detail-578173.html

<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');
            //鼠標(biāo)位置信息
            let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
            //鼠標(biāo)移動(dòng)監(jiān)聽，插件跟蹤
            handler.setInputAction((position) => {
                //捕獲橢球體，將笛卡爾二維平面坐標(biāo)轉(zhuǎn)為橢球體的笛卡爾三維坐標(biāo)，返回球體表面的點(diǎn)
                let ellipsoid = viewer.scene.globe.ellipsoid;
                let worldPos = viewer.scene.pickPosition(position.endPosition);
                let cartesian = viewer.camera.pickEllipsoid(position.endPosition, ellipsoid);
                if (cartesian) {
                    // 級(jí)別
                    
                    //將笛卡爾三維坐標(biāo)轉(zhuǎn)為地圖坐標(biāo)（弧度）
                    let cartographic = ellipsoid.cartesianToCartographic(cartesian);
                    //將地圖坐標(biāo)（弧度）轉(zhuǎn)為十進(jìn)制
                    //經(jīng)度
                    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 = `  經(jīng)度：${log}°  緯度：${lat}°  海拔：${height}m  視高：${alt}km  方位角：${heading}°`
                }
                // 級(jí)別在 wheel 和 mouse move 都設(shè)置。避免在使用 flyTo或zoomTo等自動(dòng)跳轉(zhuǎn)功能時(shí)級(jí)別無變化。注意：也只能部分避免，當(dāng)鼠標(biāo)不移動(dòng)時(shí)也失效
                this.levelInfo = '級(jí)數(shù)：0級(jí)  ';
                let tileRender = viewer.scene._globe._surface._tilesToRender;
                if (tileRender && tileRender.length > 0) {
                    this.levelInfo = "級(jí)數(shù)：" + viewer.scene._globe._surface._tilesToRender[0]._level + '級(jí)  ';
                }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
            // 鼠標(biāo)中間滾動(dòng)
            handler.setInputAction((event) => {
                this.levelInfo = '級(jí)數(shù)：0級(jí)  ';
                let tileRender = viewer.scene._globe._surface._tilesToRender;
                if (tileRender && tileRender.length > 0) {
                    this.levelInfo = "級(jí)數(shù)：" + viewer.scene._globe._surface._tilesToRender[0]._level + '級(jí)  ';
                }
            }, 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>

到了這里，關(guān)于《Cesium 進(jìn)階知識(shí)點(diǎn)》- 監(jiān)聽鼠標(biāo)移動(dòng)和縮放等場(chǎng)景信息的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！