Cesium调用exportKml导出的KML在Google Earth无法正常显示求助

我在Cesium中调用exportKml方法导出实体的KML文件后，在Google Earth里没法正常显示，求指点哪里操作错了？

代码示例 #

const viewer = new Cesium.Viewer("cesiumContainer");

const cyanPolygon = viewer.entities.add({
  name: "Cyan vertical polygon with per-position heights and outline",
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([
      -90.0,
      41.0,
      -85.0,
      43.0,
      -80.0,
      41.0
    ]),
    material: Cesium.Color.CYAN.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.RED,
  },
});

viewer.zoomTo(viewer.entities); 

Cesium.exportKml({entities: viewer.entities,kmz: false}).then(function(result) {
  console.log(result.kml);
});

显示效果 #

• Cesium中导出实体的显示效果：
• 导出的KML在Google Earth中的显示效果：

导出的KML内容 #

<kml
    xmlns="http://www.opengis.net/kml/2.2"
    xmlns:gx="http://www.google.com/kml/ext/2.2">
    <Document
        xmlns="">
        <Style id="style-1">
            <LineStyle>
                <width>1</width>
                <color>ff0000ff</color>
                <colorMode>normal</colorMode>
            </LineStyle>
            <PolyStyle>
                <color>80ffff00</color>
                <colorMode>normal</colorMode>
                <outline>1</outline>
            </PolyStyle>
        </Style>
        <Placemark id="fe4efe40-8939-446f-a1d4-f55becbaf2ba">
            <name>Cyan vertical polygon with per-position heights and outline</name>
            <visibility>1</visibility>
            <description></description>
            <styleUrl>#style-1</styleUrl>
            <Polygon>
                <outerBoundaryIs>
                    <LinearRing>
                        <coordinates>-90,40.99999999999999,0 -85,42.99999999999999,0 -80,41,0</coordinates>
                    </LinearRing>
                </outerBoundaryIs>
                <altitudeMode>absolute</altitudeMode>
            </Polygon>
        </Placemark>
    </Document>
</kml>

问题原因及解决方法 #

核心问题点 #

1. 海拔模式不兼容：导出的KML使用了<altitudeMode>absolute</altitudeMode>，但多边形高度设为0，Google Earth中absolute模式下0高度会和地形产生冲突，容易被遮挡或无法正确渲染。
2. 颜色格式不匹配：Cesium的颜色格式是RRGGBBAA，但KML标准（Google Earth遵循）的颜色格式是AABBGGRR，导致导出的青色变成了黄色。
3. 冗余坐标精度：导出的坐标带了过多小数位（如40.99999999999999），虽不影响解析，但可能引发微小渲染偏移。

解决步骤 #

1. 修改海拔模式为贴合地面

在Cesium实体中添加heightReference属性，让导出的KML自动使用clampToGround模式：

const cyanPolygon = viewer.entities.add({
  name: "Cyan vertical polygon with per-position heights and outline",
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([
      -90.0,
      41.0,
      -85.0,
      43.0,
      -80.0,
      41.0
    ]),
    material: Cesium.Color.CYAN.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.RED,
    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND // 新增此行
  },
});

2. 修正颜色格式

手动转换Cesium颜色到KML格式：

• Cesium的CYAN.withAlpha(0.5)对应RRGGBBAA格式的ffff0080，转换为KML的AABBGGRR格式就是8000ffff
• 导出后修改KML中的<PolyStyle>颜色值：

<PolyStyle>
    <color>8000ffff</color>
    <colorMode>normal</colorMode>
    <outline>1</outline>
</PolyStyle>

3. 优化坐标精度（可选）

在生成坐标时保留合适小数位，避免冗余：

// 手动处理坐标，保留2位小数精度
const positions = Cesium.Cartesian3.fromDegreesArray([
  -90.0,
  41.0,
  -85.0,
  43.0,
  -80.0,
  41.0
]).map(cartesian => {
  const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
  return Cesium.Cartesian3.fromRadians(
    cartographic.longitude,
    cartographic.latitude,
    cartographic.height
  );
});

内容的提问来源于stack exchange，提问作者A. Mort