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>

线上测试环境：沙盘环境

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/cjjbc/11209.html