<template>
    <div id="cesiumContainer" class="all"></div>




</template>

<script  setup >
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import { ref } from 'vue'

onMounted(() => {
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
    const viewer = new Cesium.Viewer("cesiumContainer", {
        terrainProvider: Cesium.createWorldTerrain(),
       
    })
    // 添加太阳
    const sun = new Cesium.Sun();
    viewer.scene.sun = sun;
    // 添加月球
    const moon = new Cesium.Moon();
    viewer.scene.moon = moon;
    moon.textureUrl="/src/image/坐标.png"
    console.log(moon.ellipsoid, moon)
   var entity = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883,3044000),
       model: {
           uri: '/src/model/moon.gltf',
           minimumPixelSize: 100,
           scale: 2000.0,
       },
   });
    viewer.zoomTo(entity)


    // 让太阳和月球随着时间自动旋转
    // viewer.clock.onTick.addEventListener(function () {
    //     sun.computeDayTime();
    //     moon.computeDayTime();
    // });

    // viewer.scene.globe.enableLighting = false;
    // viewer.shadows = false;
    // viewer.scene.sun.show = false;

//     var explodeVertexShader =
//         `
// attribute vec3 position; 
// attribute vec2 textureCoordinates; 

// uniform mat4 modelViewMatrix; 
// uniform mat4 projectionMatrix; 

// varying vec2 vTextureCoordinates;

// void main() {

//     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    

//     vTextureCoordinates = textureCoordinates;
// }
// `;
//     // 自定义爆炸效果的fragment shader
//     var explodeFragmentShader =`precision highp float;
//     varying vec2 vTextureCoordinates; 
//     uniform sampler2D uTexture; 
//     uniform float explosionFactor; 
//     void main() {
//       vec4 texelColor = texture2D(uTexture, vTextureCoordinates);
//       texelColor.rgb *= explosionFactor;
//       gl_FragColor = texelColor;
//      }`;

//     // 创建一个材质
//     var material = new Cesium.Material({
//         fabric: {
//             uniforms: {
//                 color: new Cesium.Color(1.0, 0.0, 0.0, 0.5), // 爆炸效果的颜色和透明度
//                 explosionFactor: 0.0  // 初始爆炸因子，控制爆炸效果的强度
//             },
//             source: {
//                 vertexShaderSource: explodeVertexShader,
//                 fragmentShaderSource: explodeFragmentShader
//             }
//         }
//     });

//     // 创建一个球体实体
//     var entity = viewer.entities.add({
//         position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
        
//         ellipsoid: {
//             radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
//             material: material
//         }
//     });

//     // 定义动画函数，用于控制爆炸效果
// function explodeAnimation() {
//         var startTime = Cesium.JulianDate.now();
//         viewer.clock.onTick.addEventListener(function (clock) {
//             var currentTime = clock.currentTime;
//             var deltaTime = Cesium.JulianDate.secondsDifference(currentTime, startTime);

//             if (deltaTime >= 0 && deltaTime <= 5) {
//                 // 更新爆炸因子，逐步增加爆炸效果的强度
//                 material.uniforms.explosionFactor = deltaTime * 100000.0; // 调整增长速度和最大爆炸范围
//             } else if (deltaTime > 5) {
//                 // 爆炸效果结束后移除实体
//                 viewer.entities.remove(entity);
//                 viewer.clock.onTick.removeEventListener(explodeAnimation);
//             }
//         });
//     }

//     // 启动爆炸效果动画
//     explodeAnimation()

