Cesium快速入门26：加载渲染GeoJson数据

用 Cesium 做地理信息可视化，最常见的数据来源就是 GeoJSON 。

今天带你把"四川地图"整个搬进来，一行代码加载，一行代码上色，比用 Three.js 自己解析省十倍功夫。

一、GeoJSON 长啥样？

GeoJSON 里存的是"经纬度 + 属性"，可以是省界、道路、点位，甚至航拍区域。

阿里 DataV 免费提供了全国省市区数据，今天拿"四川省"练手：

地址：https://datav.aliyun.com/portal/school/atlas/area_selector

（想换广东、江苏、道路网，同理复制链接即可）

二、最简加载：两步到位

把下载好的 四川省.geojson 扔进项目 /geojson/ 文件夹；
两行代码直接渲染：

/* 1. 加载 GeoJSON（返回 Promise） */
const scGeoJson = Cesium.GeoJsonDataSource.load('./geojson/四川省.geojson');

/* 2. 添加到场景 */
viewer.dataSources.add(scGeoJson);

刷新地球------四川省

三、等加载完成？用 await 更直观

load 本质是 Ajax，想等数据就位后再统一处理，可以顺手 await：

复制代码

const scGeoJson = await Cesium.GeoJsonDataSource.load('./geojson/四川省.geojson');
viewer.dataSources.add(scGeoJson);

这样后续想缩放、染色、弹窗，都能立刻拿到完整对象。

四、一次配好色：stroke、fill、线宽都能传

Cesium 把 GeoJSON 所有样式参数都包成配置项，加载时一起丢进去即可：

复制代码

const scGeoJson = Cesium.GeoJsonDataSource.load('./geojson/四川省.geojson', {
  stroke: Cesium.Color.HOTPINK,     // 边线颜色
  fill: Cesium.Color.PINK.withAlpha(0.2), // 填充颜色
  strokeWidth: 3,                   // 边线像素宽
  markerSymbol: '?'                 // 如果是点，就显示问号图标
});

viewer.dataSources.add(scGeoJson);

效果：粉红边 + 半透明桃心填充，比默认好看一百倍。

五、跟 Three.js 比，快在哪里？

步骤	Three.js	Cesium
解析文件	手写 JSON 遍历	一行 `load` 自动完成
坐标转换	自己转经纬度→世界	内部自动转
面/线生成	手动搭 Geometry	自动根据类型生成
渲染	自己写材质	可选默认或自定义

一句话：Cesium 把"解析→转换→生成→渲染"全链路封装好，我们只需把 GeoJSON 文件喂给它。

六、小结与拓展

任何 GeoJSON（省界、道路、楼栋）都用同一套路：load→add。
样式在加载时一次配完，后期也可通过 entities 数组再细调。
数据更新？dataSources.removeAll() 清掉旧数据，重新 load 新文件即可。

下节课，我们给这些行政区做"悬浮高亮 + 点击弹窗"，让地图真正"活"起来。