openlayers绘制箭头线

老规矩，先上效果图（只需看黄色箭头样式就行）

实现方法也很简单，具体如下：

// line就是线条两边的坐标
const lineArrow = [
        {
          name: '浙奉渔19001',
          type: 1,
          line: [[13739180.61760428, 3867806.8497407753], [13753601.705080839, 3864763.0546381413]]
        },
        {
          name: '中国海监7018',
          type: 2,
          line: [[13746408.59354844, 3872287.6211607265], [13754948.401795218, 3866382.9561385084]]
        },
        {
          name: '浙岱渔06423',
          type: 1,
          line: [[13764890.343228461, 3873362.5145883015], [13757755.785627745, 3867978.732211734]]
        },
        {
          name: '东海救101',
          type: 2,
          line: [[13766958.941841919, 3868072.8124196446], [13759617.524379842, 3866116.9934596373]]
        },
        {
          name: '中国海监7008',
          type: 2,
          line: [[13767786.38128729, 3860980.4743164163], [13757489.822948873, 3864373.4603425944]]
        }
      ]
	//然后通过LineString绘制线条
	for (var i = 0; i < lineArrow.length; i++) {
        var feature = new Feature({
          geometry: new LineString(lineArrow[i].line),
          name: lineArrow[i].name
        })
        bezierFeatures.push(feature)
      }
      const bezierSource = new VectorSource({
        features: bezierFeatures
      })
      const bezierLayer = new VectorLayer({
        source: bezierSource,
        zIndex: 1001,
        style: this.bezierStyle
      })
      this.map.addLayer(bezierLayer)

重点是箭头的样式，首先准备一张箭头图片，然后通过样式加到线条头部

geometry.forEachSegment(function(start, end) {
      const dx = end[0] - start[0]
      const dy = end[1] - start[1]
      //计算箭头图片旋转角度
      const rotation = Math.atan2(dy, dx)
      styles.push(
      	设置图片位置
        new Style({
          geometry: new Point(end),
          image: new Icon({
            src: require('@/assets/images/shipIcon/line-arrow.png'),
            opacity: 1,
            anchor: [0.5, 0.5],
            rotateWithView: true,
            rotation: -rotation,
            scale: 1
          })
        })
      )
    })
    //设置线段样式
    styles.push(
      new Style({
        stroke: new Stroke({
          color: '#FFD966',
          width: 3,
          lineDash: [20, 8, 1, 8]
        })
      })
    )
  }
  return styles

完整代码

	createBezierPointers() {
      const lineArrow = [
        {
          name: '浙奉渔19001',
          type: 1,
          line: [[13739180.61760428, 3867806.8497407753], [13753601.705080839, 3864763.0546381413]]
        },
        {
          name: '中国海监7018',
          type: 2,
          line: [[13746408.59354844, 3872287.6211607265], [13754948.401795218, 3866382.9561385084]]
        },
        {
          name: '浙岱渔06423',
          type: 1,
          line: [[13764890.343228461, 3873362.5145883015], [13757755.785627745, 3867978.732211734]]
        },
        {
          name: '东海救101',
          type: 2,
          line: [[13766958.941841919, 3868072.8124196446], [13759617.524379842, 3866116.9934596373]]
        },
        {
          name: '中国海监7008',
          type: 2,
          line: [[13767786.38128729, 3860980.4743164163], [13757489.822948873, 3864373.4603425944]]
        }
      ]
      const bezierFeatures = []
      for (var i = 0; i < lineArrow.length; i++) {
        var feature = new Feature({
          geometry: new LineString(lineArrow[i].line),
          name: lineArrow[i].name
        })
        bezierFeatures.push(feature)
      }

      const bezierSource = new VectorSource({
        features: bezierFeatures
      })
      const bezierLayer = new VectorLayer({
        source: bezierSource,
        zIndex: 1001,
        style: this.bezierStyle
      })
      this.map.addLayer(bezierLayer)
    },
    
	bezierStyle(feature) {
      const geometry = feature.getGeometry()
      const featureType = feature.getGeometry().getType()
      const styles = []
      geometry.forEachSegment(function(start, end) {
        const dx = end[0] - start[0]
        const dy = end[1] - start[1]
        const rotation = Math.atan2(dy, dx)
        styles.push(
          new Style({
            geometry: new Point(end),
            image: new Icon({
              src: require('@/assets/images/shipIcon/line-arrow.png'),
              opacity: 1,
              anchor: [0.5, 0.5],
              rotateWithView: true,
              rotation: -rotation,
              scale: 1
            })
          })
        )
      })
      styles.push(
        new Style({
          stroke: new Stroke({
            color: '#FFD966',
            width: 3,
            lineDash: [20, 8, 1, 8]
          })
        })
      )
      return styles
    },