openlayer路径规划线路箭头添加

1.将箭头函数封装成arrowStyle，feature添加，arrowStyle函数会自动获取要素和长度

2.arrowStyle中的函数

//路径箭头
    arrowStyle(feature, resolution) {
      // console.log(resolution);
      let geometry = feature.getGeometry();//几何对象:空间坐标信息等
      var length = geometry.getLength(); //获取线段长度
      var radio = (250 * resolution) / length;//间隔分之一 分割了多少段
      var dradio = 20000; //投影坐标系，如EPSG3857设置dradio=1，在EPSG:4326下可以设置dradio=10000，其他坐标系可以调整

      var styles = [
        new Style({
          // 线串的样式
          stroke: new Stroke({
            color: '#007aff', //颜色
            width: 7, //线条粗细
          }),
        }),
      ];

      for (var i = 0; i <= 1; i += radio) {
        console.log(i)
        var arrowLocation = geometry.getCoordinateAt(i);
        geometry.forEachSegment(function (start, end) {
          if (start[0] == end[0] || start[1] == end[1]) return;
          var dx1 = end[0] - arrowLocation[0];
          var dy1 = end[1] - arrowLocation[1];
          var dx2 = arrowLocation[0] - start[0];
          var dy2 = arrowLocation[1] - start[1];
          if (dx1 != dx2 && dy1 != dy2) {
            if (Math.abs(dradio * dx1 * dy2 - dradio * dx2 * dy1) < 0.001) {
              var dx = end[0] - start[0];
              var dy = end[1] - start[1];
              var rotation = Math.atan2(dy, dx);//算出旋转角度
              styles.push(
                new Style({
                  geometry: new Point(arrowLocation),
                  image: new Icon({
                    scale: 0.025,
                    src: require('../../assets/images/arrow-icon.png'),
                    anchor: [0.5, 0.5],
                    rotation: -rotation,//可根据图标自行更改
                  }),
                  zIndex: 999,
                })
              );
              styles.push(
                new Style({
                  stroke: new Stroke({
                    color: '#127c58',
                    width: 8,
                    lineCap: 'square',
                  }),
                  zIndex: 999,
                })
              );
              styles.push(
                new Style({
                  stroke: new Stroke({
                    color: '#01c76f',
                    width: 6,
                  }),
                  zIndex: 999,
                })
              );
            }
          }

          // }
        });
      }
         return styles;
    },

注：这种方式存在性能问题，会造成页面卡顿，解决方案正在调研中....后期更新