How to create a line that has two arrows in Cesium?

CesiumJS
1

Cesium has various polyline materials (PolylineArrow, PolylineDash, PolylineGlow etc.) but

I want to draw a polyline consisting of lines that has an arrow in their head and an arrow in their center.

For example, material’s name can be “PolylineTwoArrow”.


2

Hi Aston,

You can create a custom polyline fabric. Here is an example of someone using fabric to create a dashed arrow: sandcastle. Please visit our wiki on Fabric here.

Another way you can approach this is to concatenate multiple arrow lines together.

1 Like
3

is there a way that each dash points particular direction?

4

@Kishore_p

Could you provide an example of what you are looking for? I am having trouble understanding what kind of graphic you are looking for.

Best,
Sam

5

image
image1920×1440 168 KB

1 Like
6

Looking for directed arrows between each waypoints in the middle!

1 Like
7

@Kishore_p

Thank you for the details! Here is a basic sandcastle demo to get you started:

In this demo, I showcase how to use CZML Polylines to construct lines with arrows. I am using a CZML Point for the waypoint. Alternatively, you could use the Billboard object.

https://cesium.com/learn/cesiumjs/ref-doc/Billboard.html?classFilter=bill

For a more involved use case, I suggest using linear interpolation to determine how to partition larger segments of the line.

Linear interpolation - Wikipedia.

Best,
Sam

1 Like
8

Screen Shot 2021-08-02 at 11.12.37 AM
Screen Shot 2021-08-02 at 11.12.37 AM1920×1051 36.3 KB

Thanks Sam for your help.Yeah I iteratively called the line and attaching screenshot if someones needs to have a look as well.

2 Likes
9

@Kishore_p

I am glad that I was able to help you out with a sandcastle demo. Your screenshot looks amazing! Thank you for sharing this with me. If possible, we would love to see your completed project when the time comes. We are always looking for community work to showcase and celebrate!

Best,
Sam