cesium入门学习三

             这期主要学习一下鼠标点击事件以及鼠标滚轮事件。

学习目录总结：

cesium入门学习一-CSDN博客

cesium入门学习二-CSDN博客

1.鼠标事件

1.1 点击鼠标左键显示经度、纬度、高度

效果：

js代码：

var viewer = new Cesium.Viewer('cesiumContainer');// 添加鼠标点击事件
viewer.screenSpaceEventHandler.setInputAction(function (event) {// 获取鼠标点击的位置var clickPosition = viewer.scene.pickPosition(event.position);// 检查是否点击到有效的三维位置if (Cesium.defined(clickPosition)) {// 将笛卡尔坐标转换为经纬度var cartographic = Cesium.Cartographic.fromCartesian(clickPosition);var longitude = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6); // 转换为度并保留小数var latitude = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);var height = cartographic.height.toFixed(2); // 高度保留两位小数// 在点击点绘制一个红色标记viewer.entities.add({position: clickPosition,point: {pixelSize: 10,color: Cesium.Color.RED,outlineColor: Cesium.Color.BLACK,outlineWidth: 2,},label: {text: `Lon: ${longitude}\nLat: ${latitude}\nAlt: ${height}`,font: '14px sans-serif',style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineWidth: 2,outlineColor: Cesium.Color.BLACK,verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 标签位置位于点上方pixelOffset: new Cesium.Cartesian2(0, -20) // 标签偏移量}});}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

1.2 鼠标左键点击连成轨迹线

效果：

代码：

// 初始化 Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');// 存储轨迹点
var trackPoints = [];// 创建轨迹线实体
var trackLine = viewer.entities.add({polyline: {positions: trackPoints,width: 2,material: Cesium.Color.BLUE}
});// 添加鼠标点击事件
viewer.screenSpaceEventHandler.setInputAction(function (event) {// 获取鼠标点击的位置var clickPosition = viewer.scene.pickPosition(event.position);// 检查是否点击到有效的三维位置if (Cesium.defined(clickPosition)) {// 将笛卡尔坐标转换为经纬度var cartographic = Cesium.Cartographic.fromCartesian(clickPosition);var longitude = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6); // 转换为度并保留小数var latitude = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);var height = cartographic.height.toFixed(2); // 高度保留两位小数// 在点击点绘制一个红色标记viewer.entities.add({position: clickPosition,point: {pixelSize: 10,color: Cesium.Color.RED,outlineColor: Cesium.Color.BLACK,outlineWidth: 2,},label: {text: `Lon: ${longitude}\nLat: ${latitude}\nAlt: ${height}`,font: '14px sans-serif',style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineWidth: 2,outlineColor: Cesium.Color.BLACK,verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 标签位置位于点上方pixelOffset: new Cesium.Cartesian2(0, -20) // 标签偏移量}});// 添加点到轨迹数组trackPoints.push(clickPosition);// 更新轨迹线的路径trackLine.polyline.positions = trackPoints;}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

1.3  鼠标点击两个点以曲线的方式连接显示

效果：

js代码：

//第13个程序  点击两个点以曲线的方式连接
// 初始化 Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');// 存储点击点的坐标
var points = [];// 添加鼠标点击事件
viewer.screenSpaceEventHandler.setInputAction(function (event) {// 获取鼠标点击的位置var clickPosition = viewer.scene.pickPosition(event.position);// 检查是否点击到有效的三维位置if (Cesium.defined(clickPosition)) {// 在点击点绘制一个红色标记viewer.entities.add({position: clickPosition,point: {pixelSize: 10,color: Cesium.Color.RED,outlineColor: Cesium.Color.BLACK,outlineWidth: 2,}});// 添加点击点到数组points.push(clickPosition);// 如果已有两个点，绘制曲线if (points.length === 2) {drawCurve(points[0], points[1]);points = []; // 清空点列表以准备下一组连接}}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);// 绘制曲线函数
function drawCurve(start, end) {// 插值点数量var numPoints = 50;// 将起点和终点转为 Cartographicvar startCartographic = Cesium.Cartographic.fromCartesian(start);var endCartographic = Cesium.Cartographic.fromCartesian(end);// 插值生成曲线点var curvePoints = [];for (var i = 0; i <= numPoints; i++) {var t = i / numPoints; // 插值参数 [0, 1]var lon = Cesium.Math.lerp(startCartographic.longitude,endCartographic.longitude,t);var lat = Cesium.Math.lerp(startCartographic.latitude,endCartographic.latitude,t);// 使用简单的二次曲线高度效果var height =(1 - t) * startCartographic.height +t * endCartographic.height +Math.sin(Math.PI * t) * 1000; // 高度增加一个波形curvePoints.push(Cesium.Cartesian3.fromRadians(lon, lat, height));}// 添加曲线实体viewer.entities.add({polyline: {positions: curvePoints,width: 2,material: Cesium.Color.YELLOW}});
}

1.4  鼠标点击生成范围圆圈

效果：

代码：

var viewer = new Cesium.Viewer('cesiumContainer');// 添加鼠标点击事件
viewer.screenSpaceEventHandler.setInputAction(function (event) {// 获取鼠标点击的位置var clickPosition = viewer.scene.pickPosition(event.position);// 检查是否点击到有效的三维位置if (Cesium.defined(clickPosition)) {// 在点击点绘制一个红色标记viewer.entities.add({position: clickPosition,point: {pixelSize: 10,color: Cesium.Color.RED,outlineColor: Cesium.Color.BLACK,outlineWidth: 2,}});// 在点击点生成圆形范围createCircle(clickPosition, 1000); // 半径 1000 米}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);// 创建圆形范围函数
function createCircle(center, radius) {// 将中心点转为 Cartographicvar centerCartographic = Cesium.Cartographic.fromCartesian(center);var centerLon = centerCartographic.longitude;var centerLat = centerCartographic.latitude;// 生成圆形的边界点var numPoints = 100; // 圆形边界点数量var positions = [];for (var i = 0; i < numPoints; i++) {var angle = (i / numPoints) * 2 * Math.PI;var offsetLon = centerLon + (radius / 6378137) * Math.cos(angle); // 地球半径近似值 6378137 米var offsetLat = centerLat + (radius / 6378137) * Math.sin(angle);positions.push(Cesium.Cartesian3.fromRadians(offsetLon, offsetLat, centerCartographic.height));}// 添加圆形实体viewer.entities.add({polygon: {hierarchy: positions,material: Cesium.Color.BLUE.withAlpha(0.5),outline: true,outlineColor: Cesium.Color.WHITE,}});
}