Openlayers line arrows

Openlayers line arrows example.

This page's Openlayers line arrows example.

Tags: openlayers

Copy

var raster = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var source = new ol.source.Vector();

var styleFunction = function (feature) {
  var geometry = feature.getGeometry();
  var styles = [
    // linestring
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: '#ffffff',
        width: 2
      })
    })
  ];

var step = getCoordinateStepFromPixel(map, 10);
  var extent = map.getView().calculateExtent(map.getSize());

var prev = 0;
  var segment = 0;
  var arrows = 0;
  geometry.forEachSegment(function (start, end) {
    segment++;

var dx = end[0] - start[0];
    var dy = end[1] - start[1];
    var rotation = Math.atan2(dy, dx);

// arrows
    var distance = Math.sqrt((dx * dx) + (dy * dy));
    var fracStep = step / distance;
    var prevFrac = prev / distance;
    var point;

styles.push(new ol.style.Style({
      geometry: new ol.geom.Point(end),
      image: new ol.style.Circle({
        radius: 3,
        fill: new ol.style.Fill({
          color: '#0ff000'
        })
      })
    }));

for (var frac = prevFrac; frac <= 1; frac += fracStep) {
      point = interpolate(start, end, frac);

if (!ol.extent.containsCoordinate(extent, point)) {
        continue;
      }
      arrows++;

styles.push(new ol.style.Style({
        geometry: new ol.geom.Point(point),
        image: new ol.style.Icon({
          src: 'data/img/arrow.png',
          anchor: [0.75, 0.5],
          rotateWithView: true,
          rotation: -rotation
        })
      }));
    }

if (point) {
      var lastDx = end[0] - point[0];
      var lastDy = end[1] - point[1];
      var lastDistance = Math.sqrt((lastDx * lastDx) + (lastDy * lastDy));

if (lastDistance > 0) {
        prev = step - lastDistance;
      } else {
        prev = 0;
      }
    } else {
      prev += distance - step;
    }
  });
  console.log(segment, arrows);

// geometry.forEachSegment(function(start, end) {
  //     const dx = end[0] - start[0];
  //     const dy = end[1] - start[1];
  //     const rotation = Math.atan2(dy, dx);
  //     // arrows
  //     styles.push(new ol.style.Style({
  //         geometry: new ol.geom.Point(end),
  //         image: new ol.style.Icon({
  //             src: 'arrow2.png',
  //             anchor: [0.75, 0.5],
  //             rotateWithView: true,
  //             rotation: -rotation
  //         })
  //     }));
  // });

return styles;
};
var vector = new ol.layer.Vector({
  source: source,
  style: styleFunction
});

var map = new ol.Map({
  layers: [raster, vector],
  target: 'map',
  view: new ol.View({
    center: [-11000000, 4600000],
    zoom: 4
  })
});

map.addInteraction(new ol.interaction.Draw({
  source: source,
  type: 'LineString'
}));

function interpolate(a, b, frac) // points A and B, frac between 0 and 1
{
  var nx = a[0] + (b[0] - a[0]) * frac;
  var ny = a[1] + (b[1] - a[1]) * frac;
  return [nx, ny];
}

function getCoordinateStepFromPixel(map, step) {
  return Math.abs(map.getCoordinateFromPixel([step, 0])[0] - map.getCoordinateFromPixel([0, 0])[0]);
}

<!DOCTYPE html>
<html>
  <head>
    <title>Openlayers line arrows</title>
    <link rel="stylesheet" href="http://www.3daysofprogramming.com/playground/pg.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Map,Set,Promise"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/css/ol.css">
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>
    <style>
      /**
        * Create a position for the map
        * on the page */
      #map {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="container" class="main">
      <div id="map"></div>
    </div>
    <script>
      var raster = new ol.layer.Tile({
        source: new ol.source.OSM()
      });

      var source = new ol.source.Vector();

      var styleFunction = function (feature) {
        var geometry = feature.getGeometry();
        var styles = [
          // linestring
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#ffffff',
              width: 2
            })
          })
        ];

        var step = getCoordinateStepFromPixel(map, 10);
        var extent = map.getView().calculateExtent(map.getSize());

        var prev = 0;
        var segment = 0;
        var arrows = 0;
        geometry.forEachSegment(function (start, end) {
          segment++;

          var dx = end[0] - start[0];
          var dy = end[1] - start[1];
          var rotation = Math.atan2(dy, dx);

          // arrows
          var distance = Math.sqrt((dx * dx) + (dy * dy));
          var fracStep = step / distance;
          var prevFrac = prev / distance;
          var point;

          styles.push(new ol.style.Style({
            geometry: new ol.geom.Point(end),
            image: new ol.style.Circle({
              radius: 3,
              fill: new ol.style.Fill({
                color: '#0ff000'
              })
            })
          }));

          for (var frac = prevFrac; frac <= 1; frac += fracStep) {
            point = interpolate(start, end, frac);

            if (!ol.extent.containsCoordinate(extent, point)) {
              continue;
            }
            arrows++;

            styles.push(new ol.style.Style({
              geometry: new ol.geom.Point(point),
              image: new ol.style.Icon({
                src: 'data/img/arrow.png',
                anchor: [0.75, 0.5],
                rotateWithView: true,
                rotation: -rotation
              })
            }));
          }

          if (point) {
            var lastDx = end[0] - point[0];
            var lastDy = end[1] - point[1];
            var lastDistance = Math.sqrt((lastDx * lastDx) + (lastDy * lastDy));

            if (lastDistance > 0) {
              prev = step - lastDistance;
            } else {
              prev = 0;
            }
          } else {
            prev += distance - step;
          }
        });
        console.log(segment, arrows);

        // geometry.forEachSegment(function(start, end) {
        //     const dx = end[0] - start[0];
        //     const dy = end[1] - start[1];
        //     const rotation = Math.atan2(dy, dx);
        //     // arrows
        //     styles.push(new ol.style.Style({
        //         geometry: new ol.geom.Point(end),
        //         image: new ol.style.Icon({
        //             src: 'arrow2.png',
        //             anchor: [0.75, 0.5],
        //             rotateWithView: true,
        //             rotation: -rotation
        //         })
        //     }));
        // });

        return styles;
      };
      var vector = new ol.layer.Vector({
        source: source,
        style: styleFunction
      });

      var map = new ol.Map({
        layers: [raster, vector],
        target: 'map',
        view: new ol.View({
          center: [-11000000, 4600000],
          zoom: 4
        })
      });

      map.addInteraction(new ol.interaction.Draw({
        source: source,
        type: 'LineString'
      }));

      function interpolate(a, b, frac) // points A and B, frac between 0 and 1
      {
        var nx = a[0] + (b[0] - a[0]) * frac;
        var ny = a[1] + (b[1] - a[1]) * frac;
        return [nx, ny];
      }

      function getCoordinateStepFromPixel(map, step) {
        return Math.abs(map.getCoordinateFromPixel([step, 0])[0] - map.getCoordinateFromPixel([0, 0])[0]);
      }
    </script>
  </body>
</html>