How to change the symbology from geojson in cesium

Dear Sir,

I seen one of cesium example with kml that shows different symbology as an example in cesium viewer here is example

I did export all ksa_cities as kml with default symbol from qgis which exported properly and showing fine in qgis as well as cesium viewer but still the symbology is default

i did not see any symbology specification code but how the example is showing different symbology and my data is displaying default symbology

here is my cesium veiw

here is qgis exported kml circle (filled) symbol data

and here is my react code to display ksa_cities

var options = {
camera : this.state.Viewer.scene.camera,
canvas : this.state.Viewer.scene.canvas
};

var dataSource = this.state.Viewer.dataSources.add(this.state.Cesium.KmlDataSource.load(‘data/ksa_cities_kml.kml’, options));
this.state.Viewer.dataSources.add(dataSource);

please answer as soon as possible

Thank you
Mohammed Kabeer

Your KML file can include any custom image as a symbol. You can see that the facilities.kml file referenced in your example links to several PNG images to use as icons:

You could also modify the icons after loading your GeoJSON/KML by loading your icons separately as Scott suggests here: https://groups.google.com/d/msg/cesium-dev/ZrDBGtwlEf8/QDzs3DNwAAAJ.

Dear Sir,

cesium is displaying KML service from GeoServer with the specified symbol. but still, there is one more problem

it is displaying half of the symbol

here is my sld

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



capitals

capitals
kab_point


Capitals



circle


ogc:Literal#FFFFFF</ogc:Literal>




ogc:Literal#000000</ogc:Literal>


ogc:Literal2</ogc:Literal>




ogc:Literal1.0</ogc:Literal>


ogc:Literal10</ogc:Literal>

        </Graphic>
      </PointSymbolizer>
    </Rule>
  </FeatureTypeStyle>
</UserStyle>

please see the attached KML file also

Thank you

Mohammed Kabeer

(Attachment KSA_CITY_E (2).kml is missing)

Dear Sir,

I prepared 3D data and then using Geoserver published as KML service and trying to display in Google earth and cesium

the same KML file shows the data in Google Earth but it doesn’t show the height of the building

but again same KML service in Cesium doesn’t show anything

hee I am uploading the KML file please have a look

Thank you

Mohammed Kabeer

(Attachment tcg-RYD_PARCEL_3D2.kml is missing)

I am attaching sample KML as zip file

Thank you

Mohammed Kabeer

(Attachment tcg-RYD_PARCEL_3D2.rar is missing)

If you’re still having issues, can you re-upload the KML file?

| omar Cesium Staff
May 3 |

  • | - |

If you’re still having issues, can you re-upload the KML file?


Visit Topic or reply to this email to respond.


In Reply To

| Mohammad_Kabeer
April 21 |

  • | - |

I am attaching sample KML as zip file Thank you Mohammed Kabeer [image.jpg] [image.jpg] (Attachment tcg-RYD_PARCEL_3D2.rar is missing)


Visit Topic or reply to this email to respond.

To unsubscribe from these emails, click here.

