How to convert JSON files to a valid CZML?

CesiumJS
1

Hi everyone,

I am trying to convert JSON files to a CZML so that I can use the CZML to describe a time-dynamic scene.

For example,

There are four JSON files. 1. Latitude.json 2. Longitude.json 3. Values.json 4. Time.json

Latitude.json and Longitude.json define a certain region, and Values.json contains the corresponding data within the region based on Time.json.

Did anyone make an similar application could give me some idea of how to do that?

Thanks in advance.

Steven

2

Hey Steven please post the solution if you did find a way to do that.
I am trying the same thing but could not find any online converters.

3

Hi Steven,

Are you having a particular problem converting the data to CZML? There are quite a few Sandcastle examples that demonstrate many of the features of CZML that you should investigate.

Scott

4

Hey scott right now the problem is i have a loads of data which is in proper JSON format and i will get that on daily basis but my method is i wanted to use czml datasource live streaming. For that i need to convert the proper json into czml format so that i could use that format for live streaming.
I need something like a converter tool or any other method to do that but i have no luck on that please tell me you can help me on this.

I am posting the json what i have.

"activityStartDate":"2018-03-03T05:00:00Z",
"activityEndDate":"2018-03-03T05:15:00Z",
"category":"ddos",
"flowRecords":[
{
"startTime":"1520053201",
"endTime":"1520053202",
"srcLat":-12.066670417785645,
"srcLong":-77.0,
"dstLat":37.69224166870117,
"dstLong":-97.33753967285156,
"category":"ddos",
"description":"328"

5

Is this an arbitrary JSON format? I don’t know of any converters that will covert any JSON to CZML, but you can take a look at our CZML Guide and write a fairly straightforward script to convert your data.

Thanks,

Gabby

6

Thanx for letting me know gabby.
One thing i need is to know how to setup the live streaming for CZML data source thing.

I found many examples and guides but could not understand.

I need to know what things must be setup on server side and UI side to achieve that.

Please help me on this just give me few things that i need to consider first.

7

On the server side, you’ll just need to serve your CZML file somehow.

On the UI side, you should be able to implement something like this example. If you want to check if you data is changing, just periodically re-load the czml.

For more info on streaming data, there are plenty of good web development learning resources out there!

8

I use this

var streamingczml = new Cesium.CzmlDataSource();

var pixelRange = 75;

var minimumClusterSize = 3;

var enabled = true;

streamingczml.clustering.enabled = enabled;

streamingczml.clustering.pixelRange = pixelRange;

streamingczml.clustering.minimumClusterSize = minimumClusterSize;

var czmlStreamUrl = ‘http://yoururl/streambaby.php’;

var czmlEventSource = new EventSource(czmlStreamUrl);

var quaternion: any;

var pi: number;

var lon: number;

var lat: number;

var center: any;

var hpr: any;

var mycog: number;

var heading: number;

var pitch: number;

var dataSources: any;

var roll: number;

var counter = 0;

pi = Cesium.Math.PI;

pitch = 0;

roll = 0.0;

var mabox = new Cesium.DistanceDisplayCondition(0, 15000);

var malabel = new Cesium.DistanceDisplayCondition(0, 150000);

czmlEventSource.addEventListener(“czml”, function (czmlUpdate: MessageEvent) { try {

var mamessag = JSON.parse(czmlUpdate.data)

//console.log(mydatasource.entities.getById(mamessag[1].id));

lat = mamessag[1].position.cartographicDegrees[1]

lon = mamessag[1].position.cartographicDegrees[0];

mycog = mamessag[1].properties.cog / 10;

center = new Cesium.Cartesian3.fromDegrees(lon, lat);

if (Cesium.Cartesian3.distance(dummyviewer.scene.camera.positionWC, center) < 50000) {

//console.log(Cesium.Cartesian3.distance(dummyviewer.scene.camera.positionWC, center) + “:” + mamessag[1].name);

heading = (pi * mycog) / 180;

hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);

quaternion = new Cesium.Transforms.headingPitchRollQuaternion(center, hpr);

if (streamingczml.entities.getById(mamessag[1].id) == null) {

streamingczml.process(mamessag);

streamingczml.entities.getById(mamessag[1].id).model.distanceDisplayCondition = mabox;

streamingczml.entities.getById(mamessag[1].id).label.distanceDisplayCondition = malabel;

streamingczml.entities.getById(mamessag[1].id).model.scale = 8;

streamingczml.entities.getById(mamessag[1].id).model.asynchronous = true;

streamingczml.entities.getById(mamessag[1].id).model.minimumPixelSize = 4.0;

streamingczml.entities.getById(mamessag[1].id).model.shadows = false;

streamingczml.entities.getById(mamessag[1].id).model.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND;

streamingczml.entities.getById(mamessag[1].id).label.eyeOffset = new Cesium.Cartesian3(0.0, 80.0, 0.0);

} else {

streamingczml.entities.getById(mamessag[1].id).label.eyeOffset = new Cesium.Cartesian3(0.0, 80.0, 0.0);

}

streamingczml.entities.getById(mamessag[1].id).position = Cesium.Cartesian3.fromDegrees(lon, lat);

tships = streamingczml.entities.values.length;

streamingczml.entities.getById(mamessag[1].id).orientation = quaternion;

} else {

if (streamingczml.entities.getById(mamessag[1].id) != null) {

var bla = streamingczml.entities.removeById(mamessag[1].id);

tships = streamingczml.entities.values.length;

}

}

} catch (t) {

console.error(t);

console.log(czmlUpdate.data)

}

});

this.viewer.dataSources.add(streamingczml);

The streaming php. I figure out the orientation in typescript so the orientation is a placeholder.

<?php function czmlrow($mmsi,$name,$lon,$lat,$navstatus,$shiptype,$timestamp,$rot,$sog,$cog,$dimbow,$dimport,$dimstar,$dimstern,$draught) { if ($rot == '') { $rot .= '128'; } if ($sog == '') { $sog = '1023'; } if ($cog == '') { $cog = '3600'; } if ($cog == ' ') { $cog = '3600'; } $length = 400000; $width = 200000; $depth = 100000; if ($dimbow and $dimport and $dimstar and $dimstern) { $length = ($dimbow + $dimstern)*10000; $width = ($dimstar + $dimport)*10000; $depth = ($width/2)*10000; } print "event: czml\n"; print "data: [ { \"id\":\"document\","; print " \"name\":\"A Ships\","; print " \"version\":\"1.0\""; print "},"; $newname = str_replace('"','',$name); print " {\"id\": \"$mmsi\","; print " \"name\":\"$newname\","; print " \"description\" :\"
Status: $navstatus
Ship Type $shiptype
AIS Type: A
Reported at: $timestamp
Rate of Turn: $rot
Speed over Ground: $sog knots
Course over Ground: $cog
MMSI: $mmsi
GPS to Bow: $dimbow
GPS to Port: $dimport
GPS to Starboard: $dimstar
GPS to Stern: $dimstern
Draught: $draught
\","; print "\"model\": {"; print " \"gltf\": \"http://localhost:4200/assets/models/myship.glb\","; print " \"nodeTransformations\": {"; print " \"node0\": {"; print " \"scale\": {"; print " \"cartesian\": ["; print " $width, $length, $depth"; print " ]"; print " }"; print " }"; print " }"; print " },"; print " \"label\" : {\"fillColor\" : {\"rgba\" : [240, 98, 146, 255]},"; print " \"font\" : \"16pt Roboto Bold\","; print " \"horizontalOrigin\" : \"CENTER\","; print " \"style\" : \"FILL\","; print " \"text\" : \"$newname\","; print " \"showBackground\" : true,"; print " \"backgroundColor\" : { \"rgba\" : [38, 50, 56, 196] }"; print " },"; print " \"position\": { \"cartographicDegrees\": [$lon, $lat, 0] },"; print " \"properties\": {"; print " \"cog\": $cog,"; print " \"lon\": $lon,"; print " \"lat\": $lat"; print " },"; print " \"orientation\": {\"unitQuaternion\": [ -0.181377404434859,0.0902255173561898,0.102596391029801,0.973876570067245 ]}"; print "}]\n\n"; flush(); } header('Cache-Control: no-cache'); header('Content-Type: text/event-stream'); header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Methods: *'); header('Access-Control-Allow-Headers: Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Methods, Access-Control-Request-Headers, Cache-Control'); if ($_SERVER['REQUEST_METHOD'] !== 'OPTIONS') { while(true) { $servername = "someip"; $username = "username"; $password = "password"; $today = date("Y-m-d H:i:s"); $yesterday = date("Y-m-d H:i:s", (strtotime ( '-5 second' , strtotime ( $today) ) )); try { $conn = new PDO("mysql:host=$servername;dbname=ships", $username, $password, array(PDO::ATTR_PERSISTENT => true)); // set the PDO error mode to exception $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); foreach($conn->query("SELECT AsText(Message5.LATLON), Message5.MMSI,Message5.NAME,Navstatus.NAVSTATUS, shiptype.TYPE, Message5.TIMESTAMP, Message5.SHIPTYPE, Message5.ROT, Message5.SOG, Message5.COG, Message5.DIMBOW, Message5.DIMPORT, Message5.DIMSTAR, Message5.DIMSTERN, Message5.DRAUGHT FROM Message5 LEFT JOIN Navstatus on Message5.POSTYPE = Navstatus.CODE LEFT JOIN shiptype on Message5.SHIPTYPE = shiptype.CODE WHERE Message5.LATLON IS NOT NULL AND Message5.TIMESTAMP > '$yesterday' ORDER BY Message5.TIMESTAMP DESC") as $row) { $bla = preg_replace('/POINT\((.*)\)/','$1',$row["AsText(Message5.LATLON)"]); $bla2 = explode(" ",$bla); czmlrow($row["MMSI"],$row["NAME"],$bla2[0],$bla2[1],$row["NAVSTATUS"],$row["TYPE"],$row["TIMESTAMP"],$row["ROT"],$row["SOG"],$row["COG"],$row["DIMBOW"],$row["DIMPORT"],$row["DIMSTAR"],$row["DIMSTERN"],$row["DRAUGHT"]); flush(); } // foreach sleep(5); $conn = null; } catch(PDOException $e) { echo "Connection failed: " . $e->getMessage(); } } // while } // if ?>

``

sleep(x) will control your update interval.

Used here
http://www.deepship.ai/#/globe

9

Forgot

var dummyviewer = this.viewer;

There is an issue that some part of my code do not like this.viewer so I needed a local dummyviewer.

Don’t ask me why :slight_smile:

10

Great, thanks for the update! I’m sure others will find this useful.