CODEWITHSUNDEEP
gisopenlayers-3
BiJ
BiJ

Reputation: 1689

Openlayers 3 draw start point(CSP) of a line string

I have geojson for a line string as shown below. 

{
    "type" : "LineString",
    "coordinates" : [[123.5555, 26.33869, 0], [123.5555, 33.5555, 0], [123.5555, 40.763938, 0], [126.460214, 40.378269, 0]]
}

I need to draw a triangle at the beginning of the line string to indicate the direction and the starting point. The tip of the triangle should point to the direction in which the line string is progressing considering the first 2 set of coordinates.

enter image description here

Any suggestion on how to achieve this. Should I draw the triangle by calculating the corner points? Should I use an image with some rotation to it if yes then how can I calculate the rotation degree?

Upvotes: 0

Views: 1406

Answers (1)

pavlos
pavlos

Reputation: 3081

You may achieve that using a style function for your vector layer representing your geojson geometry.

So your style function should be something like this(the sample function adds an arrow on every segment of your line):

var styleFunction = function(feature) {
var styles = [
    // linestring
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: '#ffcc33',
        width: 2
      }),
      fill: new ol.style.Fill({
      color: 'rgba(255,0,0,0.5)'
      })
    })
  ];
    var geometry = feature.getGeometry();
    geometry.forEachSegment(function(start, end) {
    var dx = end[0] - start[0];
    var dy = end[1] - start[1];
    var rotation = Math.atan2(dy, dx);
    // arrows
    styles.push(new ol.style.Style({
      geometry: new ol.geom.Point(start),
      image: new ol.style.Icon({
        src: 'http://openlayers.org/en/v3.14.2/examples/data/arrow.png',
        anchor: [0.75, 0.5],
        rotateWithView: false,
        rotation: -rotation
      })
    }));
  });

  return styles;
};

and then asign this function to the style parameter of your vector layer

check this fiddle

and here one more fiddle to add the arrow only in the first segment of your line

Upvotes: 1

Related Questions