<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>宣州区3D地形图</title>
    <!-- 使用 Cesium 官方 CDN 引入 Cesium 的 CSS -->
    <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Widgets/widgets.css">
    <style>
        html, body, #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        /* 按钮样式，调整到左下角 */
        #flyToButton {
            position: absolute;
            bottom: 30px;
            left: 30px;
            z-index: 10000;
            padding: 10px 15px;
            font-size: 14px;
            background-color: rgba(0, 123, 255, 0.8);
            border: none;
            border-radius: 4px;
            color: #fff;
            cursor: pointer;
        }
        /* 页面调试提示样式 */
        #debugInfo {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 9999;
            background: rgba(255, 255, 255, 0.7);
            padding: 5px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>
<!-- 页面加载提示 -->
<div id="debugInfo">页面加载成功</div>
<!-- 添加一个按钮，可以点击后飞行至宣州区 -->
<button id="flyToButton">查看宣州区</button>
<!-- 使用 defer 属性加载 Cesium JS -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Cesium.js" defer></script>
<script defer>
    window.addEventListener('load', function() {
        if (typeof Cesium === 'undefined') {
            console.error("Cesium库未能加载，请检查网络连接或CDN链接。");
            return;
        }

        // 设置有效的 Cesium Ion 访问令牌
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwNDMwZmY5NS00YmU3LTQxYmUtOTZlYy0yYWI2YjU0M2Y4OTQiLCJpZCI6MjgxMzUyLCJpYXQiOjE3NDExNzU5Mzh9.BgC2wX1jQdm_xvxaspuLsg2ipZYCOarukbixKe1_SKw';

        // 创建 Cesium Viewer，并加载全球地形数据，确保使用 3D 场景模式
        const viewer = new Cesium.Viewer('cesiumContainer', {
            terrainProvider: Cesium.createWorldTerrain(),
            timeline: false,
            animation: false,
            sceneMode: Cesium.SceneMode.SCENE3D  // 显式设置为3D场景
        });

        // 初始视角设置为较广区域，可以根据需要调整
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(120.0, 31.0, 2000000.0)
        });

        // 添加实体标记宣州区大致位置，仅显示红色点，不包含文字标注
        viewer.entities.add({
            name: '宣州区',
            position: Cesium.Cartesian3.fromDegrees(118.74, 30.93),
            point: {
                pixelSize: 10,
                color: Cesium.Color.RED
            }
        });

        // 按钮点击事件：飞行到宣州区
        const flyToButton = document.getElementById('flyToButton');
        flyToButton.addEventListener('click', function() {
            viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(118.74, 30.93, 1500.0),
                orientation: {
                    heading: Cesium.Math.toRadians(0.0),
                    pitch: Cesium.Math.toRadians(-45.0),
                    roll: 0.0
                },
                duration: 3.0  // 飞行动画时长，单位秒
            });
        });
    });
</script>
</body>
</html>
