I was able to draw the line and put icon at the end of line but next problem was how to rotate the Arrow image so that direction Arrow Line looks proper. So to find the angle to rotate arrow image you need to calculate -
- Slope of the line
- The quadrant in which line reside with respect to map co-ordinate system
First render map as -
Now suppose say we want to draw line from Source point (Using Cities in India) Nagpur (79.0900, 21.1500) to Mumbai(72.776714, 18.948932), New Delhi(77.2090,28.6139), Patna(85.1000,25.6000) and Hyderabad(78.4800,17.3700)
We declare a array called ‘coordinates’ and transform these into EPSG:3857 by iterating over ‘coordinates’ and store into’ transformedCoordinates’
And then we render cluster of the coordinates for each city. Now we need to draw line from Nagpur city to other this is done by using LineString
Now most important part come drawing arrow heads, we can draw any icon using ’ol.style.Icon’ but we need to rotate it so that its direction is proper for this we first calculate the angle of inclination of the line between city using -
Now we need to determine the quadrant in which these line reside with respect to Origin point (Nagpur), we first shift the origin of the map to Nagpur as -
And then decide the rotation for our image as -
The rotation angle calculation depends the image that you are using, here I am using vertical arrow head (^) , if you are using some other image do corresponding changes in Quadrant condition above.
And we are done now simply use this rotation angle for the arrow head and add layer to map.
The complete code can be found in this fiddle. Hope it helps!!