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"
});

这一切都有效，除非点2的半径很大，那么箭头指向pt2的中间并被Point隐藏。我想要的是让箭头指向Point的边缘。如果我在没有缩放的笛卡尔2D平面中，我可以通过半径向箭头方向滑动pt1（因为我知道角度）。但是，pt1和pt2当然是纬度/经度，半径是像素。如何调整箭头的位置以使其指向正确的位置（[可能较大]点的边缘）？

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值做同样的事情。

我希望这有帮助！

如何将箭头绘制到点的边缘

1 个答案: