Cesium快速入门27：GeoJson自定义样式

二狗哈2025-12-19 14:46

上一节我们把 GeoJSON 成功"搬"进了地球，但默认白膜+黑边看起来总归有点"素"。

今天给它来点颜色------随机染色、挤出高度、取消边框，再顺手把属性数据掏出来，让地图既好看又有"统计味儿"。

一、拿到每个实体，再"穿衣戴帽"

GeoJsonDataSource.load 返回的是 Promise，解包后就能遍历里面所有实体：

复制代码

scGeoJson.then((dataSource) => {
  viewer.dataSources.add(dataSource);

  /* 遍历每个省份/区域 */
  dataSource.entities.values.forEach((entity) => {
    /* 1. 随机颜色 + 半透明 */
    entity.polygon.material = Cesium.Color.fromRandom({ alpha: 0.5 });

    /* 2. 取消边框，干净利落 */
    entity.polygon.outline = false;

    /* 3. 挤出 3 万米，立刻"立"起来 */
    entity.polygon.extrudedHeight = 30000.0;

    /* 4. 顺便打印名字，看看谁是谁 */
    console.log(entity.properties.name._value);
  });
});

刷新地球------瞬间五颜六色，像积木一样全站了起来。

二、颜色、高度、边框，想怎么玩就怎么玩

目标	字段	示例
换颜色	`polygon.material`	纯色、图片、甚至自定义 MaterialProperty
去边框	`polygon.outline`	`false` 秒变"无框"
挤出高度	`polygon.extrudedHeight`	30000.0（单位：米）
抬到空中	`polygon.height`	先整体抬，再挤出，可做"悬浮"效果

三、高度别乱随机------用"有意义"的数据更香

GeoJSON 里自带属性，例如人口、GDP、确诊人数，全藏在 entity.properties 里：

复制代码

// 拿"北京市"的属性示例
const name = entity.properties.name._value;        // "北京市"
const level = entity.properties.level._value;      // "province"
// 你可以把"人口"当成挤出高度，疫情人数映射成颜色......

思路：

人口越多 → extrudedHeight 越高；
确诊越多 → 颜色越红；
GDP 越高 → 透明度越低，金光闪闪。

这样"好看"瞬间升级为"可视化叙事"。