<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cesium地图展示</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.111/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.111/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        #cesiumContainer {
            width: 100%;
            height: 100vh;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <script>
        // 初始化Cesium查看器
        const viewer = new Cesium.Viewer('cesiumContainer', {
            terrainProvider: new Cesium.EllipsoidTerrainProvider(),  // 使用椭球体地形
            animation: false,
            baseLayerPicker: true,  // 启用底图选择器
            fullscreenButton: true, // 启用全屏按钮
            geocoder: true,         // 启用地理编码器
            homeButton: true,       // 启用主页按钮
            infoBox: true,          // 启用信息框
            sceneModePicker: true,  // 启用场景模式选择器
            selectionIndicator: true,
            timeline: false,
            navigationHelpButton: true
        });

        // 移除默认的影像图层
        viewer.imageryLayers.removeAll();

        // 添加Google卫星图层
        viewer.imageryLayers.addImageryProvider(
            new Cesium.UrlTemplateImageryProvider({
                url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
                minimumLevel: 1,
                maximumLevel: 20,
                credit: new Cesium.Credit('Google Maps')
            })
        );

        // 添加自定义瓦片图层
        const customTiles = viewer.imageryLayers.addImageryProvider(
            new Cesium.UrlTemplateImageryProvider({
                url: '/tiles/{z}/{x}_{y}.png',  // 修改为X_Y.png格式

                credit: new Cesium.Credit('Custom Tiles'),
                // 添加错误处理
                errorCallback: function (error) {
                    console.error('瓦片加载错误:', error);
                },

                // 添加瓦片请求处理
                requestVertexNormals: true,
                requestWaterMask: true,
                // 添加瓦片加载重试
                maximumRetries: 3,
                // 添加瓦片加载超时
                timeout: 10000,
                // 添加瓦片加载策略
                tileCacheSize: 1000,  // 增加缓存大小
                enablePickFeatures: false,  // 禁用要素拾取以提高性能
                // 添加瓦片加载策略
                tileDiscardPolicy: new Cesium.DiscardMissingTileImagePolicy({
                    missingImageUrl: '/tiles/empty.png',  // 可选：设置缺失瓦片的替代图片
                    pixelsToCheck: [0, 0, 1, 1],  // 检查瓦片的像素点
                    disableCheckIfAllPixelsAreTransparent: true  // 如果所有像素都是透明的，则禁用检查
                }),
                // 添加瓦片加载优先级
                tileLoadPriority: 1,  // 设置高优先级
                // 添加瓦片加载策略
                tileLoadProgressEvent: new Cesium.Event(),  // 添加瓦片加载进度事件
                // 添加瓦片加载策略
                tileLoadErrorEvent: new Cesium.Event()  // 添加瓦片加载错误事件
            })
        );

        // 设置瓦片图层的透明度
        customTiles.alpha = 0.7;



        // 设置相机位置到瓦片区域
        viewer.camera.setView({
            destination: Cesium.Rectangle.fromDegrees(
                114.450165, // west
                30.248171,  // south
                114.454021, // east
                30.250863   // north
            ),
            orientation: {
                heading: 0,
                pitch: -Math.PI / 4,
                roll: 0
            }
        });


        // 添加一些调试信息
        console.log('Cesium版本:', Cesium.VERSION);
        console.log('查看器已初始化');

        // KML加载功能封装
        function loadKMLFiles(enable = true) {
            if (!enable) {
                // 如果禁用，清除所有KML数据源
                viewer.dataSources.removeAll();
                return;
            }

            // 获取所有KML文件列表
            fetch('/kml_files')
                .then(response => response.json())
                .then(kmlFiles => {
                    console.log('找到的KML文件:', kmlFiles);
                    // 创建一个数组来存储所有的数据源
                    const dataSources = [];

                    // 加载所有KML文件
                    Promise.all(kmlFiles.map(kmlFile => {
                        const kmlDataSource = new Cesium.KmlDataSource();
                        return kmlDataSource.load(`/kml/${kmlFile}`, {
                            camera: viewer.scene.camera,
                            canvas: viewer.scene.canvas
                        }).then(function (dataSource) {
                            console.log(`成功加载KML文件: ${kmlFile}`);
                            viewer.dataSources.add(dataSource);
                            dataSources.push(dataSource);
                            return dataSource;
                        }).catch(function (error) {
                            console.error(`加载KML文件 ${kmlFile} 失败:`, error);
                        });
                    })).then(function () {
                        // 当所有KML文件都加载完成后，定位到最后一个KML文件
                        if (dataSources.length > 0) {
                            const lastDataSource = dataSources[dataSources.length - 1];
                            // 使用最后一个KML文件的经纬度范围
                            const rectangle = Cesium.Rectangle.fromDegrees(
                                114.450165, // west
                                30.248171,  // south
                                114.454021, // east
                                30.250863   // north
                            );

                            // 设置相机位置
                            viewer.camera.setView({
                                destination: rectangle,
                                orientation: {
                                    heading: 0,
                                    pitch: -Math.PI / 4,
                                    roll: 0
                                }
                            });
                        }
                    });
                })
                .catch(error => {
                    console.error('获取KML文件列表失败:', error);
                });
        }

        // 添加标记功能
        function addMarker(longitude, latitude, name, description) {
            const entity = viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
                name: name,
                label: {
                    text: name,
                    font: '14pt sans-serif',
                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                    outlineWidth: 2,
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                    pixelOffset: new Cesium.Cartesian2(0, -10)
                },
                description: description,
                billboard: {
                    image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Map_marker.svg/128px-Map_marker.svg.png',
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                    scale: 0.5
                }
            });

            // 添加点击事件
            viewer.screenSpaceEventHandler.setInputAction(function (movement) {
                const pickedObject = viewer.scene.pick(movement.position);
                if (Cesium.defined(pickedObject) && pickedObject.id === entity) {
                    // 显示信息窗口
                    viewer.selectedEntity = entity;
                }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        }

        // 示例：添加一个标记
        addMarker(114.452093, 30.249517, '测试标记', '这是一个测试标记点<br>点击查看详细信息');

        // 初始加载KML文件（设置为false可以禁用KML加载）
        loadKMLFiles(false);
    </script>
</body>

</html>