上一节我们用GeoJSON把“四川”搬进了地球;今天换另一张王牌——KML(Keyhole Markup Language)。
它本质上是“Google 版”的地理标注格式,功能与 GeoJSON 类似,只是套了层 XML 外衣。
额外福利:KML 还有压缩版KMZ(就是个 ZIP 包),体积更小,网络传输更友好。
一、KML 长啥样?
打开.kml文件,你会看到满屏标签,其实就是 XML:
<Placemark>表示一个要素(点 / 线 / 面);<coordinates>存经纬度高程;<style>还能自带颜色、图标、线宽。
(KMZ 只是把同内容再打一次 ZIP,后缀改成.kmz即可)
二、最简加载:与 GeoJSON 如出一辙
把准备好的USA.kml扔进/kmls/目录,两行代码直接渲染:
/* 1. 加载 KML(返回 Promise) */ const kmlDataSource = Cesium.KmlDataSource.load('./kmls/USA.kml'); /* 2. 添加到场景 */ viewer.dataSources.add(kmlDataSource);地球立刻飞到美国,边界、州块、标签一次呈现,无需任何解析。
三、一步到位:加载 + 染色 + 缩放
Cesium 同样支持“边加载边配色”,和 GeoJSON 用法一模一样:
const kmlDataSource = Cesium.KmlDataSource.load('./kmls/USA.kml', { stroke: Cesium.Color.HOTPINK, // 边线颜色 fill: Cesium.Color.PINK.withAlpha(0.2), // 填充颜色 strokeWidth: 3, // 边线像素宽 }); /* 加载完再飞过去 */ viewer.zoomTo(kmlDataSource); /* 也可以用 then 等加载结束 */ kmlDataSource.then((dataSource) => { viewer.dataSources.add(dataSource); });效果:美国各州瞬间变成“粉红边 + 半透明桃心填充”,而且镜头自动缩放到位。
四、KML vs KMZ 怎么选?
| 格式 | 本质 | 优点 | 适用场景 |
|---|---|---|---|
| KML | 纯 XML | 可读性好,直接编辑 | 小数据、调试阶段 |
| KMZ | ZIP 压缩包 | 体积小,含贴图/模型 | 网络发布、大型项目 |
用法完全一样,只要把.kmz当路径扔给KmlDataSource.load即可,Cesium 会自动解包。
五、小结
KML/KMZ 加载套路 =
load→add,和 GeoJSON 一字不差。样式参数(stroke、fill、strokeWidth)同样支持“加载时一次配完”。
后端若想动态生成,只要按 KML 规范吐 XML 或打 ZIP 即可。