baixuanda
/
BAIWebCS


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无锡市汛期水文监测系统 - 2025乙巳蛇年</title>
    <!-- Cesium核心依赖 -->
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Cesium.js"></script>
    <style>
        #cesium-container {
            width: 100%;
            height: 100vh;
            position: relative;
        }

        .water-level-panel {
            position: absolute;
            bottom: 20px;
            right: 20px;
            background: rgba(12, 45, 70, 0.85);
            padding: 15px;
            border-radius: 8px;
            color: white;
            font-family: "Microsoft YaHei", sans-serif;
            z-index: 100;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
        }

        .lunar-date {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(70, 130, 180, 0.8);
            padding: 10px 15px;
            border-radius: 6px;
            color: white;
            font-size: 1.1em;
            z-index: 100;
        }
    </style>
</head>

<body>
    <div id="map-container" class="map-container"></div>

    <script>
        import { ref, onMounted, onUnmounted } from 'vue'
        import AMapLoader from '@amap/amap-jsapi-loader'
        import Header from './header.vue'
        import Gradientoverlay from './gradient-overlay.vue'
        import Leftmoudle from './leftmodul.vue'
        import Rightmoudle from './rightmodul.vue'
        import Middlemoudle from './middlemodul.vue'


        // 地图实例
        const map = ref(null)

        // 地图配置
        const mapConfig = {
            viewMode: '3D',
            zoom: 13,
            center: [120.21937542, 31.568152],
            pitch: 45,
            features: ['bg', 'road', 'building'],
            buildingAnimation: true,
            showLabel: false
        }

        // 初始化地图
        const initMap = async () => {
            try {
                window._AMapSecurityConfig = {
                    securityJsCode: 'b87476c68ed625e2d337f160d0ba6122'
                }

                const AMap = await AMapLoader.load({
                    key: '694aba7c51008bf8c08afc94aa566fc1',
                    version: '2.0',
                    plugins: ['AMap.Scale', 'AMap.ToolBar']
                })

                map.value = new AMap.Map('map-container', {
                    ...mapConfig,
                    layers: [
                        new AMap.TileLayer.Satellite(),
                        new AMap.TileLayer.RoadNet()
                    ]
                })

                // 添加控件
                map.value.addControl(new AMap.Scale())
                map.value.addControl(new AMap.ToolBar())
            } catch (error) {
                console.error('地图初始化失败:', error)
                alert('高德地图加载失败，请检查控制台错误')
            }
        }

        // 生命周期
        onMounted(() => initMap())
        onUnmounted(() => map.value?.destroy())
    </script>
</body>

</html>