• 软键盘控制cesium相机移动旋转

    1.有航向 类似于控制飞机飞行
     

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <script src="https://cesium.com/downloads/cesiumjs/releases/1.80/Build/Cesium/Cesium.js">script>
    9.     <link rel="stylesheet"
    10.         href="https://cesium.com/downloads/cesiumjs/releases/1.80/Build/Cesium/Widgets/widgets.css" />
    11.     <script src="https://cdn.bootcdn.net/ajax/libs/Turf.js/6.5.0/turf.min.js">script>
    12.     <script src="https://cdn.jsdelivr.net/npm/@dvgis/cesium-map/dist/cesium.map.min.js">script>
    13.     <title>Documenttitle>
    14.     <style>
    15.         body,
    16.         html {
    17.             width: 100%;
    18.             height: 100%;
    19.             margin: 0;
    20.             padding: 0;
    21.             overflow: hidden;
    22.         }
    23.  
    24.         #cesiumContainer {
    25.             width: 100%;
    26.             height: 100%;
    27.             margin: 0;
    28.             padding: 0;
    29.             overflow: hidden;
    30.         }
    31.  
    32.         .lonLat {
    33.             position: fixed;
    34.             width: 100%;
    35.             bottom: 0;
    36.             /* left: 50%; */
    37.             color: aliceblue;
    38.             text-align: center;
    39.         }
    40.  
    41.         button:focus {
    42.             outline: none;
    43.             /* 取消选中时的轮廓边框 */
    44.             box-shadow: none;
    45.             /* 取消选中时的阴影效果 */
    46.  
    47.         }
    48.  
    49.         button {
    50.             width: 80px;
    51.             height: 50px;
    52.             -webkit-user-select: none;
    53.             /* Chrome, Safari, Opera */
    54.             -moz-user-select: none;
    55.             /* Firefox */
    56.             -ms-user-select: none;
    57.             /* Internet Explorer/Edge */
    58.             user-select: none;
    59.             /* 此规则适用于大多数浏览器 */
    60.         }
    61.     style>
    62. head>
    63.  
    64. <body>
    65.     <div id="cesiumContainer">div>
    66.     <div class="lonLat">
    67.         <button class="btn1">前button>
    68.         <button class="btn2">后button>
    69.         <button class="btn3">左button>
    70.         <button class="btn4">右button>
    71.         
    72.         <button class="rotation1">旋转heading+button>
    73.         <button class="rotation2">旋转heading-button>
    74.         
    75.         <button class="openC">开启button>
    76.         <button class="closeC">关闭button>
    77.     div>
    78.     <script>
    79.         // document.oncontextmenu = new Function("event.returnValue=false");
    80.         // document.onselectstart = new Function("event.returnValue=false");
    81.         // document.addEventListener("keydown", function (e) {
    82.         //  		console.log(e.key);
    83.         //         if (e.key == "F12") {
    84.         //           e.preventDefault(); // 如果按下键F12,阻止事件
    85.         //         }
    86.         //     });
    87.  
    88.  
    89.  
    90.         var viewer = new Cesium.Viewer("cesiumContainer", {
    91.  
    92.  
    93.             geocoder: false, // 位置查找工具
    94.             timeline: false, // 底部时间线
    95.             homeButton: false, // 视角返回初始位置
    96.             fullscreenButton: false, // 全屏
    97.             animation: false, // 左下角仪表盘（动画器件）
    98.             sceneModePicker: false, // 选择视角的模式（球体、平铺、斜视平铺）
    99.             navigationHelpButton: false, //导航帮助按钮
    100.             targetFrameRate: 30,
    101.             imageryProvider: new Cesium.SingleTileImageryProvider({
    102.                 url: "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=",
    103.             }),
    104.             baseLayerPicker: false,
    105.         });
    106.  
    107.         // 不显示底图
    108.         // viewer.imageryLayers.get(0).show = false;
    109.         // 去除logo
    110.         viewer.cesiumWidget.creditContainer.style.display = "none";
    111.  
    112.         // 高德
    113.         var optionsG = {
    114.             style: 'img', // style: img、elec、cva//地标 网路
    115.             crs: 'WGS84', // 使用84坐标系，默认为：GCJ02
    116.             maximumLevel: 18, // 设置最大级别
    117.             // minimumLevel: 5   // 设置最小级别
    118.         }
    119.         viewer.imageryLayers.add(new Cesium.ImageryLayer(new AmapImageryProvider(optionsG)))
    120.         // // 腾讯
    121.         // var optionsT = {
    122.         //     style: 'img' //style: img、1：经典
    123.         // }
    124.         // viewer.imageryLayers.add(new Cesium.ImageryLayer(new TencentImageryProvider(optionsT)))
    125.         // 百度
    126.         // var optionsBI = {
    127.         //     style: 'img', // style: img、vec//地标 网路、normal、dark
    128.         //     crs: 'WGS84' // 使用84坐标系，默认为：BD09
    129.         // }
    130.         // viewer.imageryLayers.add(new Cesium.ImageryLayer(new BaiduImageryProvider(optionsBI)))
    131.         var optionsB = {
    132.             style: 'vec', // style: img、vec//地标 网路、normal、dark
    133.             crs: 'WGS84', // 使用84坐标系，默认为：BD09
    134.             maximumLevel: 18, // 设置最大级别
    135.             // minimumLevel: 5   // 设置最小级别
    136.         }
    137.         viewer.imageryLayers.add(new Cesium.ImageryLayer(new BaiduImageryProvider(optionsB)))
    138.  
    139.         viewer.screenSpaceEventHandler.setInputAction(movement => {
    140.             // 方式 1
    141.             var cartesian = viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
    142.             if (cartesian) {
    143.                 var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    144.                 var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(8);
    145.                 var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(8);
    146.                 let height = this.viewer.camera.positionCartographic.height.toFixed(2);
    147.                 // var point = GPS.bd09_To_Gcj02(latitudeString,longitudeString)
    148.                 // this.nowPosition = point.lon + ',' +  point.lat + "," + height
    149.                 // console.log(this.nowPosition,'this.nowPosition');
    150.                 this.nowPosition = longitudeString + ',' + latitudeString + "," + height
    151.                 this.nowPositionheight = height
    152.                 console.log("LongitudeAndLatitude: " + longitudeString + "," + latitudeString + "," + height);
    153.                 var h = this.viewer.scene.camera.heading;
    154.                 var p = this.viewer.scene.camera.pitch;
    155.                 var r = this.viewer.scene.camera.roll;
    156.                 console.log("headingPitchRoll: " + h + "," + p + "," + r);
    157.             }
    158.         }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    159.  
    160.  
    161.         let pointDestination = Cesium.Cartesian3.fromDegrees(116.40069537, 39.96790221, 1500);//视野点
    162.  
    163.         viewer.scene.camera.flyTo({
    164.             destination: pointDestination,
    165.             orientation: {
    166.                 heading: 6.283185307179586,
    167.                 pitch: -1.5707963267948966,
    168.                 roll: 0
    169.             }
    170.         })
    171.  
    172.  
    173.  
    174.  
    175.         class CameraNavigation {
    176.             constructor(viewer) {
    177.                 this.viewer = viewer;
    178.                 this.flyDuration = 0.5
    179.                 this.clickEvent = true;
    180.                 this.moveEndHandler = null;
    181.                 this.speed = null
    182.                 this.moveSpeed = null;
    183.                 this.height = null;
    184.                 this.buttonEvent = {};
    185.                 this.rotationSpeed = 2
    186.                 this.deviceType = this.getDeviceType();
    187.                 this.initControl()
    188.  
    189.                 this.btnSAddEventListenerName = []
    190.             }
    191.             getDeviceType() {
    192.                 const userAgent = navigator.userAgent;
    193.                 console.log(userAgent);
    194.                 if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(userAgent)) {
    195.                     return "平板";
    196.                 } else if (
    197.                     /(mobi|opera mini|iphone|ipod|android|blackberry|windows phone)/i.test(
    198.                         userAgent
    199.                     )
    200.                 ) {
    201.                     return "手机";
    202.                 } else {
    203.                     return "电脑";
    204.                 }
    205.             }
    206.             initControl() {
    207.                 this.downStart = 'touchstart';
    208.                 this.upEnd = 'touchend';
    209.                 if (this.deviceType == "电脑") {
    210.                     this.downStart = "mousedown"
    211.                     this.upEnd = "mouseup"
    212.                 }
    213.                 console.log(this.upEnd, this.downStart);
    214.             }
    215.  
    216.             setupEventListeners() {
    217.                 if (this.moveSpeed) {
    218.                     this.speed = this.moveSpeed
    219.                 }
    220.                 let currentHeightInit = this.viewer.camera.positionCartographic.height;
    221.                 this.height = Math.round(currentHeightInit);
    222.  
    223.                 // 添加高度变化监听事件
    224.                 this.moveEndHandler = () => {
    225.                     console.log(111);
    226.                     const currentHeight = this.viewer.camera.positionCartographic.height;
    227.                     this.height = Math.round(currentHeight);
    228.                     if (!this.moveSpeed) {
    229.                         this.speed = this.height / 100
    230.                     } else {
    231.                         this.speed = this.moveSpeed
    232.                     }
    233.                 }
    234.                 this.viewer.camera.moveEnd.addEventListener(this.moveEndHandler);
    235.                 console.log(this.height, 'this.height');
    236.  
    237.             }
    238.             setupCameraNavigation() {
    239.                 // 定义事件处理函数
    240.                 function handleKeyDown(event) {
    241.                     console.log(event.key);
    242.                     switch (event.key) {
    243.                         // case 'ArrowUp' || 'w':
    244.                         case 'w':
    245.                             this.moveCamera("Up");
    246.                             break;
    247.                         // case 'ArrowDown' || 'd':
    248.                         case 's':
    249.                             this.moveCamera("Down");
    250.                             break;
    251.                         // case 'ArrowLeft' || 's':
    252.                         case 'a':
    253.                             this.moveCamera("Left");
    254.                             break;
    255.                         // case 'ArrowRight' || 'a':
    256.                         case 'd':
    257.                             this.moveCamera("Right");
    258.                             break;
    259.                         case 'q':
    260.                             this.rotationCamera(10);
    261.                             break;
    262.                         case 'e':
    263.                             this.rotationCamera(-10);
    264.                             break;
    265.                         default:
    266.                             break;
    267.                     }
    268.                 }
    269.  
    270.                 // 添加键盘按下事件监听器
    271.                 document.addEventListener('keydown', handleKeyDown.bind(this));
    272.             }
    273.  
    274.             removeCameraNavigation() {
    275.                 try {
    276.                     this.btnSAddEventListenerName.forEach(ele => {
    277.                         if (this.clickEvent) {
    278.                             document.querySelector(ele.id).removeEventListener('click', this.buttonEvent[ele.eventName].up, false)
    279.                         } else {
    280.                             document.querySelector(ele.id).removeEventListener(this.downStart, this.buttonEvent[ele.eventName].up, false)
    281.                             document.querySelector(ele.id).removeEventListener(this.upEnd, this.buttonEvent[ele.eventName].upEnd, false)
    282.                         }
    283.                     })
    284.                     // 移除键盘按下事件监听器
    285.                     // document.removeEventListener('keydown', this.handleKeyDown);
    286.                     // 取消高度变化监听事件
    287.                     this.viewer.camera.moveEnd.removeEventListener(this.moveEndHandler);
    288.                     this.btnSAddEventListenerName = []
    289.                     this.buttonEvent = {}
    290.                 } catch (error) {
    291.                     console.log(error, 'error');
    292.                 }
    293.             }
    294.  
    295.             moveCamera(type = 'Up') {
    296.                 try {
    297.                     // 获取当前Cesium相机
    298.                     const camera = this.viewer.camera;
    299.  
    300.                     // 获取当前相机的位置和方向
    301.                     const currentPosition = camera.positionCartographic.clone();
    302.                     const currentHeading = camera.heading;
    303.  
    304.                     // 定义移动的距离和方向
    305.                     const distance = this.speed; // 1000米示例距离
    306.                     let bearing = Cesium.Math.toDegrees(currentHeading); // 使用当前方向
    307.  
    308.                     switch (type) {
    309.                         case 'Up': // 向上移动
    310.                             bearing = Cesium.Math.toDegrees(currentHeading)
    311.                             break;
    312.                         case 'Down': // 向下移动
    313.                             bearing = Cesium.Math.toDegrees(currentHeading - Math.PI); // 使用当前方向
    314.                             break;
    315.                         case 'Left': // 向左移动
    316.                             bearing = Cesium.Math.toDegrees(currentHeading - Math.PI / 2); // 使用当前方向
    317.                             break;
    318.                         case 'Right': // 向右移动
    319.                             bearing = Cesium.Math.toDegrees(currentHeading + Math.PI / 2); // 使用当前方向
    320.                             break;
    321.                         default:
    322.                             break;
    323.                     }
    324.                     // 使用Turf.js计算新位置
    325.                     const destination = turf.destination(
    326.                         turf.point([Cesium.Math.toDegrees(currentPosition.longitude), Cesium.Math.toDegrees(currentPosition.latitude)]),
    327.                         distance,
    328.                         bearing,
    329.                         { units: 'meters' }
    330.                     );
    331.                     // 将新位置转换为Cesium坐标
    332.                     const newCartesian = Cesium.Cartesian3.fromDegrees(destination.geometry.coordinates[0], destination.geometry.coordinates[1], this.height);
    333.  
    334.                     // 设置相机位置
    335.                     // camera.position = newCartesian;
    336.  
    337.                     camera.flyTo({
    338.                         destination: newCartesian,
    339.                         orientation: {
    340.                             heading: camera.heading,
    341.                             pitch: camera.pitch,
    342.                             roll: camera.roll
    343.                         },
    344.                         duration: this.flyDuration
    345.                     })
    346.                 } catch (error) {
    347.                     console.log(error, 'error');
    348.                 }
    349.             }
    350.             // rotationCamera(n) {
    351.  
    352.             //     // 获取当前相机
    353.             //     const camera = this.viewer.camera;
    354.  
    355.             //     // 获取当前相机的方向（heading）
    356.             //     const currentHeading = camera.heading;
    357.  
    358.             //     // 设置旋转后的方向（顺时针旋转10度）
    359.             //     const newHeading = currentHeading + Cesium.Math.toRadians(n);
    360.  
    361.             //     // 将相机旋转到新的方向
    362.             //     camera.setView({
    363.             //         orientation: {
    364.             //             heading: newHeading,
    365.             //             pitch: camera.pitch,
    366.             //             roll: camera.roll,
    367.             //         },
    368.             //     });
    369.             // }
    370.             rotationCamera(n) {
    371.                 let centerScreen = this.getScreenCenterCoordinates();
    372.                 console.log(centerScreen, 'getScreenCenterCoordinates');
    373.                 // 获取当前相机
    374.                 const camera = this.viewer.camera;
    375.                 // console.log(camera.position, 'camera');
    376.  
    377.                 let p = this.Cartesian3_to_WGS84(camera.position)
    378.                 // console.log(p, 'ppp');
    379.                 // 获取当前相机的方向（heading）
    380.                 var point1 = turf.point(centerScreen);
    381.                 var point2 = turf.point(p);
    382.                 var options = { units: 'meters' };
    383.                 var bearing = turf.bearing(point1, point2);
    384.                 var bearing1 = turf.bearing(point2, point1);
    385.                 // console.log(bearing, bearing1, 'bearing1bearing1');
    386.                 var distance = turf.distance(point1, point2, options);
    387.                 // console.log(Cesium.Math.toRadians(n), 'Cesium.Math.toRadians(n)Cesium.Math.toRadians(n)');
    388.                 let newBearing = bearing - Cesium.Math.toRadians(n);
    389.                 console.log(newBearing, 'newBearing');
    390.  
    391.                 var destination = turf.destination(point1, distance, newBearing, options);
    392.                 let newP = destination.geometry.coordinates
    393.                 newP.push(p[2])
    394.                 // console.log(newP, 'destination');
    395.                 const currentHeading = camera.heading;
    396.                 const newHeading = currentHeading + Cesium.Math.toRadians(n / 15);
    397.                 if (Math.abs(newBearing) < 4) {
    398.                     camera.setView({
    399.                         orientation: {
    400.                             heading: newHeading,
    401.                             pitch: camera.pitch,
    402.                             roll: camera.roll,
    403.                         },
    404.                     });
    405.                     return null
    406.                 }
    407.                 // console.log(currentHeading,'currentHeading');
    408.                 let bearingCamera = 0;
    409.                 if (newBearing >= 0) {
    410.                     bearingCamera = newBearing - 180
    411.                 } else {
    412.                     bearingCamera = newBearing + 180
    413.                 }
    414.                 // 将相机旋转到新的方向
    415.                 camera.setView({
    416.                     destination: Cesium.Cartesian3.fromDegrees(newP[0], newP[1], newP[2]),
    417.                     orientation: {
    418.                         heading: Cesium.Math.toRadians(bearingCamera),
    419.                         pitch: camera.pitch,
    420.                         roll: camera.roll,
    421.                     },
    422.                 });
    423.             }
    424.             Cartesian3_to_WGS84(point) {
    425.                 var cartesian3 = new Cesium.Cartesian3(point.x, point.y, point.z);
    426.                 var cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
    427.                 var lat = Cesium.Math.toDegrees(cartographic.latitude);
    428.                 var lng = Cesium.Math.toDegrees(cartographic.longitude);
    429.                 var alt = cartographic.height.toFixed(2);
    430.                 return [
    431.                     lng,
    432.                     lat,
    433.                     alt,
    434.                 ];
    435.                 // return {
    436.                 //     lng: lng,
    437.                 //     lat: lat,
    438.                 //     alt: alt,
    439.                 // };
    440.             }
    441.             //屏幕中点经纬度坐标
    442.             getScreenCenterCoordinates() {
    443.                 // 范围对象
    444.                 let coordinates = undefined;
    445.  
    446.                 // 得到当前三维场景
    447.                 let scene = this.viewer.scene;
    448.  
    449.                 // 得到当前三维场景的椭球体
    450.                 let ellipsoid = scene.globe.ellipsoid;
    451.  
    452.                 // 通过scene获取canvas长宽
    453.                 // let canvas = scene.canvas;
    454.                 // const canvasWidth = canvas.width;
    455.                 // const canvasHeight = canvas.height;
    456.  
    457.                 改为获取body长宽 ，通过scene获取canvas在其他分辨率下存在兼容性问题
    458.                 const canvasWidth = document.body.clientWidth;
    459.                 const canvasHeight = document.body.clientHeight;
    460.  
    461.                 // canvas中点
    462.                 let car3_center = this.viewer.camera.pickEllipsoid(new Cesium.Cartesian2(canvasWidth / 2, canvasHeight / 2), ellipsoid);
    463.                 let xcarto_center = undefined;
    464.                 let ycarto_center = undefined;
    465.                 // 当canvas中点在椭球体上
    466.                 if (car3_center) {
    467.                     let carto_center = ellipsoid.cartesianToCartographic(car3_center);
    468.                     xcarto_center = Cesium.Math.toDegrees(carto_center.longitude);
    469.                     ycarto_center = Cesium.Math.toDegrees(carto_center.latitude);
    470.                 }
    471.  
    472.                 // 获取高度
    473.                 let height = (this.viewer.camera.positionCartographic.height).toFixed(2);
    474.                 coordinates = [xcarto_center, ycarto_center, height];
    475.                 return coordinates;
    476.             }
    477.             addButtonTransformEvent(id, eventName) {
    478.                 try {
    479.                     let timer = null
    480.                     let button = document.querySelector(id);
    481.                     let eventNameString = eventName;
    482.                     let findObj = this.btnSAddEventListenerName.find(ele => ele.id == id)
    483.                     if (findObj) {
    484.                         return
    485.                     } {
    486.                         this.btnSAddEventListenerName.push({
    487.                             id: id,
    488.                             eventName: eventName
    489.                         })
    490.                     }
    491.                     if (button) {
    492.                         if (this.clickEvent) {
    493.                             this.buttonEvent[eventName] = {}
    494.                             this.buttonEvent[eventName].up = () => {
    495.                                 if (eventNameString == "moveForward") {
    496.                                     this.moveCamera("Up");
    497.                                 } else if (eventNameString == "moveBackward") {
    498.                                     this.moveCamera("Down");
    499.                                 }
    500.                                 else if (eventNameString == "moveLeft") {
    501.                                     this.moveCamera("Left");
    502.                                 }
    503.                                 else if (eventNameString == "moveRight") {
    504.                                     this.moveCamera("Right");
    505.                                 }
    506.                                 else if (eventNameString == "rotation+") {
    507.                                     this.rotationCamera(this.rotationSpeed);
    508.                                 }
    509.                                 else if (eventNameString == "rotation-") {
    510.                                     this.rotationCamera(-this.rotationSpeed);
    511.                                 }
    512.  
    513.                             }
    514.                             button.addEventListener("click", this.buttonEvent[eventName].up, false)
    515.                         }
    516.                         else {
    517.                             this.buttonEvent[eventName] = {}
    518.                             this.buttonEvent[eventName].up = () => {
    519.                                 if (timer) {
    520.                                     clearInterval(timer)
    521.                                 }
    522.  
    523.                                 timer = setInterval(() => {
    524.                                     console.log('按钮被按下！');
    525.                                     if (eventNameString == "moveForward") {
    526.                                         this.moveCamera("Up");
    527.                                     } else if (eventNameString == "moveBackward") {
    528.                                         this.moveCamera("Down");
    529.                                     }
    530.                                     else if (eventNameString == "moveLeft") {
    531.                                         this.moveCamera("Left");
    532.                                     }
    533.                                     else if (eventNameString == "moveRight") {
    534.                                         this.moveCamera("Right");
    535.                                     }
    536.                                     else if (eventNameString == "rotation+") {
    537.                                         this.rotationCamera(this.rotationSpeed);
    538.                                     }
    539.                                     else if (eventNameString == "rotation-") {
    540.                                         this.rotationCamera(-this.rotationSpeed);
    541.                                     }
    542.                                 }, 30);
    543.                                 console.log(eventNameString, 'eventName');
    544.                             }
    545.                             button.addEventListener(this.downStart, this.buttonEvent[eventName].up, false)
    546.                             this.buttonEvent[eventName].upEnd = () => {
    547.                                 clearInterval(timer)
    548.                                 console.log('按钮被松开！');
    549.                             }
    550.                             button.addEventListener(this.upEnd, this.buttonEvent[eventName].upEnd, false);
    551.                         }
    552.                     }
    553.                 } catch (error) {
    554.                     console.log(error, 'error');
    555.                 }
    556.  
    557.             }
    558.         }
    559.  
    560.         const cameraNavigation = new CameraNavigation(viewer);
    561.         document.querySelector('.openC').addEventListener("click", () => {
    562.             // cameraNavigation.clickEvent = false;
    563.             cameraNavigation.moveSpeed = 100 // 移动速度 默认是当前相机高度/100的速度
    564.             cameraNavigation.rotationSpeed = 180// 旋转速度 默认是2度每次
    565.             cameraNavigation.setupEventListeners();
    566.             cameraNavigation.addButtonTransformEvent('.btn1', 'moveForward')
    567.             cameraNavigation.addButtonTransformEvent('.btn2', 'moveBackward')
    568.             cameraNavigation.addButtonTransformEvent('.btn3', 'moveLeft')
    569.             cameraNavigation.addButtonTransformEvent('.btn4', 'moveRight')
    570.             cameraNavigation.addButtonTransformEvent('.rotation1', 'rotation+')
    571.             cameraNavigation.addButtonTransformEvent('.rotation2', 'rotation-')
    572.         });
    573.  
    574.         document.querySelector('.closeC').addEventListener("click", () => {
    575.             cameraNavigation.removeCameraNavigation();
    576.         });
    577.  
    578.  
    579.  
    580.  
    581.  
    582.  
    583.  
    584.  
    585.     script>
    586. body>
    587.  
    588. html>

    2.

     2. 同高度飞行，通过航向角计算封装
     

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <script src="https://cesium.com/downloads/cesiumjs/releases/1.80/Build/Cesium/Cesium.js">script>
    9.     <link rel="stylesheet"
    10.         href="https://cesium.com/downloads/cesiumjs/releases/1.80/Build/Cesium/Widgets/widgets.css" />
    11.     <script src="https://cdn.bootcdn.net/ajax/libs/Turf.js/6.5.0/turf.min.js">script>
    12.     <script src="https://cdn.jsdelivr.net/npm/@dvgis/cesium-map/dist/cesium.map.min.js">script>
    13.     <title>Documenttitle>
    14.     <style>
    15.         body,
    16.         html {
    17.             width: 100%;
    18.             height: 100%;
    19.             margin: 0;
    20.             padding: 0;
    21.             overflow: hidden;
    22.         }
    23.  
    24.         #cesiumContainer {
    25.             width: 100%;
    26.             height: 100%;
    27.             margin: 0;
    28.             padding: 0;
    29.             overflow: hidden;
    30.         }
    31.  
    32.         .lonLat {
    33.             position: fixed;
    34.             width: 100%;
    35.             bottom: 0;
    36.             /* left: 50%; */
    37.             color: aliceblue;
    38.             text-align: center;
    39.         }
    40.  
    41.         button:focus {
    42.             outline: none;
    43.             /* 取消选中时的轮廓边框 */
    44.             box-shadow: none;
    45.             /* 取消选中时的阴影效果 */
    46.  
    47.         }
    48.  
    49.         button {
    50.             width: 80px;
    51.             height: 50px;
    52.             -webkit-user-select: none;
    53.             /* Chrome, Safari, Opera */
    54.             -moz-user-select: none;
    55.             /* Firefox */
    56.             -ms-user-select: none;
    57.             /* Internet Explorer/Edge */
    58.             user-select: none;
    59.             /* 此规则适用于大多数浏览器 */
    60.         }
    61.     style>
    62. head>
    63.  
    64. <body>
    65.     <div id="cesiumContainer">div>
    66.     <div class="lonLat">
    67.         <div>
    68.             <button class="openC">开启button>
    69.             <button class="closeC">关闭button>
    70.  
    71.         div>
    72.         <button class="btn1">前button>
    73.         <button class="btn2">后button>
    74.         <button class="btn3">左button>
    75.         <button class="btn4">右button>
    76.         
    77.         <button class="rotation1">旋转heading+button>
    78.         <button class="rotation2">旋转heading-button>
    79.         
    80.     div>
    81.     <script>
    82.         // document.oncontextmenu = new Function("event.returnValue=false");
    83.         // document.onselectstart = new Function("event.returnValue=false");
    84.         // document.addEventListener("keydown", function (e) {
    85.         //  		console.log(e.key);
    86.         //         if (e.key == "F12") {
    87.         //           e.preventDefault(); // 如果按下键F12,阻止事件
    88.         //         }
    89.         //     });
    90.  
    91.         // function getDeviceType() {
    92.         //     const userAgent = navigator.userAgent;
    93.         //     console.log(userAgent);
    94.         //     if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(userAgent)) {
    95.         //         return "平板";
    96.         //     } else if (
    97.         //         /(mobi|opera mini|iphone|ipod|android|blackberry|windows phone)/i.test(
    98.         //             userAgent
    99.         //         )
    100.         //     ) {
    101.         //         return "手机";
    102.         //     } else {
    103.         //         return "电脑";
    104.         //     }
    105.         // }
    106.  
    107.         // // 使用示例
    108.         // const deviceType = getDeviceType();
    109.  
    110.  
    111.  
    112.         // console.log("设备类型:", deviceType);
    113.  
    114.         var viewer = new Cesium.Viewer("cesiumContainer", {
    115.  
    116.  
    117.             geocoder: false, // 位置查找工具
    118.             timeline: false, // 底部时间线
    119.             homeButton: false, // 视角返回初始位置
    120.             fullscreenButton: false, // 全屏
    121.             animation: false, // 左下角仪表盘（动画器件）
    122.             sceneModePicker: false, // 选择视角的模式（球体、平铺、斜视平铺）
    123.             navigationHelpButton: false, //导航帮助按钮
    124.             targetFrameRate: 30,
    125.             imageryProvider: new Cesium.SingleTileImageryProvider({
    126.                 url: "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=",
    127.             }),
    128.             baseLayerPicker: false,
    129.         });
    130.  
    131.         // 不显示底图
    132.         // viewer.imageryLayers.get(0).show = false;
    133.         // 去除logo
    134.         viewer.cesiumWidget.creditContainer.style.display = "none";
    135.  
    136.         // 高德
    137.         var optionsG = {
    138.             style: 'img', // style: img、elec、cva//地标 网路
    139.             crs: 'WGS84', // 使用84坐标系，默认为：GCJ02
    140.             maximumLevel: 18, // 设置最大级别
    141.             // minimumLevel: 5   // 设置最小级别
    142.         }
    143.         viewer.imageryLayers.add(new Cesium.ImageryLayer(new AmapImageryProvider(optionsG)))
    144.         // // 腾讯
    145.         // var optionsT = {
    146.         //     style: 'img' //style: img、1：经典
    147.         // }
    148.         // viewer.imageryLayers.add(new Cesium.ImageryLayer(new TencentImageryProvider(optionsT)))
    149.         // 百度
    150.         // var optionsBI = {
    151.         //     style: 'img', // style: img、vec//地标 网路、normal、dark
    152.         //     crs: 'WGS84' // 使用84坐标系，默认为：BD09
    153.         // }
    154.         // viewer.imageryLayers.add(new Cesium.ImageryLayer(new BaiduImageryProvider(optionsBI)))
    155.         var optionsB = {
    156.             style: 'vec', // style: img、vec//地标 网路、normal、dark
    157.             crs: 'WGS84', // 使用84坐标系，默认为：BD09
    158.             maximumLevel: 18, // 设置最大级别
    159.             // minimumLevel: 5   // 设置最小级别
    160.         }
    161.         viewer.imageryLayers.add(new Cesium.ImageryLayer(new BaiduImageryProvider(optionsB)))
    162.  
    163.         viewer.screenSpaceEventHandler.setInputAction(movement => {
    164.             // 方式 1
    165.             var cartesian = viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
    166.             if (cartesian) {
    167.                 var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    168.                 var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(8);
    169.                 var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(8);
    170.                 let height = this.viewer.camera.positionCartographic.height.toFixed(2);
    171.                 // var point = GPS.bd09_To_Gcj02(latitudeString,longitudeString)
    172.                 // this.nowPosition = point.lon + ',' +  point.lat + "," + height
    173.                 // console.log(this.nowPosition,'this.nowPosition');
    174.                 this.nowPosition = longitudeString + ',' + latitudeString + "," + height
    175.                 this.nowPositionheight = height
    176.                 console.log("LongitudeAndLatitude: " + longitudeString + "," + latitudeString + "," + height);
    177.                 var h = this.viewer.scene.camera.heading;
    178.                 var p = this.viewer.scene.camera.pitch;
    179.                 var r = this.viewer.scene.camera.roll;
    180.                 console.log("headingPitchRoll: " + h + "," + p + "," + r);
    181.             }
    182.         }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    183.  
    184.  
    185.         let pointDestination = Cesium.Cartesian3.fromDegrees(116.40069537, 39.96790221, 1500);//视野点
    186.  
    187.         viewer.scene.camera.flyTo({
    188.             destination: pointDestination,
    189.             orientation: {
    190.                 heading: 6.283185307179586,
    191.                 pitch: -1.5707963267948966,
    192.                 roll: 0
    193.             }
    194.         })
    195.  
    196.  
    197.         class CameraNavigation {
    198.             constructor(viewer) {
    199.                 this.viewer = viewer;
    200.                 this.moveEndHandler = null;
    201.                 this.speed = null
    202.                 this.moveSpeed = null;
    203.                 this.height = null;
    204.                 this.buttonEvent = {};
    205.                 this.rotationSpeed = 2
    206.                 this.deviceType = this.getDeviceType();
    207.                 this.initControl()
    208.                
    209.                 this.btnSAddEventListenerName = []
    210.             }
    211.             getDeviceType() {
    212.                 const userAgent = navigator.userAgent;
    213.                 console.log(userAgent);
    214.                 if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(userAgent)) {
    215.                     return "平板";
    216.                 } else if (
    217.                     /(mobi|opera mini|iphone|ipod|android|blackberry|windows phone)/i.test(
    218.                         userAgent
    219.                     )
    220.                 ) {
    221.                     return "手机";
    222.                 } else {
    223.                     return "电脑";
    224.                 }
    225.             }
    226.            initControl() {
    227.                 this.downStart = 'touchstart';
    228.                 this.upEnd = 'touchend';
    229.                 if (this.deviceType == "电脑") {
    230.                     this.downStart = "mousedown"
    231.                     this.upEnd = "mouseup"
    232.                 }
    233.                 console.log( this.upEnd, this.downStart);
    234.             }
    235.  
    236.             setupEventListeners() {
    237.                 let currentHeightInit = this.viewer.camera.positionCartographic.height;
    238.                 this.height = Math.round(currentHeightInit);
    239.                 // 添加高度变化监听事件
    240.                 this.moveEndHandler = () => {
    241.                     console.log(111);
    242.                     const currentHeight = this.viewer.camera.positionCartographic.height;
    243.                     this.height = Math.round(currentHeight);
    244.                     if (!this.moveSpeed) {
    245.                         this.speed = this.height/100
    246.                     }else {
    247.                         this.speed = this.moveSpeed
    248.                     }
    249.                 }
    250.                 this.viewer.camera.moveEnd.addEventListener(this.moveEndHandler);
    251.                 console.log(this.height,'this.height');
    252.  
    253.             }
    254.             setupCameraNavigation() {
    255.                 // 定义事件处理函数
    256.                 this.handleKeyDown =(event)=> {
    257.                     console.log(event.key);
    258.                     switch (event.key) {
    259.                         // case 'ArrowUp' || 'w':
    260.                         case 'w':
    261.                             this.moveCamera("Up");
    262.                             break;
    263.                         // case 'ArrowDown' || 'd':
    264.                         case 's':
    265.                             this.moveCamera("Down");
    266.                             break;
    267.                         // case 'ArrowLeft' || 's':
    268.                         case 'a':
    269.                             this.moveCamera("Left");
    270.                             break;
    271.                         // case 'ArrowRight' || 'a':
    272.                         case 'd':
    273.                             this.moveCamera("Right");
    274.                             break;
    275.                         case 'q':
    276.                             this.rotationCamera(10);
    277.                             break;
    278.                         case 'e':
    279.                             this.rotationCamera(-10);
    280.                             break;
    281.                         default:
    282.                             break;
    283.                     }
    284.                 }
    285.  
    286.                 // 添加键盘按下事件监听器
    287.                 document.addEventListener('keydown', this.handleKeyDown);
    288.             }
    289.  
    290.             removeCameraNavigation() {
    291.                 this.btnSAddEventListenerName.forEach(ele=>{
    292.                     document.querySelector(ele.id).removeEventListener(this.downStart,this.buttonEvent[ele.eventName].up, false)
    293.                     document.querySelector(ele.id).removeEventListener(this.upEnd,this.buttonEvent[ele.eventName].upEnd, false)
    294.                 })
    295.                 // 移除键盘按下事件监听器
    296.                 if (this.handleKeyDown) {
    297.                     document.removeEventListener('keydown', this.handleKeyDown);
    298.                 }
    299.                 // 取消高度变化监听事件
    300.                 this.viewer.camera.moveEnd.removeEventListener(this.moveEndHandler);
    301.                 this.btnSAddEventListenerName =[]
    302.                 this.buttonEvent = {}
    303.             }
    304.  
    305.             moveCamera(type = 'Up') {
    306.                 // 获取当前Cesium相机
    307.                 const camera = this.viewer.camera;
    308.  
    309.                 // 获取当前相机的位置和方向
    310.                 const currentPosition = camera.positionCartographic.clone();
    311.                 const currentHeading = camera.heading;
    312.  
    313.                 // 定义移动的距离和方向
    314.                 const distance = this.speed; // 1000米示例距离
    315.                 let bearing = Cesium.Math.toDegrees(currentHeading); // 使用当前方向
    316.  
    317.                 switch (type) {
    318.                     case 'Up': // 向上移动
    319.                         bearing = Cesium.Math.toDegrees(currentHeading)
    320.                         break;
    321.                     case 'Down': // 向下移动
    322.                         bearing = Cesium.Math.toDegrees(currentHeading - Math.PI); // 使用当前方向
    323.                         break;
    324.                     case 'Left': // 向左移动
    325.                         bearing = Cesium.Math.toDegrees(currentHeading - Math.PI / 2); // 使用当前方向
    326.                         break;
    327.                     case 'Right': // 向右移动
    328.                         bearing = Cesium.Math.toDegrees(currentHeading + Math.PI / 2); // 使用当前方向
    329.                         break;
    330.                     default:
    331.                         break;
    332.                 }
    333.                 // 使用Turf.js计算新位置
    334.                 const destination = turf.destination(
    335.                     turf.point([Cesium.Math.toDegrees(currentPosition.longitude), Cesium.Math.toDegrees(currentPosition.latitude)]),
    336.                     distance,
    337.                     bearing,
    338.                     { units: 'meters' }
    339.                 );
    340.                 // 将新位置转换为Cesium坐标
    341.                 const newCartesian = Cesium.Cartesian3.fromDegrees(destination.geometry.coordinates[0], destination.geometry.coordinates[1], this.height);
    342.  
    343.                 // 设置相机位置
    344.                 camera.position = newCartesian;
    345.             }
    346.             rotationCamera(n) {
    347.  
    348.                 // 获取当前相机
    349.                 const camera = this.viewer.camera;
    350.  
    351.                 // 获取当前相机的方向（heading）
    352.                 const currentHeading = camera.heading;
    353.  
    354.                 // 设置旋转后的方向（顺时针旋转10度）
    355.                 const newHeading = currentHeading + Cesium.Math.toRadians(n);
    356.  
    357.                 // 将相机旋转到新的方向
    358.                 camera.setView({
    359.                     orientation: {
    360.                         heading: newHeading,
    361.                         pitch: camera.pitch,
    362.                         roll: camera.roll,
    363.                     },
    364.                 });
    365.             }
    366.             addButtonTransformEvent(id, eventName) {
    367.                 let timer = null
    368.                 let button = document.querySelector(id);
    369.                 let eventNameString  =eventName;
    370.                 let findObj = this.btnSAddEventListenerName.find(ele=>ele.id== id)
    371.                 if (findObj) {
    372.                     return
    373.                 }{
    374.                     this.btnSAddEventListenerName.push({
    375.                         id:id,
    376.                         eventName:eventName
    377.                     })
    378.                 }
    379.                 if (button) {
    380.                     this.buttonEvent[eventName] = {}
    381.                     this.buttonEvent[eventName].up =   () => {
    382.                         if (timer) {
    383.                             clearInterval(timer)
    384.                         }
    385.                         
    386.                         timer = setInterval(() => {
    387.                             console.log('按钮被按下！');
    388.                             if (eventNameString == "moveForward") {
    389.                                 this.moveCamera("Up");
    390.                             }else if (eventNameString == "moveBackward") {
    391.                                 this.moveCamera("Down");
    392.                             }
    393.                             else if (eventNameString == "moveLeft") {
    394.                                 this.moveCamera("Left");
    395.                             }
    396.                             else if (eventNameString == "moveRight") {
    397.                                 this.moveCamera("Right");
    398.                             }
    399.                             else if (eventNameString == "rotation+") {
    400.                                 this.rotationCamera(this.rotationSpeed) ;
    401.                             }
    402.                             else if (eventNameString == "rotation-") {
    403.                                 this.rotationCamera(-this.rotationSpeed) ;
    404.                             }
    405.                         }, 30);
    406.                         console.log(eventNameString, 'eventName');
    407.                     }
    408.                     button.addEventListener(this.downStart,this.buttonEvent[eventName].up, false)
    409.                     this.buttonEvent[eventName].upEnd = () => {
    410.                         clearInterval(timer)
    411.                         console.log('按钮被松开！');
    412.                     }
    413.                     button.addEventListener(this.upEnd,this.buttonEvent[eventName].upEnd, false);
    414.                 }
    415.  
    416.             }
    417.         }
    418.  
    419.         // 使用示例
    420.         const cameraNavigation = new CameraNavigation(viewer);
    421.         document.querySelector('.openC').addEventListener("click", () => {
    422.             cameraNavigation.setupCameraNavigation()
    423.             // cameraNavigation.moveSpeed = 100 // 移动速度 默认是当前相机高度/100的速度
    424.             cameraNavigation.rotationSpeed = 0.2// 旋转速度 默认是2度每次
    425.             cameraNavigation.setupEventListeners();
    426.             cameraNavigation.addButtonTransformEvent('.btn1', 'moveForward')
    427.             cameraNavigation.addButtonTransformEvent('.btn2', 'moveBackward')
    428.             cameraNavigation.addButtonTransformEvent('.btn3', 'moveLeft')
    429.             cameraNavigation.addButtonTransformEvent('.btn4', 'moveRight')
    430.             cameraNavigation.addButtonTransformEvent('.rotation1', 'rotation+')
    431.             cameraNavigation.addButtonTransformEvent('.rotation2', 'rotation-')
    432.         });
    433.  
    434.         document.querySelector('.closeC').addEventListener("click", () => {
    435.             cameraNavigation.removeCameraNavigation();
    436.         });
    437.     script>
    438. body>
    439.  
    440. html>

  • 相关阅读:
    如何用 Llama 3 免费本地 AI 分析数据和可视化？
    自动拟人对话机器人在客户服务方面起了什么作用？
    DSPE-PEG-GE11，GE11-PEG-DSPE，磷脂-聚乙二醇-靶向多肽GE11
    玫琳凯公司助力大自然保护协会和全球合作伙伴在联合国海洋大会上举办活动，讨论改善海洋保护区
    5. 【线索二叉树】的由来、基本概念、结构体定义、三种遍历线索化、线索二叉树找前驱/后继
    编写Ansible角色实现分布式LNMP安装
    [附源码]SSM计算机毕业设计医院仪器设备管理系统JAVA
    DAY34：XXE 漏洞基础
    Elasticsearch实战（十八）--ES搜索Doc Values/Fielddata 正排索引 深入解析
    k8s、调度约束
  • 原文地址：https://blog.csdn.net/songJunFeng1/article/details/132862571