使用openLayer画箭头

项目场景&&问题描述：

需求：从后台获取了一条线的geojson数据，现在需要把他画到地图上并添加箭头；
百度（官网示例）：得到下图1，每个折点都有箭头

可是需求是：如下图2，只需要尾部一个箭头，中间不需要箭头

---

原因分析：

分析官网源码：

所以在这里我需要改的就是这个遍历的东东，改完后我的代码如下：

 arrowFunction(feature){
    
        var geometry = feature.getGeometry();
        var styles = [
            new Style({
                        // 线串的样式
                stroke: new Stroke({
    
                    color: '#2EB745',      //颜色
                    width: 2			   //线条粗细
                })
            })
        ];
   		console.log("geometry",geometry)
        // 获取最后一条线段两头的坐标，一般来说后台返回的geojson数据是有顺序的，取最后的坐标即可
        // 这里打印出来后发现最简单的获取方法是取flatCoordinates属性的后四位就可以，于是进行截取
        let sta = geometry.flatCoordinates.slice(-4)
        
        let dx = sta[2] - sta[0];
        let dy = sta[3] - sta[1];
        let rotation = Math.atan2(dy, dx);      // 获取线段的角度（弧度）
           
	    styles.push(new Style({
            
	            geometry: new Point([sta[2],sta[3]]),
	            image: new Icon({
    
	                // src: 'data/arrow.png',
	                src:require("../assets/arrow.png"),
	                anchor: [0.75, 0.5],        // 图标锚点
	                rotateWithView: true,       // 与地图视图一起旋转
	                rotation: rotation         // 因为角度以顺时针旋转为正值，所以前面添加负号
	            })
	        }));

        return styles;
    }

---

总结：

把获取styles发方法改成这样基本上就没什么大问题了，但是我在写这个东西的时候还是踩了两个坑，给大家分享一下：

一、 把arrowFunction当一个方法，找对应的feature参数传入：

我刚开始是这样写的：（错误）

    let styles=this.arrowFunction(features)
    let vectorLayer = new VectorLayer({
    
      id: name,
      visible: true,
      source: vectorSource,
      style: styles,
    });
    this.addLayer(vectorLayer);

后来发现怎么都不对，请教同事后了解到，这个feature可以不用传，放在VectorLayer对象中可以直接拿来使用，于是代码改为：（正确）

	let vectorLayer = new VectorLayer({
    
      id: name,
      visible: true,
      source: vectorSource,
      style: this.arrowFunction,
    });

    this.addLayer(vectorLayer);

二、图片的src问题：

一开始直接复制官网的代码拿来用，在new Icon中的src处直接使用官网上的src: 'data/arrow.png'，并检查了坐标角度均没有问题，但是就是箭头出不来，后来发现是没有找到arrow.png这个图片资源，所以我们最好是从官网上把图片下载下来放到本地，再进行对应的引入（当然，直接就用本地的图片是可以了，注意是背景透明的png图片，还有大小等最好先与官网示例保持一致）。

---