heremaps/harp.gl

Line caps not showing

mbob001 opened this issue · 13 comments

Describe the bug
I defined style for solid-line with caps. But caps not showing in map.

To Reproduce
Steps to reproduce the behavior:

  1. Define style for solid-line
    styles: { history: [ { technique: "solid-line", renderOrder: 10002, attr: { color: "#09f", lineWidth: 2, metricUnit: "Pixel", caps: "Square", } } ] }

  2. Add feature one line with more points
    ` let points = [];
    for (var i = 0; i < data.length; i++) {
    points.push([data[i].Longitude, data[i].Latitude]);
    }

     let lines = new harp.MapViewLineFeature(points, {
         name: "history"
     });
     let historySource = new harp.FeaturesDataSource({
         name: "history",
         styleSetName: "history",            
         features: [lines]
     });
     this.map3D.addDataSource(historySource);`
    

Expected behavior
I expect line with start or end with caps or caps for each point.

Screenshots
No caps :(
nocaps

Additional context
My target is to show arrows of direction line.

Thanks.

@mbob001 , thank you. Let me take a look and I'll get back to you

@mbob001 , I took another look at the line, it looks ilke it is using a square cap, see attached image:
Screenshot 2021-05-18 at 12 45 07

Can you please increase the line width to say 40 and show me the result?

Here it is.
nocaps2

nocaps3

Ok, looks good, should I close the issue?

So, caps mean line is drawed by the value? In this example as a sqaure brush?
How can I draw points of line as circle or square, see picture?
nocaps

Do I have to insert new features as points?
Thanks.

The caps just means how the line ends are rendered, for example, square caps look like:

webglrenderer-solid-lines-caps-square-20px current

Circle caps look like:

webglrenderer-solid-lines-caps-round-20px current

Ahh ok, I see what you want.

Have you tried: https://www.harp.gl/docs/master/examples/#styling_square-technique.html ?

I.e. using technique:squares or technique:circles ?

I am looking for something like that:
https://openlayers.org/en/latest/examples/line-arrows.html

Example:
arrows

We have an example here: https://www.harp.gl/docs/master/examples/#markers_dynamic.html

Which dynamically adds markers using the MapViewPointFeature... but I don't know how to specify the direction. @atomicsulfate , do you know?

Yes, I know that. I think I have to calculate direction from the lines and then draw arrows as a points.
Thanks.

Yes, calculating the direction is ok, I just don't know how to pass the direction to the marker so that it can be rotated.

@mbob001, I asked internally, such a feature isn't available yet unfortunately.

Ok, thanks for your help.