Cesium鼠标移出地图控件时执行相应操作

Cesium实时获取显示当前坐标信息

PositionBox() {
    var entity = viewer.entities.add({
        id:'label',
        label: {
            show: false,
            showBackground: true,
            font: "14px monospace",
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            verticalOrigin: Cesium.VerticalOrigin.TOP,
            pixelOffset: new Cesium.Cartesian2(10, 0),
        },
    });
    // 鼠标悬停在地球上以查看地图位置
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction(function (movement) {
        var cartesian = viewer.camera.pickEllipsoid(movement.endPosition,viewer.scene.globe.ellipsoid);
        if (cartesian) {
            var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
            var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
            entity.position = cartesian;
            entity.label.show = true;
            entity.label.text ="经度: " +("   " + longitudeString).slice(-7) +"\u00B0" +"\n纬度: " +("   " + latitudeString).slice(-7) +"\u00B0";
        } else {
            entity.label.show = false;
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
},

核心代码【地图容器进行鼠标事件监听 判断鼠标是否在画布上 不在则执行相应的操作】

// 鼠标移出-删除展示坐标信息的实体             
mouseLeave() {
    var getByIdBox = viewer.entities.getById('label');
    getByIdBox.label.show=false;
    console.log(getByIdBox,"ces")
}

完整代码 src\views\Index.vue

<template>
    <div class="home"> 
        <div id="cesiumContainer" @mouseleave="mouseLeave"></div>
    </div>
</template>

<script>
let Cesium = require('cesium/Source/Cesium');
import "cesium/Source/Widgets/widgets.css";
import buildModuleUrl from "cesium/Source/Core/buildModuleUrl"

export default{
    name:"Home",
    mounted() {
        var mapServiceUrl ="";
        //本地测试环境/部署测试环境
        process.env.NODE_ENV !== 'production'?mapServiceUrl ="satellite/satellite":mapServiceUrl=Bus.mapServiceUrl;
        //设置静态资源目录
        buildModuleUrl.setBaseUrl('../../static/Cesium/');
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MWE0MjZhYy1jMzlhLTRkYzAtOWFlMC0zYTBmMzNjZWUwOGQiLCJpZCI6MTIxMDIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjAzNDM2NTR9.yNG39fq6l5JZPkgpq-jEyHmw4LpNVioa7EUxOUPKvm4';
        //创建viewer实例
        viewer = new Cesium.Viewer('cesiumContainer', {
            animation: false, //动画控件
            shouldAnimate: false, //初始时刻运动
            homeButton: false, //Home按钮
            fullscreenButton: false, //全屏按钮
            baseLayerPicker: false, //图层选择控件
            geocoder: false, //地名查找控件
            timeline: false, //时间线控件
            sceneModePicker: true, //投影方式控件
            navigationHelpButton: false, //帮助信息控件
            infoBox: false, //点击要素之后显示的信息 信息框小部件
            requestRenderMode: false, // true启用请求渲染模式:更新实体需拖动地图 视图才更新[true 加载完entity后requestRender一下]
            scene3DOnly: false, //几何图形以3D模式绘制以节约GPU资源
            sceneMode: 2, // 初始场景模式
            fullscreenElement: document.body, // 全屏时渲染的HTML元素
            selectionIndicator : false,//选取指示器组件
            // terrainProvider: Cesium.createWorldTerrain(),//使用全球地形[世界地形数据] [内网需使用本地资源]
            baseLayerPicker:false,
            imageryProvider:new Cesium.UrlTemplateImageryProvider({
                url:mapServiceUrl+"/z={z}&x={x}&y={y}",//部署版本
            })
        })
        viewer._cesiumWidget._creditContainer.style.display = 'none';//去除版权信息
        this.PositionBox()
    },
    methods:{
        // 实时显示当前坐标信息
        PositionBox() {
            var entity = viewer.entities.add({
                id:'label',
                label: {
                    show: false,
                    showBackground: true,
                    font: "14px monospace",
                    horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                    verticalOrigin: Cesium.VerticalOrigin.TOP,
                    pixelOffset: new Cesium.Cartesian2(10, 0),
                },
            });
            // 鼠标悬停在地球上以查看地图位置
            var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
            handler.setInputAction(function (movement) {
                var cartesian = viewer.camera.pickEllipsoid(movement.endPosition,viewer.scene.globe.ellipsoid);
                if (cartesian) {
                    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                    var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
                    var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
                    entity.position = cartesian;
                    entity.label.show = true;
                    entity.label.text ="经度: " +("   " + longitudeString).slice(-7) +"\u00B0" +"\n纬度: " +("   " + latitudeString).slice(-7) +"\u00B0";
                } else {
                    entity.label.show = false;
                }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        },
        // 鼠标移出-删除展示坐标信息的实体
        mouseLeave() {
            var getByIdBox = viewer.entities.getById('label');
            getByIdBox.label.show=false;
        }

    }
}
</script>

线上测试环境：沙盘环境