OpenLayer 4 在地图上绘制箭头

Question

我有一张包含多个点的地图，我想绘制从地图边界指向这些位置的箭头。当用户平移或缩放地图时，箭头应动态更新其在屏幕上的位置。 如何在地图上绘制指向位置的箭头？

Answer 1

您可以为点绘制规则线条，并对其应用箭头样式，如本例所示。

您只需要将箭头放置在末端坐标处，而不是将其应用于每个线段。

var styleFunction = function (feature) {
var geometry = feature.getGeometry();
var styles = [
// Linestring
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
})
})
];
var coordinates = geometry.getCoordinates();
var length = coordinates.length;
// Last two coordinates for calculating rotation
var end = coordinates[length - 1];
var start = coordinates[length - 2];
var dx = end[0] - start[0];
var dy = end[1] - start[1];
var rotation = Math.atan2(dy, dx);
// Arrow
styles.push(new ol.style.Style({
geometry: new ol.geom.Point(end),
image: new ol.style.Icon({
src: 'https://openlayers.org/en/v4.6.5/examples/data/arrow.png',
anchor: [0.75, 0.5],
rotateWithView: true,
rotation: -rotation
})
}));
return styles;
};