已被阅读 1031 次 | 文章分类:cesium | 2023-12-16 22:56
在使用cesium构建三维应用的时候,常用到鼠标位置信息和相机的信息实现一些特定业务逻辑,本文做简单记录
1 效果预览
在鼠标移动和滚轮缩放时,实时获取鼠标的位置信息包括经纬度和高度,相机信息包括航向角、俯仰角和翻滚角
2 主要函数
(1)初始化viewer视图对象,通过document.getElementsByClassName('cesium-viewer-bottom')[0].style.display ='none';取消下面的cesium版本信息
var V = new Viewer('gisContainer', viewOption);
viewOption对象内容如下
import {
Viewer,
SceneMode,
Color,
ScreenSpaceEventHandler,
Entity,
DataSourceCollection,
Clock,
createDefaultImageryProviderViewModels,
createDefaultTerrainProviderViewModels,
EllipsoidTerrainProvider,
WebMercatorProjection,
ArcGisMapServerImageryProvider ,
SceneTransforms,
ScreenSpaceEventType,
CesiumTerrainProvider,
IonResource
} from 'cesium';
export default {
animation: false, //是否创建动画小器件,左下角仪表
baseLayerPicker: false, //是否显示图层选择器
fullscreenButton: false, //是否显示全屏按钮
geocoder: false, //是否显示geocoder小器件,右上角查询按钮
homeButton: false, //是否显示Home按钮
infoBox: false, //是否显示信息框
sceneModePicker: false, //是否显示3D/2D选择器
selectionIndicator: false, //是否显示选取指示器组件
timeline: false, //是否显示时间轴
navigationHelpButton: false, //是否显示右上角的帮助按钮
scene3DOnly: true, //如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
clock: new Clock(), //用于控制当前时间的时钟对象
selectedImageryProviderViewModel: undefined, //当前图像图层的显示模型,仅baseLayerPicker设为true有意义
// imageryProviderViewModels: createDefaultImageryProviderViewModels(), //可供BaseLayerPicker选择的图像图层ProviderViewModel数组
// selectedTerrainProviderViewModel: undefined, //当前地形图层的显示模型,仅baseLayerPicker设为true有意义
// terrainProviderViewModels: createDefaultTerrainProviderViewModels(), //可供BaseLayerPicker选择的地形图层ProviderViewModel数组
// imageryProvider: new ArcGisMapServerImageryProvider({
// url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
// }),
// skyBox : new Cesium.SkyBox({
// sources : {
// positiveX : 'Cesium-1.7.1/Skybox/px.jpg',
// negativeX : 'Cesium-1.7.1/Skybox/mx.jpg',
// positiveY : 'Cesium-1.7.1/Skybox/py.jpg',
// negativeY : 'Cesium-1.7.1/Skybox/my.jpg',
// positiveZ : 'Cesium-1.7.1/Skybox/pz.jpg',
// negativeZ : 'Cesium-1.7.1/Skybox/mz.jpg'
// }
// }),//用于渲染星空的SkyBox对象
fullscreenElement: document.body, //全屏时渲染的HTML元素,
useDefaultRenderLoop: true, //如果需要控制渲染循环,则设为true
targetFrameRate: undefined, //使用默认render loop时的帧率
showRenderLoopErrors: false, //如果设为true,将在一个HTML面板中显示错误信息
automaticallyTrackDataSourceClocks: true, //自动追踪最近添加的数据源的时钟设置
contextOptions: undefined, //传递给Scene对象的上下文参数(scene.options)
sceneMode: SceneMode.SCENE3D, //初始场景模式
mapProjection: new WebMercatorProjection(), //地图投影体系
dataSources: new DataSourceCollection()
};
(2) 定义屏幕空间事件监听器
var handler = new ScreenSpaceEventHandler(V.scene.canvas);
通过该监听器,可以创建各种交互事件处理函数
(3)监听鼠标移动和滚轮事件,获取鼠标的位置信息,包括经度,维度,高度
//设置鼠标移动事件的处理函数,这里负责监听x,y坐标值变化
handler.setInputAction(function(movement) {
//通过指定的椭球或者地图对应的坐标系,将鼠标的二维坐标转换为对应椭球体三维坐标
cartesian = V.camera.pickEllipsoid(movement.endPosition, ellipsoid);
if (cartesian) {
let lonlat=Cartesian3_to_WGS84(cartesian);
longitudeString=parseFloat(lonlat.lng).toFixed(7);
latitudeString=parseFloat(lonlat.lat).toFixed(7)
//获取相机高度
height = Math.ceil(V.camera.positionCartographic.height)/1000;
statusContainer.innerHTML = `<div>
<div>经度: ${longitudeString}° </div>
<div>维度: ${latitudeString}°</div>
<div>高度: ${height}千米</div>
</div>`
} else {
console.log('cartesian坐标获取失败')
}
}, ScreenSpaceEventType.MOUSE_MOVE);
QQ:3410192267 | 技术支持 微信:popstarqqsmall
Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号