How to calculate and draw a triangular at end of Polyline?

CesiumJS
1

hello all
i am new here
i need your help please

in my cesium map i have a polyline,
i need to draw a triangular that will be at the end of the polyline, and the triangular should be with the same direction that the polyline goes too.

i have all the polyline coordinates,
how do i calculate?

this is the result i want to achieve
image

here is my code base:

 const polylinePoints = points; // this points are the coords of the polyline from my server
   // the points look like that, array of X, Y, X,Y etc - (just example, its dynamic)
   // [(34.738082885743, 31.714782714842, 34.709243774415, 31.713409423827, 34.663925170899, 31.722335815428, 34.607620239259, 31.740875244139, 34.59457397461, 31.761474609373 ]


   const triangular  = [  here should be the calculation of the end and the angle  ];
   viewer.entities.add({
      name: 'triangular  on polyline',
      polygon: {
         hierarchy: Cesium.Cartesian3.fromDegreesArray(triangular),
        },
      });

Thanks all

2

Hi @eliko,
Here is a sandcastle link to achieve this using Rays. The idea isto get the direction vector of your polyline and compute an orthogonal vector.

Let me know if this is not what you wanted to do.

1 Like
3

wow, @clementchdn you are amazing!

First of all thank you very much for the example you created for me in the sandcastle,
Works great for what I needed.

I’m not good at geometry, and I did not quite understand what was going on in the code, the code is very clear and self-explanatory, but I can not understand what the calculation there…
if you have time to put some comments inside the sandcastle i will be thankful

4

You’re welcome.

I added a few comments. I can recommand you try making a drawing of it step by step and reading the documentation of Ray.

I hope this helps. Feel free to notify me if you need more help.

2 Likes
5

hi @clementchdn

this is working great!

but i have a question, is there any way to add the triangular to the same entity of the polyline?
because sometimes in my app i want to delete the polyline from the map, and i want the triangular will be deleted as well automatically when the polyline is deleted

6

No, I don’t think you can since the triangle is drawn using a polyline too.
But you could create a function which deletes both entities and call it. Or you can create a new DataSource containing both entities (the line and the triangle), and remove them from it or remove / destroy the DataSource itself when you don’t need it anymore.
There are surely other ways to achieve whant you want. I think you will have to explore the API and select the option that fits best for you

7

@eliko welcome to the community!

@clementchdn thank you for helping out with this forum post - you offered a lot of great suggestions :+1: