forked from Rowland/EG
172 lines
7.1 KiB
HTML
172 lines
7.1 KiB
HTML
<!-- /home/tiger/音乐/EG/cesium_offline.html -->
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>离线 Cesium 地图</title>
|
|
<!-- 使用本地 Cesium 文件 -->
|
|
<script src="Cesium-1.132/Build/Cesium/Cesium.js"></script>
|
|
<link rel="stylesheet" href="Cesium-1.132/Build/Cesium/Widgets/widgets.css">
|
|
<style>
|
|
html, body, #cesiumContainer {
|
|
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
|
|
}
|
|
#loadingOverlay {
|
|
position: absolute;
|
|
top: 0; left: 0; bottom: 0; right: 0;
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: white;
|
|
font-family: sans-serif;
|
|
z-index: 1000;
|
|
}
|
|
#loadingOverlay.hidden {
|
|
display: none;
|
|
}
|
|
#errorInfo {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
color: red;
|
|
background: rgba(0,0,0,0.7);
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
z-index: 1001;
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="cesiumContainer"></div>
|
|
<div id="loadingOverlay">
|
|
<h2>正在加载 Cesium 地图...</h2>
|
|
<div id="loadingStatus"></div>
|
|
</div>
|
|
<div id="errorInfo"></div>
|
|
|
|
<script>
|
|
// 显示加载状态
|
|
document.getElementById('loadingStatus').innerHTML = '正在初始化 Cesium...';
|
|
|
|
// 错误处理函数
|
|
function showError(message) {
|
|
console.error('Cesium Error:', message);
|
|
document.getElementById('errorInfo').innerHTML = '错误: ' + message;
|
|
document.getElementById('errorInfo').style.display = 'block';
|
|
document.getElementById('loadingOverlay').innerHTML = '<h2>加载失败</h2><p>' + message + '</p>';
|
|
}
|
|
|
|
// 检查 Cesium.js 是否加载成功
|
|
if (typeof Cesium === 'undefined') {
|
|
showError('Cesium.js 文件未找到或加载失败，请检查文件路径');
|
|
} else {
|
|
try {
|
|
// 使用最基本的配置确保能显示
|
|
var viewer = new Cesium.Viewer('cesiumContainer');
|
|
|
|
// 设置蓝色地球
|
|
viewer.scene.globe.baseColor = new Cesium.Color(0.1, 0.3, 0.8, 1.0);
|
|
|
|
// 隐藏加载界面
|
|
document.getElementById('loadingOverlay').className = 'hidden';
|
|
|
|
// 设置初始视角
|
|
viewer.camera.setView({
|
|
destination: Cesium.Cartesian3.fromDegrees(0, 0, 25000000.0)
|
|
});
|
|
|
|
// Cesium API 接口供 Python 调用
|
|
window.CesiumAPI = {
|
|
// 添加模型
|
|
addModel: function(modelId, url, position, scale) {
|
|
try {
|
|
console.log('CesiumAPI.addModel 被调用:', {modelId, url, position, scale});
|
|
|
|
// 验证参数
|
|
if (!modelId || !url) {
|
|
console.error('模型ID或URL为空');
|
|
return {success: false, message: 'Model ID or URL is empty'};
|
|
}
|
|
|
|
if (!position || typeof position.longitude === 'undefined' || typeof position.latitude === 'undefined') {
|
|
console.error('位置参数无效');
|
|
return {success: false, message: 'Invalid position parameters'};
|
|
}
|
|
|
|
var cartographicPosition = Cesium.Cartographic.fromDegrees(
|
|
position.longitude,
|
|
position.latitude,
|
|
position.height || 0
|
|
);
|
|
var cartesianPosition = Cesium.Cartographic.toCartesian(cartographicPosition);
|
|
|
|
var entity = viewer.entities.add({
|
|
id: modelId,
|
|
position: cartesianPosition,
|
|
model: {
|
|
uri: url,
|
|
scale: scale || 1.0,
|
|
minimumPixelSize: 128,
|
|
maximumScale: 20000
|
|
}
|
|
});
|
|
// 尝试飞到模型位置以便查看
|
|
viewer.zoomTo(entity).then(function() {
|
|
console.log('成功飞到模型位置:', modelId);
|
|
}).catch(function(error) {
|
|
console.warn('飞到模型位置失败:', error);
|
|
});
|
|
console.log('模型添加成功:', modelId);
|
|
|
|
return {success: true, message: '模型添加成功'};
|
|
} catch (error) {
|
|
console.error('Add model error:', error);
|
|
return {success: false, message: error.message};
|
|
}
|
|
},
|
|
|
|
// 移除模型
|
|
removeModel: function(modelId) {
|
|
try {
|
|
var entity = viewer.entities.getById(modelId);
|
|
if (entity) {
|
|
viewer.entities.remove(entity);
|
|
return {success: true, message: '模型移除成功'};
|
|
} else {
|
|
return {success: false, message: '未找到指定模型'};
|
|
}
|
|
} catch (error) {
|
|
console.error('Remove model error:', error);
|
|
return {success: false, message: error.message};
|
|
}
|
|
},
|
|
|
|
// 飞行到指定位置
|
|
flyToPosition: function(longitude, latitude, height) {
|
|
try {
|
|
viewer.camera.flyTo({
|
|
destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height || 10000),
|
|
duration: 2.0
|
|
});
|
|
return {success: true, message: '视角飞行中'};
|
|
} catch (error) {
|
|
console.error('Fly to error:', error);
|
|
return {success: false, message: error.message};
|
|
}
|
|
}
|
|
};
|
|
|
|
console.log('✅ Cesium 离线环境已准备就绪');
|
|
|
|
} catch (initError) {
|
|
showError('Cesium 初始化失败: ' + initError.message);
|
|
console.error('Cesium initialization error:', initError);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|