如何绘制指向点边缘的箭头

Question

我有两个点，想在它们之间画一个箭头。我正在使用 OpenLayers2。创建点的代码如下所示：

var pt = new OpenLayers.Symbolizer.Point({
    fillColor: color,
    ....[other settings here]....
    pointRadius: radius
});

然后我在它们之间创建了一个线串，然后在点 2 处创建了一个箭头。

var angle = this.calculateAngle(pt1[0], pt1[1], pt2[0], pt2[1]);

var point = new OpenLayers.Geometry.Point(pt2[0], pt2[1]);
point.transform(coreMap.Map.SOURCE_PROJECTION,
    coreMap.Map.DESTINATION_PROJECTION);

var featureArrow = new OpenLayers.Feature.Vector(point);

OpenLayers.Renderer.symbol.arrow = [0,0, 0,arrowWidth, (arrowWidth / 2),(arrowWidth - 7), arrowWidth,arrowWidth, 0,arrowWidth];

featureArrow.style = new OpenLayers.Symbolizer.Point({
     strokeWidth: 1,
    graphicName: "arrow",
    ...[other settings here]...        
    rotation: angle,
    strokeLinecap: "round"
});

这一切都有效，除了当point 2的半径较大时，箭头指向pt2的中间并被Point隐藏。我想要的是让箭头指向 Point 的边缘。如果我在没有缩放的笛卡尔二维平面中，我可以按半径将箭头滑向 pt1（因为我知道角度）。不过pt1和pt2当然是在lat/lon，半径是像素单位。如何调整箭头的位置，使其指向正确的位置（[可能大]点的边缘）？

Answer 1

通过使用 map.getExtent() 和 map.maxPx，您可以确定要从箭头末端处减去的数量。

map.getExtent()

将找到您的地图的可见边界框。

map.maxPx()

会给你地图像素的数量。如果我们想从您的要素的纬度中找到半径的偏移量，您可以简单地...

var y = map.getExtent().top-map.getExtent().bottom;
var diffY = y / map.maxPx.y * feature.radius;
correctedArrowEnd = oldArrowEnd.y - diffY;

并对 x 值执行相同的操作。

希望对您有所帮助！

如何绘制指向点边缘的箭头

How to draw an arrow to the edge of a point

openlayers