viewer = window.map = new Cesium.Viewer('mapView', {
animation: false, //是否创建动画小器件,左下角仪表
baseLayerPicker: false, //是否显示图层选择器
fullscreenButton: false, //是否显示全屏按钮
geocoder: false, //是否显示geocoder小器件,右上角查询按钮
homeButton: false, //是否显示Home按钮
infoBox: false, //是否显示信息框
sceneModePicker: false, //是否显示3D/2D选择器
scene3DOnly: false, //如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
selectionIndicator: false, //是否显示选取指示器组件
timeline: false, //是否显示时间轴
navigationHelpButton: false, //是否显示右上角的帮助按钮
baselLayerPicker: false, // 将图层选择的控件关掉,才能添加其他影像数据
shadows: true //是否显示背影
})
//去除版权信息
viewer._cesiumWidget._creditContainer.style.display = 'none'
// 将原来鼠标中键倾斜视图修改为鼠标右键触发
viewer.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG]
// 将原来鼠标右键放大缩放修改为鼠标滚轮滚动
viewer.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.WHEEL]
// 地球初次加载完成调用
let helper = new Cesium.EventHelper()
const RemoveCallback = helper.add(viewer.scene.globe.tileLoadProgressEvent, (e) => {
if (e == 0) {
console.log('onload')
// 删除事件监听
RemoveCallback()
}
})
// 监听点击事件
viewer.screenSpaceEventHandler.setInputAction((e) => {
// 获取点击位置的笛卡尔坐标
let cartesian = viewer.camera.pickEllipsoid(e.position, viewer.scene.globe.ellipsoid)
if (cartesian) {
// 将笛卡尔坐标转换为地理坐标
let cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian)
let longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2)
let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2)
console.log('点击位置经度:' + longitudeString + ',纬度:' + latitudeString)
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
// 监听鼠标移动事件
viewer.scene.canvas.addEventListener('mousemove', (e) => {
// 获取鼠标位置的屏幕坐标
let screenPosition = new Cesium.Cartesian2(e.clientX, e.clientY)
// 获取鼠标位置的地理坐标
let ray = viewer.camera.getPickRay(screenPosition)
let globePosition = viewer.scene.globe.pick(ray, viewer.scene)
if (globePosition) {
let cartographic = Cesium.Cartographic.fromCartesian(globePosition)
let longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
console.log('鼠标位置经度:' + longitudeString + ',纬度:' + latitudeString);
}
})
// 监听摄像机属性的变化
viewer.camera.changed.addEventListener(() => {
// 获取当前地图的缩放级别(zoom 层级)
let height = viewer.camera.positionCartographic.height
console.log('视图中心位置的高度:', height );
})
// 监听摄像机停止移动后触发
viewer.camera.moveEnd.addEventListener(() => {
// 获取相机的位置的经纬度坐标
let centerCartographic = viewer.camera.positionCartographic
// 获取经纬度坐标
let centerLongitude = Cesium.Math.toDegrees(centerCartographic.longitude)
let centerLatitude = Cesium.Math.toDegrees(centerCartographic.latitude)
let centerHeight = centerCartographic.height
console.log('视图中心位置的经度:', centerLongitude);
console.log('视图中心位置的纬度:', centerLatitude);
console.log('视图中心位置的高度:', centerHeight);
})
![](https://img2024.cnblogs.com/blog/1987782/202403/1987782-20240301170904170-1592276074.png)
https://blog.csdn.net/u010358183/article/details/121610901