Question

使用Cesium.js的代码的主要部分是这样的：

 var viewer = new Cesium.Viewer('cesiumContainer');
 viewer.dataSources.add(Cesium.KmlDataSource.load('flight-paths.kml');

在flight-paths.kml中，有数百万个这样的节点：

<Placemark>
                <TimeSpan>
                    <begin>2007-01-01T01:50:00Z</begin>
                </TimeSpan>
                <styleUrl>#mairport0_icon0</styleUrl>
                <LineString>
                    <tessellate>1</tessellate>
                    <altitudeMode>absolute</altitudeMode>
                    <coordinates>
-98.1796384517953,47.8244940960245,683352.4617486351           -99.3279951928504,48.3541860848452,689546.54119779
                   </coordinates>
                </LineString>
</Placemark>

如下定义的节点样式：

Style id="mairport0_icon0">
    <LineStyle>
        <color>ff7fff85</color>
        <width>1.5</width>
    </LineStyle>
</Style>

kml文件中有很多样式定义，这意味着我无法手动更改样式定义。如何获取kml文件中的行并更改其样式？

Answer 1

如果想要在JavaScript中以编程方式更改样式而不是更改KML，则可以在使用Cesium API加载KML后更改实体的属性。

假设您想要将线条颜色更改为红色，透明度为50％，请尝试以下操作：

var source = new Cesium.KmlDataSource();
source.load('flight-paths.kml').then(function(){
    var entities = source.entities.values;    
    for(var i =0; i < entities.length; i++) {
        var e = entities[i];
        e.wall.outlineColor = Cesium.Color.RED.withAlpha(0.5);
    }
});
viewer.dataSources.add(source);

请参阅实体墙字段的其他属性 https://cesiumjs.org/Cesium/Build/Documentation/WallGraphics.html

在Cesium中动态更改线条样式

1 个答案: