在 Cesium 中动态改变线条的样式

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);

参考Entity wall字段的其他属性。
https://cesiumjs.org/Cesium/Build/Documentation/WallGraphics.html

在 Cesium 中动态改变线条的样式

Change the style of lines dynamically in Cesium

kml

cesium