openlayers实现箭头轨迹线

openlayers实现箭头轨迹线

openlayers实现箭头轨迹线

1. 实现思路

使用ol/Feature 的setStyle 方法，轨迹线可以由实线+多个箭头icon组成。setStyle可以接收一个function回调方法，根据分辨率，设定每个箭头间隔的像素，计算线要素Feature的长度，根据总长度计算箭头个数。还要计算每个箭头的位置Point，箭头的方向，将其转化成Style对象。

2. 实现过程

1.加载底图和Map对象

let gaodeMapLayer = new TileLayer({
  source: new XYZ({
    url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
  }),
});

let map = new Map({
  layers: [gaodeMapLayer],
  view: new View({
    center: [114.31, 30.55],
    projection: "EPSG: