Question

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

Answer 1

不需要canvas元素。您可以从Openlayers site中获取箭头示例，并添加2个自定义LineString元素而不是图标。在示例中，您已经有弧度的旋转角度以及应该添加代码的事件。

希望以下代码片段可以解决问题：

＆＃13;

city.Houses

＆＃13;

Residents

＆＃13;

Answer 2

这是Openlayers line-arrow Example的另一项自定义。它使用RegularShape代替图像。箭头将保持其大小独立于当前地图缩放。

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: '#000',
                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);

        styles.push(new ol.style.Style({
          geometry: new ol.geom.Point(end),
          image: new ol.style.RegularShape({
            fill: new ol.style.Fill({color: '#000'}),
            points: 3,
            radius: 8,
            rotation: -rotation,
            angle: Math.PI / 2 // rotate 90°
          })
        }));
    });

    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>

不使用openlayers3中的任何图像绘制箭头

2 个答案: