如何 在 Cesium 中选取特定经纬度区域，特定视角 ，渲染成图片
如何 在 Cesium 中选取特定经纬度区域，特定视角 ，渲染成图片
DeepSeek-R1满血版 回答完成
深度思考完成 用时23秒
在 Cesium 中选择特定经纬度区域和视角并渲染为图片，可以通过 定义地理范围 + 调整相机参数 + 截图 实现。以下是完整方案：
步骤 1：定义经纬度区域
使用 Cesium.Rectangle 设置目标区域的经纬度范围（单位：弧度）。
javascript
Copy Code
// 定义矩形区域（例如：北京市范围）
const rectangle = Cesium.Rectangle.fromDegrees(
115.7, // 西经（West）
39.4, // 南纬（South）
117.4, // 东经（East）
41.6 // 北纬（North）
);
步骤 2：调整相机到指定视角
通过 camera.setView 或 camera.flyTo 设置相机位置、俯仰角（Pitch）和航向角（Heading）。
javascript
Copy Code
// 直接设置视角（无动画）
viewer.camera.setView({
destination: rectangle, // 目标区域
orientation: {
heading: Cesium.Math.toRadians(0), // 0度正北（方位角）
pitch: Cesium.Math.toRadians(-45), // -45度俯视
roll: 0 // 无旋转
}
});
// 或使用动画飞行到目标视角
viewer.camera.flyTo({
destination: rectangle,
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-45),
roll: 0
},
complete: () => {
// 确保相机到位后截图
setTimeout(() => saveAsImage(), 1000);
}
});
步骤 3：渲染并保存图片
使用 canvas.toDataURL 将当前视图导出为 PNG 或 JPEG。
javascript
Copy Code
function saveAsImage() {
// 获取 Canvas 元素
const canvas = viewer.scene.canvas;
// 提高分辨率（可选，2倍高清）
const originalScale = viewer.resolutionScale;
viewer.resolutionScale = 2;
// 等待渲染完成
viewer.render();
// 转换为图片
const image = canvas.toDataURL('image/png');
// 恢复分辨率
viewer.resolutionScale = originalScale;
// 创建下载链接
const link = document.createElement('a');
link.download = 'cesium-snapshot.png';
link.href = image;
link.click();
}
完整代码示例
html
Copy Code
<!DOCTYPE html>
<html>
<head>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div id="cesiumContainer" style="width: 100%; height: 600px;"></div>
<script>
const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain(),
animation: false, // 隐藏动画控件
timeline: false // 隐藏时间轴
});
// 定义目标区域（北京市范围）
const rectangle = Cesium.Rectangle.fromDegrees(115.7, 39.4, 117.4, 41.6);
// 设置相机视角（正俯视）
viewer.camera.setView({
destination: rectangle,
orientation: {
heading: 0,
pitch: -Cesium.Math.PI_OVER_TWO, // -90度（正俯视）
roll: 0
}
});
// 渲染并保存图片
function saveAsImage() {
const canvas = viewer.scene.canvas;
viewer.render(); // 强制渲染
const image = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.download = 'beijing-snapshot.png';
link.href = image;
link.click();
}
// 等待2秒确保加载完成
setTimeout(saveAsImage, 2000);
</script>
</body>
</html>
关键参数说明
参数 说明
Cesium.Rectangle.fromDegrees() 定义矩形区域（经纬度转弧度）
camera.setView() 直接设置相机视角（无动画）
camera.flyTo() 飞行到目标视角（带动画）
orientation.pitch 俯仰角：-π/2 为垂直俯视，0 为水平视角
viewer.resolutionScale 提高截图分辨率（2倍更清晰）
高级功能
1. 自定义图片尺寸
通过 Cesium.Viewer 的 canvas 调整分辨率：
javascript
Copy Code
const canvas = viewer.scene.canvas;
canvas.width = 4096; // 4K分辨率
canvas.height = 4096;
viewer.forceResize(); // 强制重绘
2. 去除水印
隐藏 Cesium 版权信息：
javascript
Copy Code
viewer.cesiumWidget.creditContainer.style.display = ‘none’;
3. 透明背景
设置场景背景透明：
javascript
Copy Code
viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT;
4. 批量截图
遍历多个区域自动截图：
javascript
Copy Code
const regions = [
{ name: ‘北京’, rect: Cesium.Rectangle.fromDegrees(115.7, 39.4, 117.4, 41.6) },
{ name: ‘上海’, rect: Cesium.Rectangle.fromDegrees(120.8, 30.7, 122.2, 31.8) }
];
regions.forEach((region, index) => {
viewer.camera.flyTo({
destination: region.rect,
complete: () => {
setTimeout(() => {
const image = viewer.scene.canvas.toDataURL(‘image/png’);
const link = document.createElement(‘a’);
link.download = ${region.name}-${index}.png;
link.href = image;
link.click();
}, 1000);
}
});
});
注意事项
跨域问题：如果加载的瓦片或模型来自其他域名，需配置服务器 CORS 支持。
渲染延迟：地形或 3D 模型加载可能需要等待 viewer.scene.render 事件。
内存限制：超高分辨率截图（如 8K）可能导致浏览器内存溢出。
通过此方案，您可以精确控制 Cesium 的视角和范围，并导出为高质量的图片。