openlayers - 在 OpenLayers 中绘制速度引导线

Question

我正在尝试在 OpenLayers map 上绘制一个代表实体的图标，其中包括一条“速度领导者”，这是一条从图标开始并沿实体移动方向向外绘制的小线段。线的长度表示实体的速度。

我遇到的问题是我希望线的长度相对于屏幕坐标，但线的角度和位置相对于 map 坐标。因此，当放大时，我不希望线变长，但当平移或旋转时，它应该平移/旋转。

我很想使用 getPixelFromCoordinate/getCoordinateFromPixel 来确定哪个 map 坐标对应于我的线端点，然后添加一些 Hook 以在每次用户缩放 map 时重新计算线段。有没有更好的办法？

编辑:我正在使用 OpenLayers 3。但是，如果有人有针对旧版本的解决方案，我想听听。它可能在新版本中被类似地命名。

Answer 1

在这种情况下，使用 ol.style.StyleFunction(feature, resolution) 是有意义的它返回两种样式的数组。第一种风格是点，第二种风格是“速度领导者”。 “速度领导者”的样式使用自定义几何图形，该几何图形使用 View 分辨率计算，始终使用相同的像素长度。

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/

在这个例子中我没有考虑方向，但我认为它展示了这个想法。