How can I fix this dashed line?

CesiumJS
1

Hello.
I’m working with CesiumJS.
My work is visualizing shapefile and realtime data.

Thanks for Cesium, I nearly reach to goal.
But here is some problem.

This is lines what i made.

now
now1124×605 361 KB

It’s not cool. I need some Fixed dash line.

Here is how can i make dashed lines.

let lineArray = new Array();
lineArray.push(126.95428);
lineArray.push(37.39392);
lineArray.push(50);

lineArray.push(126.95473);
lineArray.push(37.39308);
lineArray.push(50);

var DashedLine = ws3d.viewer.entities.add({
name: ‘test’,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(lineArray),
width: 5,
material: new Cesium.PolylineDashMaterialProperty({
color: color,
dashLength : 50,
}),
clampToGround: true,
show : true,
zIndex : 9,
}
});

How can I make fixed and dashed lines?

thank you.

2

Hi @dizzyto,

Polyline dash materials are implemented in screenspace, not worldspace. Which means that the length of the dash will always be consistant despite the camera view.

If you’re looking to implement a consistant look such as traffic lines, I would suggest using a textured polygon, such as in this example.

1 Like
3

Thanks to you, it seems possible to develop new parts.

But still… here is a problem.

I’m making a dash line to your method which is textured polygon.
But i can’t repeat this texture start to end.

How can i make texture repeat?

4

Hi @dizzyto.

Image materials have a repeat property which you should be able to use.

1 Like
5

Thank you, Gabby! You saved my life!

image

There is some cut line, but it will be fine.
It can be optimize for repeat property.

If you don’t mind, i have some further question.

I make a polyline like this

var DashedLine = ws3d.viewer.entities.add({
name: id,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(lineStartToEnd),
width: width,
material: new Cesium.ImageMaterialProperty({
image: imageURL,
repeat : new Cesium.Cartesian2(repeatX, 1)
}),
clampToGround: true,
show : true,
zIndex : 5,
}
});

But there is a lot of lane in my project.
When i change every lane’s width… it takes a lot of time.

i change polyline’s property like this.

dashedLineGroup.forEach(function(line){
line.polyline.width= dashedLineWidth; // dashedLineWidth is changing.
});

Can i make this task faster?
Or is there something other solution for change polyline’s property?

1 Like
6

For entities, it’s helpful to batch all changes together.

When updating a large amount of entities at once, it’s more performant to queue up changes and send one big event at the end. This way Cesium can process required changes in a single pass. Call viewer.entities.suspendEvents before the viewer.entities.add and call viewer.entities.resumeEvents at the end of the example.

You can also use the lower level Primitive API if performance needs to be optimized further.

1 Like
7

What a beautiful solution… I didn’t expect.
I’ll try it soon.

Thank you for your answer.

I’m curious about other similar methods.
‘nearFarScalar’ method is working in polygon.
How about this method?
Can I apply this method to polyline object?