Gradient for PolylineGraphics

CesiumJS
1

Hi everyone. I need to make a gradient for PolylineGraphics. If its height is up to 1000, the color of the polyline segment is blue, if it is up to 3000 - yellow, if it is over 3000 - red. How to do it?

let entity = new Entity({
					id: item.UID,
					name: item.name,
					icon_type: item.icon_type,
					position: Cartesian3.fromDegrees(
						item!.L * Math.DEGREES_PER_RADIAN,
						item!.B * Math.DEGREES_PER_RADIAN,
						item!.H
					),
					orientation: new CallbackProperty(() => {
						return orientation;
					}, false),
				});
                           entity.polyline = new PolylineGraphics({
					positions: new CallbackProperty(() => {
						let points = WallAirData!.get(item!.UID)
			
						let arrayHeights = [
							points[points.length - 3],
							points[points.length - 2],
							points[points.length - 1],
							points[points.length - 3], 
							points[points.length - 2], 
							0
						]
						return Cartesian3.fromDegreesArrayHeights(arrayHeights)
					}, false),
					show: storeProjectionStatusAll
				})
2

Hi there,

This would be possible by using fabric and a custom shader code, but that will require writing some lower-level graphic code.

Can you explain your use case a bit? There may be an alternative approach.

3

Hi, Gabby! Here’s my code:

entity.polyline = {
					positions: new CallbackProperty(() => {
						let points = WallData!.get(item!.ID)
						let arrayHeights = [
							points[points.length - 3],
							points[points.length - 2],
							points[points.length - 1],
							points[points.length - 3], 
							points[points.length - 2],
							0
						]
						return Cartesian3.fromDegreesArrayHeights(arrayHeights)
					}, false),
					show: oldEntity.polyline?.show?.getValue(),
					
				}