KML - Change color

CesiumJS
1

Hi,

I want to change the styleUrl of the Placemark of the KML file dynamically, how can I do that?

    <Placemark id="KMLGeom_Building_6327_RoofSurface">
        <name>Building_6327_RoofSurface</name>
        <styleUrl>#RoofSurfaceNormal</styleUrl><dato>Pruebaaa</dato>
        <MultiGeometry>
            <Polygon>
                <altitudeMode>relativeToGround</altitudeMode>
                <outerBoundaryIs>
                    <LinearRing>
                        <coordinates>-2.6713528868412886,42.84945799752587,13.225999999999999 -2.6713709123656204,42.84949767265765,13.225999999999999 -2.6715828020335723,42.84944478903282,13.225999999999999 -2.6716329172241813,42.849433766173846,13.225999999999999 -2.671622884135575,42.8494101434693,13.225999999999999 -2.671572656117998,42.849419364936914,13.225999999999999 -2.671567092663764,42.84940683158798,13.225999999999999 -2.671459989891903,42.84943239659686,13.225999999999999 -2.6713528868412886,42.84945799752587,13.225999999999999 -2.6713528868412886,42.84945799752587,13.225999999999999 </coordinates>
                    </LinearRing>
                </outerBoundaryIs>
            </Polygon>
        </MultiGeometry>
    </Placemark>

    <Style id="RoofSurfaceNormal">
        <LineStyle>
            <color>C8000099</color>
        </LineStyle>
        <PolyStyle>
            <color>C83333FF</color>
        </PolyStyle>
        <BalloonStyle>
            <text>$[description]</text>
        </BalloonStyle>
    </Style>

Thanks in advance

Best regards

2

Hello,

Once a KML file has been loaded, I don’t think you can specify a different style id.

However, you can use the Entity API to change properties of the entities programmatically after they’ve been created.

Here is an example:

var viewer = new Cesium.Viewer(‘cesiumContainer’);
var options = {
camera : viewer.scene.camera,
canvas : viewer.scene.canvas
};

var kml = ’<?xml version="1.0" encoding="UTF-8"?>


Building_6327_RoofSurface
#RoofSurfaceNormalPruebaaa


relativeToGround


-2.6713528868412886,42.84945799752587,13.225999999999999 -2.6713709123656204,42.84949767265765,13.225999999999999 -2.6715828020335723,42.84944478903282,13.225999999999999 -2.6716329172241813,42.849433766173846,13.225999999999999 -2.671622884135575,42.8494101434693,13.225999999999999 -2.671572656117998,42.849419364936914,13.225999999999999 -2.671567092663764,42.84940683158798,13.225999999999999 -2.671459989891903,42.84943239659686,13.225999999999999 -2.6713528868412886,42.84945799752587,13.225999999999999 -2.6713528868412886,42.84945799752587,13.225999999999999







C8000099


C83333FF


$[description]

';

var parser = new DOMParser();
var promsie = Cesium.KmlDataSource.load(parser.parseFromString(kml, “text/xml”), options);
viewer.dataSources.add(promsie);
viewer.zoomTo(promsie);

Sandcastle.addToolbarButton(‘Custom styling’, function() {
promsie.then(function(dataSource) {
var entities = dataSource.entities.values;
var entity = entities[1];
entity.polygon.material = Cesium.Color.BLUE;
});
});

``

Best,

Hannah

3

And if we have more geometries?

var viewer = new Cesium.Viewer(‘cesiumContainer’);
var options = {
camera : viewer.scene.camera,
canvas : viewer.scene.canvas
};

var kml = ’<?xml version="1.0" encoding="UTF-8"?> Building_6327_RoofSurface #RoofSurfaceNormalPruebaaa relativeToGround -2.6713528868412886,42.84945799752587,13.225999999999999 -2.6713709123656204,42.84949767265765,13.225999999999999-2.6715828020335723,42.84944478903282,13.225999999999999-2.6716329172241813,42.849433766173846,13.225999999999999-2.671622884135575,42.8494101434693,13.225999999999999 -2.671572656117998,42.849419364936914,13.225999999999999 -2.671567092663764,42.84940683158798,13.225999999999999 -2.671459989891903,42.84943239659686,13.225999999999999 -2.6713528868412886,42.84945799752587,13.225999999999999 -2.6713528868412886,42.84945799752587,13.225999999999999 Building_8855_RoofSurface #RoofSurfaceNormalPruebaaa relativeToGround -2.674666188600719,42.84882956808364,13.82400000000007 -2.6746611698610585,42.848829733929875,13.82400000000007 -2.6746651712023053,42.84888350704849,13.82400000000007 -2.6746655237077315,42.848886299698684,13.82400000000007 -2.6746679331172167,42.8489169246261,13.82400000000007 -2.6746756612986498,42.849006819657625,13.82400000000007 -2.674706019065765,42.849005735217126,13.82400000000007 -2.674705674591102,42.84900141168587,13.82400000000007 -2.674709590929352,42.84900142281218,13.82400000000007 -2.6747571970265196,42.84900191826304,13.82400000000007 -2.6747577697230716,42.848986070530266,13.82400000000007 -2.674765234768599,42.84898618178813,13.82400000000007 -2.674761652443259,42.84889918024051,13.82400000000007 -2.674766548330479,42.84889910409412,13.82400000000007 -2.6748342288569704,42.84889902615998,13.82400000000007 -2.6748339967488732,42.84884994651705,13.82400000000007 -2.6748305699612343,42.84884993678529,13.82400000000007 -2.6748316751628693,42.84882589572445,13.82400000000007 -2.6748250644712384,42.84882623716319,13.82400000000007 -2.67478858942223,42.84882694404791,13.82400000000007 -2.674702174111509,42.84882885984712,13.82400000000007 -2.674666188600719,42.84882956808364,13.82400000000007 -2.674666188600719,42.84882956808364,13.82400000000007 C8000099 C83333FF $[description] ';

var parser = new DOMParser();
var promsie = Cesium.KmlDataSource.load(parser.parseFromString(kml, “text/xml”), options);
viewer.dataSources.add(promsie);
viewer.zoomTo(promsie);

Sandcastle.addToolbarButton(‘Custom styling’, function() {
promsie.then(function(dataSource) {
var entities = dataSource.entities.values;
var entity = entities[1];
entity.polygon.material = Cesium.Color.BLUE;
});
});

``

4

You can loop through entities a and make changes accordingly.
You should be able to use the entity.id property to identify which entity you are working with.

You can also do entities.getById(‘id’) to select a specific entity by id.

-Hannah

5

Thank you very much!