(Attachment KSA_CITY_E (2) (1).kml is missing)

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> KSA_CITY_E 2 صامطة Samtah صامطة Samtah Active 15000 586049 862333 132374 461155 69 42.7969262151359,16.5679070843665 3 غير معروف Unknown غير معروف Unknown Active 20000 649430 239517 445637 48292 97 42.8796472565447,16.7440268135912 4 غير معروف Unknown غير معروف Unknown Active 25000 664026 779187 532979 538448 96 43.1772148822508,16.7468705312658 5 جيزان Jizaan جيزان Jizaan Active 30000 772448 770586 362615 103641 42 42.7205259192098,16.7808272608731 6 أبو عريش Abu Areesh أبو عريش Abu Areesh Active 35000 673814 163977 451274 698885 59 42.8525100757539,16.9735934370449 7 العريضة Al Aredah العريضة Al Aredah Active 40000 577593 387390 650624 323147 48 43.095912480627,17.0404729101147 9 غير معروف Unknown غير معروف Unknown Active 50000 948964 964248 289731 400153 90 43.1778893616853,17.3692624073097 10 العيدبي Al Idabi العيدبي Al Idabi Active 55000 497075 778939 630259 210943 8 43.0002869827826,17.4182097099252 11 الضميد Daimed الضميد Daimed Active 60000 694971 895335 162892 508484 10 42.7932544729098,17.1859732239986 12 صبيا Sabiah صبيا Sabiah Active 65000 737440 56580 887803 439334 9 42.6381237697533,17.3057411438226 13 غير معروف Unknown غير معروف Unknown Active 70000 143934 299999 777460 364242 119 42.6172740287493,16.9950094875784 14 غير معروف Unknown غير معروف Unknown Active 75000 409404 823403 567132 388141 109 42.3870052593387,17.3586766522464 15 غير معروف UNKNOWN غير معروف UNKNOWN Active 80000 542116 195724 318603 21047 42.2154031200398,17.7258047255547 16 الديار Ad Daiar الديار Ad Daiar Active 85000 548473 400534 412170 826022 89 43.1509164652226,17.6150247782521 18 بدر الجنوب Badr Al Janob بدر الجنوب Badr Al Janob Active 95000 54626 355495 548294 919527 107 43.7695772911085,17.9627736120435 19 حبوانه Habouna حبوانه Habouna Active 100000 202298 834729 266991 975776 22 44.5913354677761,17.8772238821542 1 غير معروف Unknown غير معروف Unknown Active 60000 261854 437242 724659 532362 125 42.9422561937689,16.5011690379379 17 ظهران الجنوب Dahran Al Janob ظهران الجنوب Dahran Al Janob Active 90000 449056 649195 878581 966497 117 43.480871912112,17.8915095806567 8 ظهران الجنوب Dahran Al Janob ظهران الجنوب Dahran Al Janob Active 45000 985483 37922 953855 57792 118 43.1277478563307,17.2636499430992

Actually, it looks like KML/zip file uploads weren’t enabled. I’ve just enabled it now so it should work if you try again.

You can also try from the web interface by going to How to change the symbology from geojson in cesium to upload your file.

thank you for enabling zip upload

here I am uploading the zip file

Thank you
Mohammed Kabeer

(Attachment KSA_CITY_E (2) (1).rar is missing)

(Attachment KSA_CITY_E (2) (1).rar is missing)

| omar Cesium Staff
May 5 |

  • | - |

Actually, it looks like KML/zip file uploads weren’t enabled. I’ve just enabled it now so it should work if you try again.

You can also try from the web interface by going to How to change the symbology from geojson in cesium to upload your file.


Visit Topic or reply to this email to respond.


In Reply To

| Mohammad_Kabeer
May 3 |

  • | - |
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> KSA_CITY_E 2 صامطة Samtah صامطة Samtah Active 15000 586049 862333 132374 461155 69 42.7969262151359,16.5679070843665 3 غير معروف Unknown غير معروف Unknown Active 20000 649430 239517 445637 48292 97 42.8796472…

Visit Topic or reply to this email to respond.

To unsubscribe from these emails, click here.

KSA_CITY_E (2) (1).kml (25.8 KB)

Thanks, I can see the KML file.

