To pick/click entity and retrieve data from server, to plot polyline primitive

CesiumJS
1

Hi all,

Is there a way that when I click an entity on the screen, it is able to retrieve data from the server side, and thus plot a series of points and polyline primitive onto the Cesium viewer.

I should need to use Websocket to do it, however I am unsure of how the code is supposed to be.

Is there any relation to "Picking" in https://groups.google.com/forum/#!searchin/cesium-dev/picking$20entity/cesium-dev/OY0vDojoiKc/sJeoETOLFDsJ

I have come up with a polyline primitive "drawer/plotter", which require to take in the positions and colors data. My code is similar to what is shown here. https://groups.google.com/forum/#!searchin/cesium-dev/polyline$20primitive/cesium-dev/E7MW7RrQmes/r2awxBTiCQAJ

So what is needed for me to achieve what I want as stated.

Sorry for the poor evaluation of my problem. I will try my best to answer if there are any questions posted with regard to the doubts of my problem.

2

Hello,

The picking example will show you how to get the entity you click on. Look at the ‘Pick Entity’ section of the code. From there you can send the ID or whatever data you need to get from the entity back to your server.

I can’t help you when your client/server communication, but once you receive the data back form your server, you can add the points and polylines to the globe based on that data.

Look at this example for how to draw polylines: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Polyline.html&label=Geometries

And this example for how to draw points: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Points.html&label=All

Best,

Hannah

3

Hi Hannah,

So how do I set/obtain the windowPosition to put into the function of pickEntity.

What is the way to obtain the Cartesian2 coordinates by clicking on the map of cesium?

4

This is what I have tried according to some of the examples people have did but I am still having error with regard to picking entity. I also do not understand the full picture of how to get "windowPosition".

var _click = function click(){
  var scene = viewer.scene;
  var ellipsoid = scene.globe ellipsoid;

  var handler = new Ceisum.ScreenSpaceEventHandler(scene.canvas);
  handler.setInputAction(function(event){
     var cartesian = scene.camera.pick(event.position, ellipsoid);
  }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

  // I think I am having an error here, as pickEntity here is supposed to have pickEntity(viewer, windowPosition), but I am not sure how do I get this windowPosition for the function pickEntity.

  pickEntity(viewer, cartesian);
  
}

so the function pickEntity is same as what is posted in the example, where

function pickEntity(viewer, windowPosition){

  var picked = viewer.scene.pick(wintdowPosition);
  if (defined(picked)) {
     var id = Cesium.defaultvalue(picked.id, picked.primitive.id);
     if (id instanceof Cesium.Entity) {
          return id;
     }
  }
  return undefined;
}

So what I am trying to create here to that when I as a client double click on this position/entity, it will receive this "entity id" then this id will in the end be used to call back to server and retrieve some data from the database then it will plot the line.

Is this supposed to be the right approach??
And please help me to troubleshoot the error where cartesian is not defined in "pickEntity(viewer, cartesian)".

The error is "Uncaught ReferenceError: cartesian is not defined".

How do I get "windowPosition" in this case if it is not cartesian?

Thanks alot for anyone help!

5

Hello,

pickedObject.id will get you the entity. pickedObject.id.id will get you the ID of the entity.

Here is a code example:

var viewer = new Cesium.Viewer(‘cesiumContainer’, {
selectionIndicator : false,
infoBox : false
});

var scene = viewer.scene;
var handler;
var entity = viewer.entities.add({
id: ‘billboard1’,
position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
billboard : {
image : ‘…/images/Cesium_Logo_overlay.png’
}
});

handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function(click) {
var pickedObject = scene.pick(click.position);
if (Cesium.defined(pickedObject)) {
console.log(pickedObject.id.id);
}
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

``

Best,

Hannah