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 나던 화살표 style.However을 추가하는 붙박이 기능이, 당신은 위도 긴 사이에서 방향을 계산하고 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 
      }) 
     }));    
    }