openlayers 带箭头的线串

请注意：这个方法无法解决两条及两条以上线完全重叠时产生的bug。

let newFeature = new ol.Feature({
    geometry: new olGeom.LineString(coordinates), 
    name
});
let geometry = newFeature.getGeometry();

let styles = (_, resolutions)=>{
    let s = [
        new olStyle.Style({
            color,width
        })
    ];

    let radio = (50 * resolution) / geometry.getLength();
    let dradio = 1;
    for (let i = 0; i <= 1; i += radio){
        let arrowLocation = geometry.getCoordinateAt(i);
        geometry.forEachSegment(function (start, end){
             // 避免图标离两端过近
            if (i < radio / 2 || i > 1-radio / 2) return;
            if (start[0] === end[0] || start[1] === end[1]) return;

            let dx1 = end[0] - arrowLocation[0];
            let dy1 = end[1] - arrowLocation[1];
            let dx2 = arrowLocation[0] - start[0];
            let dy2 = arrowLocation[1] - start[1];
            if (dx1 !== dx2 && dy1 !== dy2){
                if (Math.abs(dradio * dx1 * dy2 - dradio * dx2 *dy1) <0.001){
                    // 图标的朝向
                    let y = end[1] - start[1];
                    let x = end[0] - start[0];
                    let rotation = Math.atan(y / x);
                    if ((y <= 0 && x >= 0) || (x >= 0 && y >= 0)){
                        // 第一二象限
                        rotation = -rotation;
                    }else if ((x<= 0 && y >= 0) || (x <= 0 && y <= 0)){
                        rotation = Math.PI - rotation;
                    }

                    // 添加图标
                    s.push(
                        new olStyle.Style({
                            geometry: new olGeom.Point(arrowLocation),
                            image: new olStyle.Icon({
                                scale: width / 64 // 路网宽度 ÷ 图片大小，图标和路网宽度一样大小,
                                src: svgUrl,
                                anchor: [0.7, 0.5],
                                rotationWithView: false,
                                rotation: totation
                            })
                        })
                    );
                }
            }
        });
    }

    // 添加起点、终点图标
    s.push(
        new olStyle.Style({
            geometry: new olGeom.Point(position1),
            image: new olStyle.Icon({
                src: startUrl,
                anchor: [0.5, 1]
             })
        }),
        new olStyle.Style({
            geometry: new olGeom.Point(position2),
            image: new olStyle.Icon({
                src: endUrl,
                anchor: [0.5, 1]
             })
        })
     )
}

newFeature.setStyle(styles);