在 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 没有添加箭头样式的内置功能。但是，您可以计算纬度之间的方向并添加箭头图标。这是小提琴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
          })
        }));               
    }