import React, { useState, useEffect , useRef} from 'react'; const pdCesium = require('@wisdom-cesium/cesium') const Cesium = require('cesium/Cesium') export default () => { let el = useRef(null); let buttonEl = useRef(null); let pdViewer, viewer, extent, orientation, position; useEffect(() => { pdViewer = new pdCesium.PdRender({ el: el.current, }); viewer = pdViewer.viewer; pdViewer.viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(114.31, 30.52, 15000.0), //武汉 }); }, []); function buttonClick(e) { position = getCenterPosition(); extent = getCurrentExtent(); orientation = getOrientation(); console.log('当前视图范围', extent); console.log('相机俯仰角', orientation); console.log('相机位置', position); } function getOrientation() { const { heading, pitch, roll } = viewer.camera; const headingDegrees = Cesium.Math.toDegrees(heading); const pitchDegrees = Cesium.Math.toDegrees(pitch); const rollDegrees = Cesium.Math.toDegrees(roll); return { heading: headingDegrees, pitch: pitchDegrees, roll: rollDegrees, }; } /* 获取camera高度 */ function getHeight() { if (viewer) { var scene = viewer.scene; var ellipsoid = scene.globe.ellipsoid; var height = ellipsoid.cartesianToCartographic(viewer.camera.position) .height; return height; } } /* 获取camera中心点坐标 */ function getCenterPosition() { var result = viewer.camera.pickEllipsoid( new Cesium.Cartesian2( viewer.canvas.clientWidth / 2, viewer.canvas.clientHeight / 2, ), ); var curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(result); var lon = (curPosition.longitude * 180) / Math.PI; var lat = (curPosition.latitude * 180) / Math.PI; var height = getHeight(); return { lon: lon, lat: lat, height: height, }; } function getCurrentExtent() { // 范围对象 var extent = {}; // 得到当前三维场景 var scene = viewer.scene; // 得到当前三维场景的椭球体 var ellipsoid = scene.globe.ellipsoid; var canvas = scene.canvas; // canvas左上角 var car3_lt = viewer.camera.pickEllipsoid( new Cesium.Cartesian2(0, 0), ellipsoid, ); // canvas右下角 var car3_rb = viewer.camera.pickEllipsoid( new Cesium.Cartesian2(canvas.width, canvas.height), ellipsoid, ); // 当canvas左上角和右下角全部在椭球体上 if (car3_lt && car3_rb) { var carto_lt = ellipsoid.cartesianToCartographic(car3_lt); var carto_rb = ellipsoid.cartesianToCartographic(car3_rb); extent.xmin = Cesium.Math.toDegrees(carto_lt.longitude); extent.ymax = Cesium.Math.toDegrees(carto_lt.latitude); extent.xmax = Cesium.Math.toDegrees(carto_rb.longitude); extent.ymin = Cesium.Math.toDegrees(carto_rb.latitude); } // 当canvas左上角不在但右下角在椭球体上 else if (!car3_lt && car3_rb) { var car3_lt2 = null; var yIndex = 0; do { // 这里每次10像素递加,一是10像素相差不大,二是为了提高程序运行效率 yIndex <= canvas.height ? (yIndex += 10) : canvas.height; car3_lt2 = viewer.camera.pickEllipsoid( new Cesium.Cartesian2(0, yIndex), ellipsoid, ); } while (!car3_lt2); var carto_lt2 = ellipsoid.cartesianToCartographic(car3_lt2); var carto_rb2 = ellipsoid.cartesianToCartographic(car3_rb); extent.xmin = Cesium.Math.toDegrees(carto_lt2.longitude); extent.ymax = Cesium.Math.toDegrees(carto_lt2.latitude); extent.xmax = Cesium.Math.toDegrees(carto_rb2.longitude); extent.ymin = Cesium.Math.toDegrees(carto_rb2.latitude); } // 获取高度 extent.height = Math.ceil(viewer.camera.positionCartographic.height); return [extent.xmin, extent.ymin, extent.xmax, extent.ymax]; } return ( <div> <div ref={el} style={{ width: '100%', height: '150px' }} /> <button ref={buttonEl} onClick={buttonClick}> 获取视角 </button> </div> ); };