OpenLayer 4在地图上绘制箭头 [英] OpenLayer 4 draw arrows on map

问题描述

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

推荐答案

您可以向这些点绘制规则的线条，并对其应用箭头样式，如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在地图上绘制箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！