openlayers-3 - 在openlayers3中不使用任何图像绘制箭头

Question

如何在 Openlayers 3 map 中的矢量图层上绘制箭头？我尝试使用 canvaselement 创建箭头，但不知道如何在 ol3 map 上绘制它。

Answer 1

canvas 元素不是必需的。您可以使用 Openlayers site 中的箭头示例。并添加 2 个自定义 LineString 元素而不是图标。您在示例中已经有了以弧度为单位的旋转角度以及应在其中添加代码的事件。

希望以下代码片段能够解决问题:

var source = new ol.source.Vector();

var styleFunction = function (feature) {
    var geometry = feature.getGeometry();
    var styles = [
        // linestring
        new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 2
            })
        })
    ];

    geometry.forEachSegment(function (start, end) {
        var dx = end[0] - start[0];
        var dy = end[1] - start[1];
        var rotation = Math.atan2(dy, dx);

        var lineStr1 = new ol.geom.LineString([end, [end[0] - 200000, end[1] + 200000]]);
        lineStr1.rotate(rotation, end);
        var lineStr2 = new ol.geom.LineString([end, [end[0] - 200000, end[1] - 200000]]);
        lineStr2.rotate(rotation, end);

        var stroke = new ol.style.Stroke({
            color: 'green',
            width: 1
        });

        styles.push(new ol.style.Style({
            geometry: lineStr1,
            stroke: stroke
        }));
        styles.push(new ol.style.Style({
            geometry: lineStr2,
            stroke: stroke
        }));
    });

    return styles;
};

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        new ol.layer.Vector({
            source: source,
            style: styleFunction
        })
    ],
    target: 'map',
    view: new ol.View({
        center: [0, 0],
        zoom: 3
    })
});

map.addInteraction(new ol.interaction.Draw({
    source: source,
    type: ('LineString')
}));

<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<link href="https://openlayers.org/en/v3.20.1/css/ol.css" rel="stylesheet"/>
<div id="map" class="map" tabindex="0"></div>