Question

我试图在OpenLayers地图上绘制一个代表实体的图标，其中包含一个＆＃34;速度领导者＆＃34;，这是一个小的线段，它起源于图标并朝着方向向外绘制实体正在移动。线的长度表示实体的速度。

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

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

编辑：我使用OpenLayers 3.但是，如果有人有旧版本的解决方案，我想听听它。它可能在新版本中被命名。

Answer 1

在这种情况下，使用返回两个样式数组的ol.style.StyleFunction(feature, resolution)是有意义的。第一种风格是关键，第二种风格是速度领先者＃34;。速度领先者的风格＆＃34;使用通过视图分辨率计算的自定义几何图形始终使用相同的像素长度。

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中绘制速度领导者行

1 个答案: