在OpenLayers中绘制速度领导线

Question

我正在尝试在OpenLayers地图上绘制一个实体的图标，其中包括一个“速度指示器”，它是从图标起点开始向外画出的小线段，方向与实体移动的方向相同。该线段的长度表示实体的速度。

我遇到的问题是，我希望线段的长度相对于屏幕坐标而言，但线段的角度和位置相对于地图坐标而言。因此，当缩放时，我不希望线段变得更长，但当平移或旋转时，它应该进行翻译/旋转。

我想使用getPixelFromCoordinate / getCoordinateFromPixel来确定哪些地图坐标对应于我的线段端点，然后添加一些钩子以在用户缩放地图时重新计算线段。是否有更好的方法？

编辑：我正在使用OpenLayers 3。但是，如果有人有旧版本的解决方案，我也想听听。新版本中可能具有类似的名称。

- divido

---

我最终使用了LineString几何和一些三角学来完成这个任务，效果非常好。 - user4773894

Answer 1

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

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/

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

- tsauerwein