企业官网建设流程全解析

用 Cesium 做地理信息可视化，最常见的数据来源就是GeoJSON。
今天带你把“四川地图”整个搬进来，一行代码加载，一行代码上色，比用 Three.js 自己解析省十倍功夫。

一、GeoJSON 长啥样？

GeoJSON 里存的是“经纬度 + 属性”，可以是省界、道路、点位，甚至航拍区域。
阿里 DataV 免费提供了全国省市区数据，今天拿“四川省”练手：
地址：https://datav.aliyun.com/portal/school/atlas/area_selector
（想换广东、江苏、道路网，同理复制链接即可）

二、最简加载：两步到位

1. 把下载好的四川省.geojson扔进项目/geojson/文件夹；

2. 两行代码直接渲染：

/* 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 比，快在哪里？

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

六、小结与拓展

• 任何 GeoJSON（省界、道路、楼栋）都用同一套路：load→add。

• 样式在加载时一次配完，后期也可通过entities数组再细调。

• 数据更新？dataSources.removeAll()清掉旧数据，重新load新文件即可。

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