You said the issue here is that when you use it in CesiumJS you don’t see anything visualized? I tried dragging and dropping that KML in the Cesium Viewer (https://cesium.com/cesiumjs/cesium-viewer/index.html) and I can see all the icons here:

If you want to fix the icons being partially underground, you’ll need to either set the vertical origin like in this example: https://sandcastle.cesium.com/index.html?src=Billboards.html or disable depth test. Or move their altitude up.

Dear Mr.Omar,

from ion server, it shows properly with the default symbol

but the same data from GeoServer specified symbol is showing half (you can see in the attached snapshot)

here is the react code

var dataSource1 = this.state.Viewer.dataSources.add(this.state.Cesium.KmlDataSource.load(‘http://192.168.100.65:8080/geoserver/wms/kml?layers=KSA_CITY_E1’, options));
//this.state.Viewer.dataSources.add(dataSource);

dataSource1.then(function(data) {
// Change the arcType to GEODESIC, which is what it was in CesiumJS 1.53.
for (var i = 0; i < data.entities.values.length; i++) {
var entity = data.entities.values[i];
if (this.state.Cesium.defined(entity.polygon)) {
entity.polygon.arcType = this.state.Cesium.ArcType.GEODESIC;
// entity.polygon.extrudedHeight = 15;
}
}
this.state.Viewer.dataSources.add(dataSource1);

});

you can try the kml file what I sent you

Thank you
Mohammed Kabeer

If you want to fix the icons being partially underground, you’ll need to either set the vertical origin like in this example: https://sandcastle.cesium.com/index.html?src=Billboards.html or disable depth test. Or move their altitude up.

Here’s how to move the vertical origin when loading your KML:

var ds = Cesium.KmlDataSource.load(
  "../../SampleData/ksa.kml",
  options
);
ds.then(function (dataSource) {
  var ds = viewer.dataSources.add(dataSource);
  for (var i = 0; i < dataSource.entities.values.length; i++) {
    var entity = dataSource.entities.values[i];
    if (Cesium.defined(entity.billboard)) {
      entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
    }
    
  }
  viewer.zoomTo(ds);
});

Dear Mr.Omar,

Thank you for the quick response

I tried the way what you said but still, I see the half symbol

here is the code what I updated as per your suggestion

var options = {
camera : this.state.Viewer.scene.camera,
canvas : this.state.Viewer.scene.canvas,
clampToGround: true
};

var dataSource = this.state.Viewer.dataSources.add(this.state.Cesium.KmlDataSource.load(‘http://192.168.100.65:8080/geoserver/wms/kml?layers=KSA_CITY_E1’, options));
//this.state.Viewer.dataSources.add(dataSource);

dataSource.then(function(data) {
// Change the arcType to GEODESIC, which is what it was in CesiumJS 1.53.
for (var i = 0; i < data.entities.values.length; i++) {
var entity = data.entities.values[i];
if (this.state.Cesium.defined(entity.billboard)) {

entity.billboard.verticalOrigin = this.state.Cesium.VerticalOrigin.BOTTOM;

}
}
this.state.Viewer.dataSources.add(dataSource);
});

Thank you
Mohammed Kabeer

Just to make sure you’re correctly setting these properties, if you replace this line:

entity.billboard.verticalOrigin = this.state.Cesium.VerticalOrigin.BOTTOM;

With:

entity.show = false;

Do all the entities disappear?

Have you tried changing the height reference? Or setting disableDepthTestDistance to a high number so the labels show through?

you are absolutely correct sir,

the properties are not applying.
I tried to console before if and after if so it’s not going inside if

dataSource.then(function(data) {
// Change the arcType to GEODESIC, which is what it was in CesiumJS 1.53.
for (var i = 0; i < data.entities.values.length; i++) {
var entity = data.entities.values[i];
console.log(entity)
if (this.state.Cesium.defined(entity.billboard)) {
console.log(entity)
// entity.billboard.verticalOrigin = this.state.Cesium.VerticalOrigin.BOTTOM;
entity.show = false;
}
}
this.state.Viewer.dataSources.add(dataSource);
});

let me debug it and will let you know

Thank you
Mohammed Kabeer

Billboard property is undefined after assigning to var entity

Thank you
Mohammed Kabeer

If the billboard is undefined, but you are see the icons on the map, then you’re not looking at the right entity/data source.

Maybe try to reproduce the issue a simpler KML that’ll be easier to debug.