openlayers3带箭头的线

最新推荐文章于 2025-11-05 11:29:12 发布

原创最新推荐文章于 2025-11-05 11:29:12 发布 · 5.2k 阅读

8 ·

CC 4.0 BY-SA版权

网络编程专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用OpenLayers库在地图上绘制带有箭头的线段，通过自定义样式函数实现箭头的动态生成，适用于多线段路径。文章提供详细代码示例，包括如何旋转箭头以匹配线段方向。

http://openlayers.org/en/latest/examples/line-arrows.html --官网的例子

https://stackoverflow.com/questions/41606206/draw-arrow-without-using-any-image-in-openlayers3

https://stackoverflow.com/questions/40787691/openlayers-3-draw-arrow-on-multi-line

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>

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 lineStringsArray = geometry.getLineStrings();
for(var i=0;i<lineStringsArray.length;i++){

  lineStringsArray[i].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.Icon({
        src: 'https://openlayers.org/en/v3.19.1/examples/data/arrow.png',
        rotateWithView: false,
        rotation: -rotation
      })
    }));
  });
}

  return styles;
};