Cesium加载KML文件并为其添加边框的实现问题

需求 #

加载KML文件后，为其中的多边形要素添加黑色边框。

初始尝试代码 #

用户尝试的加载代码：

var canvas = viewer.dataSources.add(Cesium.KmlDataSource.load('./assets/doc.kml', {
    camera: viewer.scene.camera,
    canvas: viewer.scene.canvas
}));

添加边框的尝试代码：

canvas.then(function (dataSource) {
    viewer.dataSources.add(dataSource);
    viewer.clock.shouldAnimate = false;
    var entities = dataSource.entities.values;                    
    for (var i = 0; i < entities.length; i++) {
        var entity = entities[i];
        entity.polygon.outline = true; 
        console.log(entity.polygon.outline)
        entity.polygon.outlineColor = Cesium.Color.BLACK;
    }
}

修正后的解决方案 #

上述代码存在重复添加数据源的问题，同时缺少实体类型判断，以下是修正后的完整代码：

// 加载KML文件并添加到视图数据源
var kmlLoadPromise = viewer.dataSources.add(Cesium.KmlDataSource.load('./assets/doc.kml', {
    camera: viewer.scene.camera,
    canvas: viewer.scene.canvas
}));

// KML加载完成后批量设置多边形边框
kmlLoadPromise.then(function (dataSource) {
    viewer.clock.shouldAnimate = false;
    var entities = dataSource.entities.values;                    
    for (var i = 0; i < entities.length; i++) {
        var entity = entities[i];
        // 仅对多边形实体设置边框属性
        if (entity.polygon) {
            entity.polygon.outline = true;
            entity.polygon.outlineColor = Cesium.Color.BLACK;
            // 可选：调整边框宽度
            entity.polygon.outlineWidth = 2;
        }
    }
});

关键说明 #

1. 移除重复的viewer.dataSources.add(dataSource)：viewer.dataSources.add接收加载KML的Promise后，会自动在加载完成时将数据源添加到视图，无需二次调用。
2. 增加实体类型判断：通过if (entity.polygon)确保只处理多边形要素，避免对KML中的点、线等其他类型实体操作导致的错误。
3. 可选设置outlineWidth：用于调整边框的粗细，提升视觉辨识度。

内容的提问来源于stack exchange，提问作者Alibert wan