GIS研习社 GIS研习社
GIS基础理论 3D Tiles Cesium

WebGIS开发入门教程九: 三维地图咋做?Cesium怎么跑?

GIS基础理论
Dr.GIS
wowwwai GIS研习社 · 工具流程与项目排障

别再对着三维地图干瞪眼了——Cesium跑不起来？多半是这三步没走对

上周有个研究生在后台留言：‘Dr. Gis，我按教程装了Cesium，浏览器一打开就是白屏，控制台报错像瀑布一样刷下来……是不是我电脑太老了？’——其实不是硬件问题，而是你跳过了三维地图的‘地基工程’。我在参与某智慧城市项目时，团队新人第一次跑Cesium，90%都卡在数据坐标系和Token配置上。今天这篇，手把手带你从零把Cesium跑通，顺便讲透三维地图背后的‘空间魔术’。

WebGIS开发入门教程九: 三维地图咋做?Cesium怎么跑?

三维地图不是“立体化平面图”，而是地球的数字孪生

很多人以为三维地图就是在二维底图上加个高度，就像给照片P个阴影——大错特错。真正的Web三维地图（如Cesium）是以WGS84椭球体为基准构建的虚拟地球，所有数据必须贴合这个曲面。类比一下：你拿一张世界地图（平面投影）直接裹在篮球上，肯定皱巴巴对不上——这就是为什么你的GeoJSON加载后漂在半空或缩成一个点。

我在国土调查项目中吃过亏：用地方坐标系（如西安80）的DEM直接丢进Cesium，山体位置偏移了300多米。后来强制所有数据转成EPSG:4326，问题才解决。

第一步：环境搭建——别被Node.js吓跑，其实只需5行命令

放弃下载exe安装包的念头。现代Cesium开发标配是npm + Vite（或Webpack）。打开终端，依次执行：

npm create vite@latest my-cesium-app -- --template vanilla
cd my-cesium-app
npm install cesium
npm install -D vite-plugin-cesium
npm run dev

关键在第三步vite-plugin-cesium——它自动处理Cesium的Worker和Asset路径，否则你会看到满屏‘Failed to load module script’错误。启动后访问http://localhost:5173，如果看到旋转的蓝色地球，恭喜，地基打好了。

第二步：加载你的第一份三维数据——从KML到3D Tiles

新手最爱问：‘能不能直接加载Shapefile？’——技术上可以，但性能会崩。Cesium原生支持的是KML（简单矢量）、GeoJSON（带高程属性）和3D Tiles（倾斜摄影/大规模模型）。我们先从最简单的GeoJSON开始：

// 在main.js里添加
viewer.dataSources.add(Cesium.GeoJsonDataSource.load('./data/buildings.geojson', {
    clampToGround: true, // 贴地
    stroke: Cesium.Color.RED,
    fill: Cesium.Color.YELLOW.withAlpha(0.5)
}));

注意clampToGround: true——这是防止建筑悬空的魔法开关。如果数据自带height属性，Cesium会自动拉伸出体块；如果没有，就乖乖贴在地上。

第三步：避开Token雷区——免费密钥申请指南

当你想加载在线影像（比如Bing Maps或天地图），控制台突然弹出‘Access Token Required’——别慌，这不是收费墙。Cesium Ion提供免费额度（每月5万次请求），注册即得Token：

  1. 访问 https://cesium.com/ion/ 注册账号
  2. 点击‘Access Tokens’ → ‘Create Token’
  3. 复制Token，在代码中替换默认值：
Cesium.Ion.defaultAccessToken = '你的token粘贴在这里';
viewer.imageryProvider = Cesium.createWorldImagery();

搞定！现在你的地球披上了高清卫星皮。如果追求国产化，把createWorldImagery()换成天地图URL即可（需单独申请key）。

性能优化彩蛋：当地图卡成PPT时，试试这三招

加载10栋楼很流畅，加载1000栋就卡死？三维渲染吃的是显存和CPU。我的实战经验：

  • 招式一：分级加载 —— 用Cesium3DTileset.maximumScreenSpaceError控制细节层次，远处显示简模，近处才渲染精细结构。
  • 招式二：剔除背面 —— 对建筑物启用cullBackFaces: true，看不见的面片直接不计算。
  • 招式三：懒加载 —— 用viewer.scene.preRender.addEventListener监听镜头移动，动态加载视野内数据。

这些技巧在智慧园区项目里帮我们把帧率从8fps提升到45fps——用户再也感觉不到卡顿。

总结：三维地图=坐标系+数据格式+性能调优

记住这个公式：跑通Cesium = 数据转WGS84 + 选对格式（GeoJSON/3D Tiles） + Token配置 + 性能三板斧。别再纠结‘为什么我的模型是倒的’——99%是坐标系没对齐。下期我会拆解如何用Python把OSGB倾斜摄影转成3D Tiles，评论区告诉我你最想看哪个环节？是数据转换、动画路径，还是与后端API联动？