openlayers 3:在多行上绘制箭头

问题描述

我想知道是否可以在MultiLineString上绘制箭头图标

I'd like to know if it's possible to draw an arrow icon on a MultiLineString

我的目的是在多行的每一行上显示一个带有箭头的多行.

My aim is to show multiline with an arrow on every line of the multiLine.

我在网络上看到了一些示例，但是这些示例始终只用一行.

I have seen some examples on the web, but those are always with a single line.

您知道是否可以使用multiLineString吗?

Do you know if it's possible to do it with a multiLineString?

推荐答案

是的，有可能.

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

看看演示链接 https://plnkr.co/edit/UM7bD8Pq55PjWQ6EHmTl?p=preview

这篇关于openlayers 3:在多行上绘制箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！