Using Apache Camel Websockets and Cesium
super...@gmail.com
To test that the CZML packets are sent over correctly I'm outputting them in a div tag below the Cezium one.
Currently the "Chat" window displays all the incoming data however Cesium keeps throwing this error "The first CZML packet is required to be the document object."
I've tried googling the error and the only solution I could find was to add the line:
var response = JSON.parse(m.data);
However I already have this line in place.
The data that I'm sending across and that get's output in the textbox looks like this:
{ "id" : "PredatorUAV", "position" : { "referenceFrame" : "FIXED", "cartographicDegrees" : [ "-75.5", "40", "100.0" ] }, "point" : { "color" : { "rgba" : [ "0", "0", "255", "1" ] }, "outlineColor" : { "rgba" : [ "0", "0", "255", "1" ] }, "outlineWidth" : 0.0, "pixelSize" : 15.0, "show" : true } }
Any help would be greatly appreciated. I've copied my web page below.
<html>
<head>
<title>Camel Cesium</title>
<script src="../Build/Cesium/Cesium.js"></script>
<script type='text/javascript'>
if (!window.WebSocket) {
alert("WebSocket not supported by this browser");
}
function $() { return document.getElementById(arguments[0]); }
</script>
<style type='text/css'>
div { border: 0px solid black; }
div#chat { clear: both; width: 80em; height: 60ex; overflow: auto; background-color: #f0f0f0; padding: 4px;
border: 1px solid black; }
</style>
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
</style>
</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<div id='chat'></div>
<script type='text/javascript'>
var viewer = new Cesium.Viewer('cesiumContainer');
var czmlDataSource = new Cesium.CzmlDataSource();
viewer.dataSources.add(czmlDataSource);
var room = {
join: function(name) {
this._username=name;
var location = "ws://localhost:9090/czml-stream";
this._ws=new WebSocket(location);
this._ws.onmessage=this._onmessage;
this._ws.onclose=this._onclose;
},
_onmessage: function(m) {
if (m.data){
// Parse our message data
var response = JSON.parse(m.data);
czmlDataSource = new Cesium.CzmlDataSource();
czmlDataSource.process(response);
viewer.dataSources.add(czmlDataSource);
// This code displays the text bellow
var chat=$('chat');
var spanText = document.createElement('span');
spanText.className='text';
spanText.innerHTML=m.data;
var lineBreak = document.createElement('br');
chat.appendChild(spanText);
chat.appendChild(lineBreak);
chat.scrollTop = chat.scrollHeight - chat.clientHeight;
}
},
_onclose: function(m) {
this._ws=null;
}
};
room.join("Testing");
</script>
</body>
</html>
Chris M.
super...@gmail.com
That small fix has stopped the errors being thown!
Unfortunately the point's are not appearing on the map though but I'll keep looking into it.
Thank you very much for your help.
Chris M.
super...@gmail.com
Thanks for your help!
super...@gmail.com
Using the code above (https://groups.google.com/d/msg/cesium-dev/atKu-U0LOlU/2UQpJYcmCwAJ) I'm processing each response when the websocket gets a message. This means every message has to be it's own document.
When cesium is processing it, another dot is being added rather than replacing it even though they have the same id. (As suggested here https://groups.google.com/d/msg/cesium-dev/LmabF3RwFj8/xvqqpE7WCi8J )
I'm a little confused as to why this is happening. Any suggestions are welcome.
Scott Hunter
--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.