网站收录变少,荆门做网站公众号的公司,东莞想做网站,新加坡网站建设这期主要学习一下鼠标点击事件以及鼠标滚轮事件。
学习目录总结#xff1a;
cesium入门学习一-CSDN博客
cesium入门学习二-CSDN博客
1.鼠标事件
1.1 点击鼠标左键显示经度、纬度、高度
效果#xff1a; js代码#xff1a;
var viewer new Cesium.Viewer(cesiumConta… 这期主要学习一下鼠标点击事件以及鼠标滚轮事件。
学习目录总结
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,}});
}
