在铯中动态地改变线条的样式



使用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文件中的线条并更改其样式?

如果要在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

最新更新