什么是正确的方式来获得DisplayColor出TrackExtension，进入MultiLineString.Style.Stroke.color？

Question

我在GPX文件中的每个TRK包含

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

与gpxx不同的值：DisplayColor。我要显示在GPX文件中指定的颜色每个轨道。因此，我需要得到的颜色了（XML中）在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红色，深洋红和绿色，但都显示为黑色。

Answer 1

你要的颜色存储到功能上读取访问它在样式的功能。事情是这样的：

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
      })
    }
  })
});