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>
    );
  };
