add map

2025-03-05 20:13:41 +08:00 · 2025-03-05 20:13:41 +08:00 · 9b9f696363
commit 9b9f696363
parent 3bc10ce9d9
2 changed files with 105 additions and 0 deletions
--- a/baogutang-admin/src/main/java/top/baogutang/admin/controller/StaticController.java
+++ b/baogutang-admin/src/main/java/top/baogutang/admin/controller/StaticController.java
@ -29,4 +29,10 @@ public class StaticController {
        // 这里返回的字符串是HTML文件名（不包括扩展名）
        return "file-baogutang";
    }
+
+    @RequestMapping("/map")
+    public String viewMapHtml() {
+        // 这里返回的字符串是HTML文件名（不包括扩展名）
+        return "map";
+    }
 }
--- a/baogutang-admin/src/main/resources/templates/map.html
+++ b/baogutang-admin/src/main/resources/templates/map.html
@ -0,0 +1,99 @@
+<!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>