在 OpenLayers 中绘制速度领先线

Question

我试图在 OpenLayers 地图上绘制一个代表实体的图标，其中包含“速度引导线”，它是一条从图标开始并沿实体移动方向向外绘制的小线段。线的长度表示实体的速度。

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

我很想使用 getPixelFromCooperative / getCooperativeFromPixel 来找出对应于我的线端点的地图坐标，然后添加一些钩子以在用户每次缩放地图时重新计算线段。有没有更好的办法？

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

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/

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