• cesium 相机围绕视图中心点旋转


    1. document.querySelector('.rotation1').addEventListener("click", () => {
    2. // ro(2)
    3. rotationCamera(5)
    4. })
    5. document.querySelector('.rotation2').addEventListener("click", () => {
    6. rotationCamera(-5)
    7. })
    8. function rotationCamera(n) {
    9. let centerScreen = getScreenCenterCoordinates();
    10. console.log(centerScreen, 'getScreenCenterCoordinates');
    11. // 获取当前相机
    12. const camera = viewer.camera;
    13. // console.log(camera.position, 'camera');
    14. let p = Cartesian3_to_WGS84(camera.position)
    15. // console.log(p, 'ppp');
    16. // 获取当前相机的方向(heading)
    17. var point1 = turf.point(centerScreen);
    18. var point2 = turf.point(p);
    19. var options = { units: 'meters' };
    20. var bearing = turf.bearing(point1, point2);
    21. var bearing1 = turf.bearing(point2, point1);
    22. console.log(bearing, bearing1, 'bearing1bearing1');
    23. var distance = turf.distance(point1, point2, options);
    24. // console.log(Cesium.Math.toRadians(n), 'Cesium.Math.toRadians(n)Cesium.Math.toRadians(n)');
    25. let newBearing = bearing + n;
    26. console.log(newBearing, 'newBearing');
    27. var destination = turf.destination(point1, distance, newBearing, options);
    28. let newP = destination.geometry.coordinates
    29. newP.push(p[2])
    30. let bearingCamera = 0;
    31. if (newBearing >= 0) {
    32. bearingCamera = newBearing - 180
    33. } else {
    34. bearingCamera = newBearing + 180
    35. }
    36. // 将相机旋转到新的方向
    37. camera.setView({
    38. destination: Cesium.Cartesian3.fromDegrees(newP[0], newP[1], newP[2]),
    39. orientation: {
    40. heading: Cesium.Math.toRadians(bearingCamera),
    41. pitch: camera.pitch,
    42. roll: camera.roll,
    43. },
    44. });
    45. }
    46. function getScreenCenterCoordinates() {
    47. // 获取场景
    48. var scene = viewer.scene;
    49. // 获取屏幕中心的坐标
    50. var canvas = scene.canvas;
    51. var center = new Cesium.Cartesian2(canvas.clientWidth / 2, canvas.clientHeight / 2);
    52. // 获取椭球上的点
    53. var ellipsoid = scene.globe.ellipsoid;
    54. var centerPosition = scene.camera.pickEllipsoid(center, ellipsoid);
    55. // 将椭球上的点转换为经纬度
    56. var centerCartographic = Cesium.Cartographic.fromCartesian(centerPosition);
    57. var centerLongitude = Cesium.Math.toDegrees(centerCartographic.longitude);
    58. var centerLatitude = Cesium.Math.toDegrees(centerCartographic.latitude);
    59. // 获取高度
    60. let height = (viewer.camera.positionCartographic.height).toFixed(2);
    61. let coordinates = [centerLongitude, centerLatitude, height];
    62. return coordinates;
    63. }
    64. function Cartesian3_to_WGS84(point) {
    65. var cartesian3 = new Cesium.Cartesian3(point.x, point.y, point.z);
    66. var cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
    67. var lat = Cesium.Math.toDegrees(cartographic.latitude);
    68. var lng = Cesium.Math.toDegrees(cartographic.longitude);
    69. var alt = cartographic.height.toFixed(2);
    70. return [
    71. lng,
    72. lat,
    73. alt,
    74. ];
    75. }

  • 相关阅读:
    立方体IV(暑假每日一题 10)
    NLP | 注意力机制Attention Mechannism图文详解及代码
    JVM——1.JVM概述
    从0编写区块链:用python解释区块链最基本原理
    『heqingchun-ubuntu系统下安装nvidia显卡驱动3种方法』
    Java dom4j生成XML文件的方法分享
    PYTHON读取yaml文件里的参数
    mybatis基础01
    代码随想录笔记_哈希_1002查找共用字符
    eBPF书籍和教程良心推荐
  • 原文地址:https://blog.csdn.net/songJunFeng1/article/details/134458524