将DisplayColor从TrackExtension中移出并进入MultiLineString.Style.Stroke.color的正确方法是什么?

时间:2019-02-02 13:47:12

标签: colors openlayers gpx

我的gpx文件中的每个trk都包含

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

对于gpxx:DisplayColor具有不同的值。我想以gpx文件中指定的颜色显示每个轨道。因此,我需要将颜色从gpx文件的(xml中)提取为轨道样式。

我尝试过

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 :(得分:0)

您必须将颜色存储到阅读功能中,才能通过样式功能进行访问。 像这样:

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