深圳靠谱做网页公司seo搜索排名优化
如何 在 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 的视角和范围，并导出为高质量的图片。