首页 / Cesium / 使用示例
用贴图拼出城市街区
城市尺度的三维数据往往以 3D Tiles 1.1 或 CDB 数据集的形式提供,两者都依赖 ion。 示例改用一张 Canvas 贴图铺地面、一批长方体当建筑,用纯前端代码得到相近的城市观感。
源码与运行效果
这个示例在做什么
先在离屏 canvas 上画 8×8 的街区格子,再压两条深色主干道,得到一个
512×512 的纹理。把它交给 ImageMaterialProperty,贴到一个矩形范围的地面多边形上,
就得到了俯视时的路网。
建筑体块用固定的伪随机种子生成:位置、高度、底面积各不相同,但每次刷新结果一致, 方便对照。盒体中心必须抬到高度的一半,否则建筑会一半埋进地里。
关键接口
| 接口 | 作用 |
|---|---|
ImageMaterialProperty | 把 canvas / 图片当作多边形或矩形的材质 |
PolygonHierarchy | 用经纬度数组描述地面范围 |
box.dimensions | 盒体三个方向的边长,配合 position.z = h/2 贴地摆放 |
outline / outlineColor | 给盒体描边,城市体块更容易分辨 |
可以直接改的地方
| 位置 | 改什么 | 效果 |
|---|---|---|
block = 64, gap = 8 | 改格子尺寸与路宽 | 街区密度和街道宽度 |
for (var i = 0; i < 26; i++) | 改成 120 | 建筑数量增加,接近真实城区 |
h = 14 + rnd() * 46 | 抬高上限 | 天际线更高 |
west / south / east / north | 换成其他城市范围 | 街区落点整体移动 |
替代说明:官方示例加载的是 ion 上的 CDB 城市数据集(3D Tiles 1.1 的一种承载形式),
包含真实几何与材质。本页用 Canvas 贴图加盒体复现同样的「街区 + 建筑」观感,
换成真实数据集时,只需把加载方式改回 Cesium3DTileset.fromUrl。