在 OpenLayers 中绘制速度引导线

Question

我正在尝试在包含 "speed leader" 的 OpenLayers 地图上绘制代表实体的图标，这是一条从图标开始并沿实体移动方向向外绘制的小线段.线的长度表示实体的速度。

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

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

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

Answer 1

在这种情况下，使用 ol.style.StyleFunction(feature, resolution) 其中 returns 两种样式的数组是有意义的。第一个样式为点，第二个样式为"speed leader"。 "speed leader" 的样式使用自定义几何图形，该几何图形使用视图分辨率计算，始终使用相同的像素长度。

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/

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

在 OpenLayers 中绘制速度引导线

Drawing a Speed Leader line in OpenLayers

openlayers

openlayers-3