demoTest.jsx 4.39 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136
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>
    );
  };