//     viewer.zoomTo(entity)
})

    // viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
    //     fragmentShader: `
    //             uniform sampler2D colorTexture;
    //             in vec2 v_textureCoordinates;
    //             uniform float tiltAngle;
    //             uniform float rainSize;
    //             uniform float rainSpeed;
    //             float hash(float x) {
    //                 return fract(sin(x * 133.3) * 13.13);
    //             }
    //             out vec4 fragColor;
    //             void main(void) {
    //                 float time = czm_frameNumber / rainSpeed;
    //                 vec2 resolution = czm_viewport.zw;
    //                 vec2 uv = (gl_FragCoord.xy * 2. - resolution.xy) / min(resolution.x, resolution.y);
    //                 vec3 c = vec3(.6, .7, .8);
    //                 float a = tiltAngle;
    //                 float si = sin(a), co = cos(a);
    //                 uv *= mat2(co, -si, si, co);
    //                 uv *= length(uv + vec2(0, 4.9)) * rainSize + 1.;
    //                 float v = 1. - sin(hash(floor(uv.x * 100.)) * 2.);
    //                 float b = clamp(abs(sin(20. * time * v + uv.y * (5. / (2. + v)))) - .95, 0., 1.) * 20.;
    //                 c *= v * b;
    //                 fragColor = mix(texture(colorTexture, v_textureCoordinates), vec4(c, 1), .5);
    //             }
    //             `,
    //     uniforms: {
    //         tiltAngle: -0.2, //倾斜角度
    //         rainSize: 0.8, // 雨大小
    //         rainSpeed: 200.0, // 雨速
    //     },
    // }));

    //标注
    // const billboard = viewer.entities.add({
    //     position: Cesium.Cartesian3.fromDegrees(116, 40, 10),
    //     billboard: {
    //         image: '/src/assets/坐标.png',
    //         scale: 0.1,

    //     }

    // })
    // const label = viewer.entities.add({
    //     position: Cesium.Cartesian3.fromDegrees(120, 30),
    //     label: {
    //         text: 'waibibabo',
    //         fillColor: Cesium.Color.RED,
    //         showBackground: true,
    //         backgroundColor:new Cesium.Color(120,120,120)


    //     }

    // })
    // viewer.zoomTo(label)


    // //坐标转换
    // const cartesian= Cesium.Cartesian3.fromDegrees(110,20,20)  //经度  维度  高度
    // console.log(cartesian)

    // let Cartographic=Cesium.Cartographic.fromCartesian(cartesian)
    // console.log(Cartographic)
    // let lon = Cesium.Math.toDegrees(Cartographic.longitude)
    // let lat = Cesium.Math.toDegrees(Cartographic.latitude)
    // // let lon = 180 / Math.PI * Cartographic.longitude
    // // let lat = 180 / Math.PI * Cartographic.latitude
    // console.log(lon,lat)
    //相机
    // const position = Cesium.Cartesian3.fromDegrees(100, 20, 20000)
    // //setview通过定义相机目的地，直接调转到目的地
    // viewer.camera.setView({
    //     destination: position,
    //     orientation: {
    //         heading: Cesium.Math.toRadians(180),
    //         pitch: Cesium.Math.toRadians(-20),
    //         roll: Cesium.Math.toRadians(100),

    //     }
    // })

    // //flyTo飞行动画
    // viewer.camera.flyTo({
    //     destination: position,
    //     duration: 3,//单位s
    //     orientation: {
    //         heading: Cesium.Math.toRadians(180),
    //         pitch: Cesium.Math.toRadians(-20),
    //         roll: Cesium.Math.toRadians(100),

    //     }

    // })
    // //lookAT
    // const position2 = Cesium.Cartesian3.fromDegrees(110, 20)
    // viewer.camera.lookAt(
    //     position2,
    //     new Cesium.HeadingPitchRange(
    //         Cesium.Math.toRadians(0),
    //         Cesium.Math.toRadians(-90),
    //         20000
    //     )
    // )


    //实体dian
    // const point = viewer.entities.add({
    //     id: 'point',
    //     position: Cesium.Cartesian3.fromDegrees(121, 30),
    //     point: {
    //         pixelSize: 20,
    //         color:Cesium.Color.BLUE
    //     }
    // })


//     const polyline = viewer.entities.add({
//         id: 'polyline',
//         polyline: {
//             positions: Cesium.Cartesian3.fromDegreesArray([120, 30, 121, 20,121,30]),
//             width:2,
//             material:Cesium.Color.YELLOW
//         }
//     })
//   let point0 = Cesium.Cartesian3.fromDegrees(120, 10);
//   let point1 = Cesium.Cartesian3.fromDegrees(121, 20);
//   let point2 = Cesium.Cartesian3.fromDegrees(121, 30);

//   let localToWorldMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(point1);
//   let worldToLocalMatrix = Cesium.Matrix4.inverse(localToWorldMatrix, new Cesium.Matrix4());
// console.log(localToWorldMatrix,point1,worldToLocalMatrix)
//   // 计算 localVector
//   let worldVector = Cesium.Cartesian3.subtract(point0, point1, new Cesium.Cartesian3());
//   let localVector = Cesium.Matrix4.multiplyByPointAsVector(worldToLocalMatrix, worldVector, new Cesium.Cartesian3());
//   console.log(point0,point1,point2)
// console.log(worldVector,localVector)
//   // localVector 向量归一化
//   let direction = Cesium.Cartesian3.normalize(localVector, new Cesium.Cartesian3());
//   console.log(direction)
//   let angleToX = Math.atan2(direction.y, direction.x);
//   let heading = Cesium.Math.toDegrees(angleToX);
//   if (heading > 0) { }
//   else heading=360+heading
// console.log(heading)

    // const polygon = viewer.entities.add({
    //     polygon: {
    //         hierarchy: {
    //             positions: Cesium.Cartesian3.fromDegreesArray([122, 18, 123, 18, 123, 20]),


    //         },
    //         height: 200000,
    //         extrudedHeight: 20000,
    //         fill: false,
    //         outline: true,
    //         outlineColor:Cesium.Color.RED
    //     }
    // })




    // viewer.zoomTo(polygon)


    // let positions = [];
    // let p1 = new Cesium.Cartesian3.fromDegrees(120, 20,0);
    // let p2 = new Cesium.Cartesian3.fromDegrees (120, 30,0);
    // let p3 = new Cesium.Cartesian3.fromDegrees(121, 20,0);
    // positions.push(p1)
    // positions.push(p2)
    // positions.push(p3)
    // const measurementLength = (positions) => {
    //     let distance = 0;
    //     for (let i = 0; i < positions.length - 1; i++) {
    //         let point1cartographic = Cesium.Cartographic.fromCartesian(
    //             positions[i]
    //         );
    //         let point2cartographic = Cesium.Cartographic.fromCartesian(
    //             positions[i + 1]
    //         );
    //         /**根据经纬度计算出距离**/
    //         let geodesic = new Cesium.EllipsoidGeodesic();

    //         geodesic.setEndPoints(point1cartographic, point2cartographic);

    //         let s = geodesic.surfaceDistance;
    //         distance = distance + s;

    //     }
    //     console.log(distance)
    //     return distance.toFixed(2);
    // }
    // let s = measurementLength(positions)
    // console.log(s)
















</script>



<style>
.all {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    width: 100%;
    height: 100%
}

.cesium-viewer-bottom {
    display: none;
}

button {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 88;
}
</style>
