You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
240 lines
9.5 KiB
240 lines
9.5 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CesiumJS 天地图纯影像示例</title>
|
|
|
|
<link href="https://cesium.com/downloads/cesiumjs/releases/1.123/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
|
|
<script src="https://cesium.com/downloads/cesiumjs/releases/1.123/Build/Cesium/Cesium.js"></script>
|
|
|
|
<style>
|
|
/* 确保 Cesium 容器占满整个浏览器窗口 */
|
|
body { margin: 0; overflow: hidden; }
|
|
#cesiumContainer { width: 100%; height: 100vh; }
|
|
|
|
/* 悬浮按钮样式 */
|
|
.control-btn {
|
|
position: absolute;
|
|
z-index: 1000;
|
|
padding: 10px 15px;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.control-btn:hover {
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
#cameraInfoBtn {
|
|
top: 20px;
|
|
right: 20px;
|
|
}
|
|
|
|
/* 视角切换按钮 */
|
|
.view-buttons {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
gap: 10px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.view-btn {
|
|
padding: 8px 16px;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.view-btn:hover {
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="cesiumContainer"></div>
|
|
<button id="cameraInfoBtn" class="control-btn">获取当前视角参数</button>
|
|
|
|
<!-- 视角切换按钮 -->
|
|
<div class="view-buttons">
|
|
<button class="view-btn" data-view="overview">全局视角</button>
|
|
<button class="view-btn" data-view="ship1">船1视角</button>
|
|
<button class="view-btn" data-view="ship2">船2视角</button>
|
|
<button class="view-btn" data-view="ship3">船3视角</button>
|
|
<button class="view-btn" data-view="ship4">船4视角</button>
|
|
</div>
|
|
|
|
<script type="module">
|
|
// ----------------------------------------------------------------------
|
|
// ** 请替换为您申请的天地图密钥 **
|
|
// ----------------------------------------------------------------------
|
|
const TDT_KEY = 'b19d3ad72716d1a28cf77836dfa19a71';
|
|
|
|
// 步骤 1: 初始化 Viewer 并配置为使用天地图影像和平坦地形
|
|
const viewer = new Cesium.Viewer('cesiumContainer', {
|
|
// **核心设置：禁用所有默认影像，我们将手动添加天地图**
|
|
imageryProvider: false,
|
|
|
|
// **使用平坦地形，避免依赖 Cesium Ion**
|
|
terrainProvider: new Cesium.EllipsoidTerrainProvider(),
|
|
|
|
// 禁用所有不必要的UI控件
|
|
timeline: false,
|
|
animation: false,
|
|
baseLayerPicker: false,
|
|
geocoder: false,
|
|
sceneModePicker: false,
|
|
navigationHelpButton: false,
|
|
infoBox: false,
|
|
fullscreenButton: false,
|
|
homeButton: false,
|
|
|
|
// 启用抗锯齿和其他渲染优化
|
|
contextOptions: {
|
|
webgl: {
|
|
antialias: true
|
|
}
|
|
}
|
|
});
|
|
|
|
// 禁用所有鼠标和键盘的相机控制操作
|
|
viewer.scene.screenSpaceCameraController.enableRotate = false;
|
|
viewer.scene.screenSpaceCameraController.enableTranslate = false;
|
|
viewer.scene.screenSpaceCameraController.enableZoom = false;
|
|
viewer.scene.screenSpaceCameraController.enableTilt = false;
|
|
viewer.scene.screenSpaceCameraController.enableLook = false;
|
|
|
|
// 渲染优化设置
|
|
// 启用抗锯齿
|
|
viewer.scene.postProcessStages.fxaa.enabled = true;
|
|
|
|
// 启用深度测试，确保模型能够被地形正确遮挡
|
|
viewer.scene.globe.depthTestAgainstTerrain = true;
|
|
|
|
// 步骤 2: 添加天地图卫星影像底图 (img: 卫星图层, w: WGS84坐标系)
|
|
const tdtImage = new Cesium.WebMapTileServiceImageryProvider({
|
|
// URL 中 LAYER=img 表示卫星影像图层
|
|
url: "http://t{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + TDT_KEY,
|
|
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
|
|
layer: 'tdtImgLayer',
|
|
style: 'default',
|
|
format: 'tiles',
|
|
tileMatrixSetID: 'w', // 确保使用 WGS84 坐标系
|
|
maximumLevel: 18
|
|
});
|
|
|
|
// 步骤 3: 将图层添加到 Viewer 中
|
|
viewer.imageryLayers.addImageryProvider(tdtImage);
|
|
|
|
// **注意：由于您要求不添加标注层，因此这里不添加 tdtCVA 或 tdtCIA**
|
|
|
|
// 引入我们自定义的标记和定位功能
|
|
import { initMarkerAndPosition } from './src/cesium-utils.js';
|
|
|
|
// 初始化标记和定位
|
|
initMarkerAndPosition(viewer);
|
|
|
|
// 定义预设视角参数
|
|
const presetViews = {
|
|
overview: {
|
|
destination: Cesium.Cartesian3.fromDegrees(118.4603328835826, 38.953967794772765, 560.0105923892418),
|
|
orientation: {
|
|
heading: Cesium.Math.toRadians(231.0260194269599),
|
|
pitch: Cesium.Math.toRadians(-24.749471814600415),
|
|
roll: Cesium.Math.toRadians(0.005508519138937096)
|
|
}
|
|
},
|
|
ship1: {
|
|
destination: Cesium.Cartesian3.fromDegrees(118.45467237056748 + 0.005, 38.94345692673452, 150), // 在船的前方
|
|
orientation: {
|
|
heading: Cesium.Math.toRadians(212), // 朝向船的位置 (180+32)
|
|
pitch: Cesium.Math.toRadians(-15),
|
|
roll: 0
|
|
}
|
|
},
|
|
ship2: {
|
|
destination: Cesium.Cartesian3.fromDegrees(118.45183602217774 + 0.005, 38.94485094840323, 150), // 在船的前方
|
|
orientation: {
|
|
heading: Cesium.Math.toRadians(212), // 朝向船的位置 (180+32)
|
|
pitch: Cesium.Math.toRadians(-15),
|
|
roll: 0
|
|
}
|
|
},
|
|
ship3: {
|
|
destination: Cesium.Cartesian3.fromDegrees(118.4468305964142 + 0.005, 38.947237470602076, 150), // 在船的前方
|
|
orientation: {
|
|
heading: Cesium.Math.toRadians(212), // 朝向船的位置 (180+32)
|
|
pitch: Cesium.Math.toRadians(-15),
|
|
roll: 0
|
|
}
|
|
},
|
|
ship4: {
|
|
destination: Cesium.Cartesian3.fromDegrees(118.44446808752532 + 0.005, 38.94835610136433, 150), // 在船的前方
|
|
orientation: {
|
|
heading: Cesium.Math.toRadians(212), // 朝向船的位置 (180+32)
|
|
pitch: Cesium.Math.toRadians(-15),
|
|
roll: 0
|
|
}
|
|
}
|
|
};
|
|
|
|
// 设置初始视角
|
|
viewer.camera.setView(presetViews.overview);
|
|
|
|
// 添加按钮点击事件监听器
|
|
document.getElementById('cameraInfoBtn').addEventListener('click', function() {
|
|
// 获取当前相机位置
|
|
const camera = viewer.camera;
|
|
const position = camera.position;
|
|
const cartographic = Cesium.Cartographic.fromCartesian(position);
|
|
|
|
// 转换为度数
|
|
const longitude = Cesium.Math.toDegrees(cartographic.longitude);
|
|
const latitude = Cesium.Math.toDegrees(cartographic.latitude);
|
|
const height = cartographic.height;
|
|
|
|
// 获取相机方向
|
|
const heading = Cesium.Math.toDegrees(camera.heading);
|
|
const pitch = Cesium.Math.toDegrees(camera.pitch);
|
|
const roll = Cesium.Math.toDegrees(camera.roll);
|
|
|
|
// 输出到控制台
|
|
console.log('当前相机视角参数:');
|
|
console.log('位置 - 经度:', longitude, '纬度:', latitude, '高度:', height);
|
|
console.log('方向 - 航向角:', heading, '俯仰角:', pitch, '翻滚角:', roll);
|
|
|
|
// 显示提示信息
|
|
alert('相机参数已输出到控制台，请打开开发者工具查看。');
|
|
});
|
|
|
|
// 添加视角切换按钮事件监听器
|
|
document.querySelectorAll('.view-btn').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const viewName = this.getAttribute('data-view');
|
|
const viewParams = presetViews[viewName];
|
|
|
|
if (viewParams) {
|
|
viewer.camera.flyTo({
|
|
destination: viewParams.destination,
|
|
orientation: viewParams.orientation,
|
|
duration: 2.0 // 动画持续时间（秒）
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|