在OpenLayers中绘制速度领导者线 [英] Drawing a Speed Leader line in OpenLayers

问题描述

我试图在OpenLayers地图上绘制一个表示实体的图标，其中包括速度领导者"，这是一条始于该图标并沿该实体移动方向向外绘制的小线段.线的长度表示实体的速度.

I'm trying to draw an icon representing a entity on an OpenLayers map that includes a "speed leader", which is a small line segment that originates at the icon and draws outward in the direction the entity is moving. The length of the line indicates the speed of entity.

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

The problem I'm running into is that I want the length of the line to be relative to screen coordinates, but the angle and position of the line to be relative to map coordinates. Thus, when zooming in, I would not expect the line to become longer, but when panning or rotating, it should translate/rotate.

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

I'm tempted to use getPixelFromCoordinate / getCoordinateFromPixel to figure out what map coordinate corresponds to my line end points, then add some hook to recalculate the line segment every time the user zooms the map. Is there a better way?

我正在使用OpenLayers3.但是，如果有人对旧版本有解决方案，我想听听.在新版本中可能会类似地命名.

I'm using OpenLayers 3. However, if anyone has a solution for an older version, I'd like to hear it. It may be similarly named in the new version.

推荐答案

在这种情况下，可以使用

In this case it would make sense to use a ol.style.StyleFunction(feature, resolution) which returns an array of two styles. The first style is for the point, the second style for the "speed leader". The style for the "speed leader" uses a custom geometry which is calculated with the view resolution to always use the same length in pixels.

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/

在此示例中，我没有考虑方向，但我认为它表明了这一想法.

In this example I am not taking the direction into account, but I think it shows the idea.

这篇关于在OpenLayers中绘制速度领导者线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！