五十四、openlayers官网示例LineString Arrows解析——在地图上绘制箭头

官网demo地址：

LineString Arrows 

 这篇介绍了在地图上绘制箭头。

创建一个矢量数据源，将其绑定为draw的数据源并展示在矢量图层上。

  const source = new VectorSource();
  const vector = new VectorLayer({
      source: source,
      style: styleFunction,
   });
   map.addInteraction(
      new Draw({
        source: source,
        type: "LineString",
      })
    );

绘制直线时，通过style函数将直线的末端添加箭头图标。通过forEachSegment 函数拿到箭头的起点和终点坐标，使用 Math.atan2计算出箭头图标的旋转角度。 

const styleFunction = function (feature) {
      const geometry = feature.getGeometry();
      const styles = [
        new Style({
          stroke: new Stroke({
            color: "#ffcc33",