你提出的需求是：
> **“Cesium 根据 DEM 的范围和
高程生成一张图片，并将这张图片贴在地形上”**
这个需求可以拆解为两个核心部分：
---
### ✅ 目标分解
1. **从 DEM
数据中
提取地理范围内的
高程数据**
2. **将这些
高程可视化为一张图像（如伪彩色图）**
3. **将这张图像作为纹理（贴图）覆盖到对应区域的地形表面**
这常用于：**
高程热力图、地质分类图、模拟
数据渲染等场景。**
---
## ✅ 解决方案概述
我们将使用以下技术栈：
- `CesiumJS`：三维地球引擎
- `Geo
TIFF`：加载本地或远程 DEM 文件
- `Canvas`：动态生成
高程可视化图像
- `ImageryLayer` + `SingleTileImageryProvider`：把生成的图像贴到地形上
---
## ✅ 完整代码实现（HTML + JavaScript）
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Cesium: Generate Image from DEM and Overlay on Terrain</title>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.114/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.114/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
<!-- 第三方库 -->
<script src="https://unpkg.com/geo
tiff@2.0.7/dist-browser/geo
tiff.min.js"></script>
<style>
html, body, #cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
// 初始化 Cesium Viewer
const viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
baseLayerPicker: false,
infoBox: false,
selectionIndicator: false,
requestRenderMode: true,
});
// 假设你的 DEM 文件叫 dem.
tif（Geo
TIFF 格式）
const DEM_URL = 'dem.
tif'; // 替换为你自己的路径
/**
* 加载 Geo
TIFF 并生成
高程贴图并叠加到地形
*/
async function loadDemAndCreateOverlay() {
try {
// 1.
获取 TIFF
数据
const response = await fetch(DEM_URL);
const arrayBuffer = await response.arrayBuffer();
const
tiff = await Geo
TIFF.fromArrayBuffer(arrayBuffer);
const image = await
tiff.getImage();
const width = image.getWidth();
const height = image.getHeight();
// 2.
获取地理边界 [west, south, east, north]（经纬度）
const [minX, minY, maxX, maxY] = image.getBoundingBox();
const rectangle = Cesium.Rectangle.fromDegrees(minX, minY, maxX, maxY);
// 3. 读取
高程数据
const rasters = await image.readRasters();
let data = rasters[0]; // 第一个波段即
高程值
const noDataValue = image.getGDALNoData(); //
获取 NoData 值，如 -9999
const validData = data.filter(v => v !== noDataValue && !isNaN(v) && isFinite(v));
const minElev = Math.min(...validData);
const maxElev = Math.max(...validData);
const range = maxElev - minElev || 1;
console.log(`📊 DEM 范围: ${minX}, ${minY} → ${maxX}, ${maxY}`);
console.log(`📈
高程范围: ${minElev}m ~ ${maxElev}m`);
// 4. 创建 Canvas 渲染
高程图为伪彩色图像
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
const imageData = ctx.createImageData(width, height);
const pixels = imageData.data;
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const idx = y * width + x;
const elev = data[idx];
let r, g, b, a = 255;
if (elev === noDataValue || isNaN(elev)) {
r = g = b = 0;
a = 0; // 透明
} else {
const normalized = (elev - minElev) / range;
// 伪彩色映射：蓝 → 绿 → 黄 → 红
if (normalized < 0.25) {
r = 0; g = Math.floor(normalized * 4 * 255); b = 255;
} else if (normalized < 0.5) {
r = 0; g = 255; b = Math.floor((1 - (normalized - 0.25) * 4) * 255);
} else if (normalized < 0.75) {
r = Math.floor((normalized - 0.5) * 4 * 255); g = 255; b = 0;
} else {
r = 255; g = Math.floor((1 - (normalized - 0.75) * 4) * 255); b = 0;
}
}
const i = idx * 4;
pixels[i] = r;
pixels[i + 1] = g;
pixels[i + 2] = b;
pixels[i + 3] = a;
}
}
ctx.putImageData(imageData, 0, 0);
// 5. 使用 SingleTileImageryProvider 将图像叠加到地形
const provider = new Cesium.SingleTileImageryProvider({
url: canvas.toDataURL('image/png'), // 将 canvas 转为 base64 图像
rectangle: rectangle, // 对应地理范围
transparent: true // 支持透明通道
});
const layer = new Cesium.ImageryLayer(provider);
viewer.imageryLayers.add(layer);
// 6. 飞到该区域
viewer.camera.flyTo({
destination: rectangle,
duration: 2
});
console.log("✅
高程图已生成并成功贴到地形上！");
} catch (err) {
console.error("❌ 处理 DEM 失败:", err);
}
}
// 执行函数
loadDemAndCreateOverlay();
</script>
</body>
</html>
```
---
## ✅ 功能说明
| 步骤 | 实现方式 |
|------|----------|
| 1️⃣ 加载 DEM | 使用 `geo
tiff.js` 解析 `.
tif` 文件中的栅格
数据 |
| 2️⃣
提取范围 | `getBoundingBox()` 返回 `[west, south, east, north]` |
| 3️⃣ 可视化
高程 | 在 `<canvas>` 上绘制伪彩色图像（颜色代表高度） |
| 4️⃣ 贴图到地形 | 使用 `SingleTileImageryProvider` + `ImageryLayer` 添加覆盖层 |
| 5️⃣ 显示结果 | 图像自动对齐地理坐标，仅在 DEM 区域显示 |
---
## ✅ 效果展示
- 地形上的指定区域会覆盖一层彩色贴图
- 颜色反映
高程变化（例如蓝色=低海拔，红色=高海拔）
- 无
数据区域（如 `-9999`）显示为透明，不遮挡原始
底图
- 图像与真实地形完全配准（georeferenced）
---
## ✅ 注意事项
| 项目 | 建议 |
|------|------|
| DEM 大小 | 推荐小于 `1
024x1
024`，否则浏览器可能卡顿 |
| 坐标系 | 必须是 `WGS84`（EPSG:4326）或 Web Mercator（需投影转换） |
| 性能优化 | 大文件建议预处理成瓦片服务（TMS/WMTS） |
| 实时更新 | 若 DEM 动态变化，可定时重新生成 canvas 和 imageryLayer |
| 导出图像 | 可调用 `canvas.toDataURL()` 导出 PNG |
---
## ✅ 进阶扩展建议
- 🎨 使用更专业的调色板（如 viridis、plasma）
- 📏 添加图例标注（通过 HTML+CSS 浮层显示颜色对应的高度）
- 🔁 支持多时间序列 DEM 切换（动画效果）
- 🧩 支持多个 DEM 拼接后统一渲染贴图
---
本文介绍了如何获取高程地图，包括使用GoodyGIS全家桶获取等高线和高程信息，以及将高程文件(TIF或GRD)转换为DWG矢量等高线。还提到了使用GlobalMap软件进行分析和输出，并简单提及了在SketchUp中使用TopoShaper插件快速生成地形的方法。
最低0.47元/天 解锁文章
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
