Line Drawing Speed ​​Leader in OpenLayers

Question

I am trying to draw an icon representing an object on an OpenLayers map that includes a “speed leader”, which is a small segment of a line that starts with an icon and extends outward in the direction the object moves. The length of the string indicates the speed of the object.

The problem I am facing is that I want the line length to be relative to the screen coordinates, and the angle and position of the line to be relative to the map coordinates. Thus, when scaling, I would not expect the line to become longer, but when panning or rotating it should translate / rotate.

I am tempted to use getPixelFromCoordinate / getCoordinateFromPixel to find out which map coordinate matches my endpoints of the line, and then add some hook to recalculate the line segment every time the user zooms in on the map. Is there a better way?

Edit: I am using OpenLayers 3. However, if someone has a solution for an older version, I would like to hear that. It may also be named in the new version.

Answer 1

ol.style.StyleFunction(, ), . , " ". " " , , .

var style = function(feature, resolution) {
  var length = feature.get('speed'); // in pixel
  var pointFrom = feature.getGeometry().getCoordinates();
  var pointTo = [
      pointFrom[0] + length * resolution,
      pointFrom[1] + length * resolution
  ];
  var line = new ol.geom.LineString([
      pointTo,
      pointFrom
  ]);

  return [
    // the style for the point
    new ol.style.Style({ ... }),
    // the style for the "speed leader"
    new ol.style.Style({
      geometry: line,
      stroke: new ol.style.Stroke({ ... })
    }),
  ];
};

http://jsfiddle.net/annyL2sc/

, , .