GPXトレースに「矢印の方向」を追加

Question

GPXトレースに「矢印の方向」を追加する方法を成功させずに検索しました。 私はトレースを表示するには、このコードを使用：

var center = ol.proj.transform([4.90756, 45.5172], 'EPSG:4326', 'EPSG:3857'); 
var map = new ol.Map({ 
    layers: [new ol.layer.Tile({source: new ol.source.OSM()})], 
    target: 'map', 
    controls: ol.control.defaults({attributionOptions: ({ collapsible: false})}), 
    view: new ol.View({center: center,zoom: 12}) 
}); 

var vectorGpx = new ol.layer.Vector({ 
    source: new ol.source.Vector({ 
    url: 'http://www.vlsm.fr/test/test1.gpx', 
    format: new ol.format.GPX() 
    }), 
    style: new ol.style.Style({stroke: new ol.style.Stroke({color: '#1aa79b',width: 3})}) 
}); 
map.addLayer(vectorGpx); 

http://jsfiddle.net/bzyev869/

はそれを行うために何かを存在しますか？

Answer 1

OpenLayersを3 doesntの矢印-style.Howeverを追加するための作り付けの機能を持っている、あなたは、緯度、長い間の方向を計算し、矢印icon.Hereを追加することができますフィドルあるhttp://jsfiddle.net/bzyev869/2/

for(var i=0;i<vectorGpx.getSource().getFeatures()[0].getGeometry().getCoordinates()[0].length;i++){ 
    var s= vectorGpx.getSource().getFeatures()[0].getGeometry().getCoordinates()[0][i]; 
     if(i+1 <vectorGpx.getSource().getFeatures()[0].getGeometry().getCoordinates()[0].length){ 
     var f= vectorGpx.getSource().getFeatures()[0].getGeometry().getCoordinates()[0][i+1]; 
     } 
      var dx = s[0] - f[0]; 
     var dy = s[1] - f[1]; 

     var rotation = Math.atan2(dy, dx); 

     styles.push(new ol.style.Style({ 
      geometry: new ol.geom.Point([f[0],f[1]]), 
      image: new ol.style.Icon({ 
      src: 'http://openlayers.org/en/v3.14.2/examples/data/arrow.png', 
      anchor: [0.75, 0.5], 
      rotateWithView: false, 
      rotation: -rotation 
      }) 
     }));    
    }