在GPX軌跡上添加「箭頭方向」

我無法成功搜索如何在GPX軌跡上添加一些「箭頭方向」。我用這個代碼顯示跟蹤：在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/

是否存在的東西做的？

來源

2016-11-19 Slayes

的OpenLayers 3可是沒有內置功能來添加箭頭style.However，您可以Lat Long網之間的計算方向，並添加箭頭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 
      }) 
     }));    
    }

來源

2016-11-20 11:14:07 dev9

感謝很多:)我修改了一點代碼每km獲得一個箭頭，並改變這個關於縮放地圖等級的距離。 http://jsfiddle.net/bzyev869/6/。有點遺憾的是，由於GPS文件中每個點之間的距離，每個箭頭之間的距離不會是相同的。 – Slayes

謝謝:)請不要忘記upvote這個答案，如果它對你有用，謝謝！ – dev9

在GPX軌跡上添加「箭頭方向」

回答

相關問題