企业官网建设流程全解析

上一节我们用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 怎么选？

用法完全一样，只要把.kmz当路径扔给KmlDataSource.load即可，Cesium 会自动解包。

五、小结

• KML/KMZ 加载套路 =load→add，和 GeoJSON 一字不差。

• 样式参数（stroke、fill、strokeWidth）同样支持“加载时一次配完”。

• 后端若想动态生成，只要按 KML 规范吐 XML 或打 ZIP 即可。