OpenLayersで点の間に矢印のついた線を引く方法
Mapの上にアイコンを表示させ、そのアイコン同士を矢印の線で繋ぎたいと思っています。
アイコンの表示は実装済みで、線の表示を実装中です。
const pntArray = [[lon1, lat1],[lon2, lat2],[lon3, lat3] ...];
if (pntArray.length > 1){
for (var i = 0; i < pntArray.length; i++){
pntArray[i] = ol.proj.transform(pntArray[i], 'EPSG:4326', 'EPSG:3857');
}
const layerLine = new ol.Feature({
geometry: new ol.geom.LineString(pntArray),
});
const vectorLine = new ol.source.Vector({});
vectorLine.addFeatures([layerLine]);
const vectorLineLayer = new ol.layer.Vector({
source: vectorLine,
style: new ol.style.Style({
fill: new ol.style.Fill({color: '#00FF00', weight: 4}),
stroke: new ol.style.Stroke({color: '#00FF00', width: 2})
})
});
map.addLayer(vectorLineLayer);
}
上記のコードは矢印ではなく、ただ線を引くだけですが、これを矢印にする方法を探しています。
pntArrayは順に並んだアイコンの位置情報を配列として持っており、要素の数は不定です。
矢印は配列の1つ目から2つ目、2つ目から3つ目、3つ目から4つ目...という風に書きたいです。
あと、可能であればで構わないのですが、矢印を線の先端に付けるとアイコンと被って見えづらくなるのではないかと思っています。矢印を線の中間に描く方法などご存知でしたら教えていただけると幸いです。矢印に拘っているわけでもありません。アイコンからアイコンの「流れ」が視覚的に表示できれば良いので。