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>
线上测试环境:沙盘环境