100 lines
3.5 KiB
HTML
100 lines
3.5 KiB
HTML
<!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>
|