Question

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

Answer 1

您可以在点上绘制常规线条并对其应用箭头样式，如example所示。

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

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

OpenLayer 4在地图上绘制箭头

1 个答案: