经纬志
首页 / Cesium / 使用示例

用贴图拼出城市街区

城市尺度的三维数据往往以 3D Tiles 1.1 或 CDB 数据集的形式提供,两者都依赖 ion。 示例改用一张 Canvas 贴图铺地面、一批长方体当建筑,用纯前端代码得到相近的城市观感。

CesiumJS 1.121 · 更新 2026-10-28
源码与运行效果
运行效果

这个示例在做什么

先在离屏 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。