Create Collection of Pins and ArcSplines, render them and being able to address them later

CesiumJS
1

Hi guys,

Basically I want to mention, that I am a Beginner with Cesium.
Anyways, I am currently working on an app, which gets Points where I need to draw Pins. Additionally from another Startpoint I draw an Arc to each Pin.

I actually use following approach:

I calculate the Polylinepoints sequentially with a CatmullRomSpline and add them afterwards to a PolylineCollection:

var polylineCollection = new Cesium.PolylineCollection();
var polyline = polylineCollection.add({
      positions : polylinePoints,
      width : calculateArcWidth(start,end)
    });
    polyline.material = new Cesium.Material({
      fabric : {
        type : 'PolylineGlow',
        uniforms : {
          color : cesiumColor
        }
      }
    });

My target is to calculate these arcs in advance and then to render them all afterwards. I achieve this by adding them to the scene by:

scene.primitives.add(polylineCollection);

My Problem now is, that I didn't find an approach like the shown one for the Pins.

At the moment I create the Pins as follows:

var pinBuilder = new Cesium.PinBuilder();
var Pin = Cesium.when(pinBuilder.fromUrl('Cesium/Assets/Textures/maki/post.png', Cesium.Color.WHITE, 48), function(canvas) {
      return viewer.entities.add({
        name : post.place.name,
        description : post.message,
        fbfeed: new FBfeed("post",user.content,post),
        position : Cesium.Cartesian3.fromDegrees(post.place.location.longitude, post.place.location.latitude),
        billboard : {
          image : canvas.toDataURL(),
          verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
          color : cesiumColor
        },
        point: {
          pixelSize: 5,
          color: cesiumColor,
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 2
        }
      });
    });

With this code snippet, the Pins were all created at the moment of call.
I'd like to store them in a datastructure to be able to later decide to render them or not.

Additionally I am struggeling with that point, that lateron I also want to be able to toggle rendering of sets of arcs and all associated pins and identify them by an id.

So basically I'd like to have a structure looking like that:

renderData: {
    id: <id>,
    pinCollection: <PinCollection>,
    polylineCollection: <polylineCollection>,
    render: <true/false>
}

to be able to search for an ID, and toggle render to display/hide or render/delete from scene.

I'd appreciate any kind of help,
I wasn't able to find related tutorials, demos or questions/discussions which could possibly help me.

I think my target isn't a big Deal, probably anyone knows an easy solution for that?

Thank you in advance!

Best regards,
Nico

2

Hello Nico,

You can add your pins using a BillboardCollection. This is what is happening behind the scenes when you use entities.add.

Similarly, if you need to add points you can use a PointPrimitiveCollection

Best,

Hannah

3

Hi Hannah!

thank you very much, you have directed me into the right direction.

I now use a CustomDataSource where I have added all EntityCollections.

Afterwards I add them to viewer.dataSources and save the return as Reference:

let dataSource = new Cesium.CustomDataSource(user.name);
for (var i = 0; i < user.renderData.posts.length; i++) {
dataSource.entities.add(user.renderData.posts[i]);
}
let dataReference = viewer.dataSources.add(dataSource);
user.renderData.reference = dataReference;

Is there a possibility to toggle the show attribute (as documented it should be only a getter mehtode, but a proposal to change this has been accepted here.),

or do I have to add the source and remove it everytime I want to toggle show? (like here)

This would help me to finish my project :slight_smile:

Thank you in advance!

Best,

Nico