niko/baogutang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add map

Browse Source
This commit is contained in:
N1KO 2025-03-05 20:13:41 +08:00
parent 3bc10ce9d9
commit 9b9f696363
2 changed files with 105 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
baogutang-admin/src/main/java/top/baogutang/admin/controller/StaticController.java
View File

@ -29,4 +29,10 @@ public class StaticController {
// 这里返回的字符串是HTML文件名（不包括扩展名） // 这里返回的字符串是HTML文件名（不包括扩展名）
return "file-baogutang"; return "file-baogutang";
} }
@RequestMapping("/map")
public String viewMapHtml() {
// 这里返回的字符串是HTML文件名（不包括扩展名）
return "map";
}
} }

99
baogutang-admin/src/main/resources/templates/map.html Normal file
View File

@ -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>