how to change the symbology

59 views
Skip to first unread message

Mohammad Kabeer

unread,
Apr 8, 2020, 5:58:41 PM4/8/20
to cesiu...@googlegroups.com, Faisal Al-Tamimi, Mohammad Kabeer
Dear Sir,

I am trying to display some cities over kingdom but not able to change the symbology because default it's taking its own symbology

how to handle symbology for cities (points) in cesium

image.png

can you please send any examples for symbology management

here I want to display something like following as dots or I want to create my own symbol and display

image.png

Thank you
Mohammed Kabeer

Mohammad Kabeer

unread,
Apr 9, 2020, 9:36:16 AM4/9/20
to cesiu...@googlegroups.com, Faisal Al-Tamimi, Mohammad Kabeer, Amzad Alikhan
Dear Sir,

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

image.png

image.png

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 view
image.png

here is qgis exported kml with circle filled symbology
image.png

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

Scott Reynolds

unread,
Apr 9, 2020, 9:56:21 AM4/9/20
to cesium-dev
Here's one way using SVG

var viewer = new Cesium.Viewer('cesiumContainer');

var svg = '<svg width="24px" height="24px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg">';
svg += '<circle cx="24" cy="24" r="10" style="fill:#ff141e;stroke-width:2px;stroke:#ececec;" />';
svg += '</svg>';

svg = 'data:image/svg+xml;base64,' + window.btoa(svg);

var image = new Image();

image.onload = function() {
    viewer.entities.add({
        position : Cesium.Cartesian3.fromDegrees(-85, 40),
        billboard :{
            scaleByDistance: new Cesium.NearFarScalar( 1.0e2, 1.0, 8.0e6, 0.25 ),
            image : image
        }
    });
    viewer.zoomTo(viewer.entities);
};

image.src = svg;


Note also that this forum has moved to Cesium Community.  Future questions should be directed there.

Scott

Reply all
Reply to author
Forward
0 new messages