OpenLayersを3：マルチライン上の描画矢印

Question

私はそれが私の目的は、複数行のすべての行に矢印で複数行を表示することですMultiLineStringの

上の矢印アイコンを描画することが可能ですかどうかを知りたいのです。

私はWeb上でいくつかの例を見てきましたが、それらは常に1行で表示されます。

multiLineStringで行うことができるかどうか知っていますか？

Answer 1

はい、可能です。

var styleFunction = function(feature) { 
    var geometry = feature.getGeometry(); 

    var styles = [ 
    // linestring 
    new ol.style.Style({ 
     stroke: new ol.style.Stroke({ 
     color: '#ffcc33', 
     width: 2 
     }) 
    }) 
    ]; 

var lineStringsArray = geometry.getLineStrings(); 
for(var i=0;i<lineStringsArray.length;i++){ 

    lineStringsArray[i].forEachSegment(function(start, end) { 
    var dx = end[0] - start[0]; 
    var dy = end[1] - start[1]; 
    var rotation = Math.atan2(dy, dx); 
    styles.push(new ol.style.Style({ 
     geometry: new ol.geom.Point(end), 
     image: new ol.style.Icon({ 
     src: 'https://openlayers.org/en/v3.19.1/examples/data/arrow.png', 
     rotateWithView: false, 
     rotation: -rotation 
     }) 
    })); 
    }); 
} 

    return styles; 
}; 

デモリンク https://plnkr.co/edit/UM7bD8Pq55PjWQ6EHmTl?p=preview

を見てください