OpenLayer 4 在地图上绘制箭头

IT技术 reactjs openlayers point figure
2022-07-26 02:01:22

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

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