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;
};