Как правильно вывести DisplayColor из TrackExtension в MultiLineString.Style.Stroke.color? - PullRequest
0 голосов
/ 02 февраля 2019

Каждый trk в моем файле gpx содержит

<extensions
 <gpxx:TrackExtension>
   <gpxx:DisplayColor>Red</gpxx:DisplayColor>
 </gpxx:TrackExtension>
</extensions>

с различными значениями для gpxx: DisplayColor.Я хочу показать каждый трек цветом, указанным в файле gpx.Следовательно, мне нужно получить цвет из (xml in) файла gpx в стиль дорожки.

Я пытался

var trackColor = "black";
var gpx = new ol.source.Vector({   
  format: new ol.format.GPX({    
    readExtensions:
      function(feat, node)
      {
        var i, y;
        y = node.childNodes;
        for (i=0; i < y.length; i++)      
        {
          if (y[i].nodeName == "gpxx:TrackExtension")
          {
            trackColor = y[i].textContent;
          }
        }
      }
  })
});

Это похоже на пометку, поскольку он используетцикл и не ссылается на DisplayColor.

var track = new ol.layer.Vector({
  source: gpx,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: trackColor,
      width: 3
    })
  })
});

Три элемента trk имеют DisplayColors Red, DarkMagenta и Green, но все они показаны черным.

1 Ответ

0 голосов
/ 04 февраля 2019

Вы должны сохранить цвет в функции на чтение, чтобы получить доступ к нему в функции стиля.Примерно так:

var gpx = new ol.source.Vector({   
  format: new ol.format.GPX({    
    readExtensions: function(feat, node) {
      var i, y;
      y = node.childNodes;
      for (i=0; i < y.length; i++){
        if (y[i].nodeName == "gpxx:TrackExtension") {
          // save feature color
          feat.set('color', y[i].textContent);
        } else {
          feat.set('color', '#000');
        }
      }
    }
  })
});

затем:

var track = new ol.layer.Vector({
  source: gpx,
  style: function (f, res) {
    return new ol.style.Style({
      stroke: new ol.style.Stroke({
        // get current feature color
        color: f.get('color'),
        width: 3
      })
    }
  })
});
...