I am trying to render arrows using the PolylineArrowMaterialProperty, but the arrow head keep scaling with the distance from camera? I want arrows to be of constant size.

function renderArrow(location, angle, length, height, color) {

let earthRadius = 6400000; //should ideally be crs84 globe based calculation but for small arrow size the difference and inaccuracy is miniscule.

let dy = (length * Math.cos(angle * Math.PI / 180) / earthRadius) * (180 / Math.PI);

let dx = (length * Math.sin(angle * Math.PI / 180) / earthRadius) * (180 / Math.PI);

let centerLocation = 0.5;

let startLat = location.lat - (1 - centerLocation) * dx;

let startLong = location.long - (1 - centerLocation) * dy;

let endLat = location.lat + centerLocation * dx;

let endLong = location.long + centerLocation * dy;

let arrow = viewer.entities.add({

name: 'arrow',

polyline: {

positions: Cesium.Cartesian3.fromDegreesArrayHeights([startLong, startLat, height,

endLong, endLat, height

]),

width: 10,

followSurface: true,

material: new Cesium.PolylineArrowMaterialProperty(color)

}

});

return arrow;

};