我可以让 GPX 轨迹的颜色由与每个轨迹点关联的值来确定，例如海拔还是速度？答案

【问题标题】：Can I let the color of the GPX track be determined by values associated with each track point, e.g. elevation or speed?我可以让 GPX 轨迹的颜色由与每个轨迹点关联的值来确定，例如海拔还是速度？
【发布时间】：2019-06-26 23:18:11
【问题描述】：

我的 gpx 文件已经包含每个 trkpt 的海拔信息，我可以通过每个 trkpt 的速度来增加它。我想通过改变轨道的颜色来表示每个 trkpt 的高度或速度。例如：慢是蓝色，快是红色。

我该怎么做？

这可能意味着：我必须更改 Openlayers 中的哪些文件和函数才能执行此操作？

【问题讨论】：

标签： colors openlayers gpx

【解决方案1】：

您可以尝试使用ol-ext 的ol/style/FlowLine 来实现此目的。

使用此样式，您可以使用函数更改沿线的特征的颜色/颜色。此示例显示如何：http://viglino.github.io/ol-ext/examples/style/map.style.flowline2.html。您只需要根据速度或高度计算沿特征几何形状的宽度（或颜色）：

const flowStyle = new ol.style.FlowLine({
  width: function(f, step) { 
    // calculate the with of the feature f at the given step
    // step is the curvilinear abscissa between 0,1 
    // (0: first coordinate, 1: last one)
    const width = ...
    return width;
  }
});

【讨论】：

【解决方案2】：

你应该为矢量图层使用样式函数：

https://openlayers.org/en/v4.6.5/apidoc/ol.html#.StyleFunction

检查该函数以检查要在矢量图层上显示的每个特征，并且可以通过编程设置/返回相关样式。例如：

function gpxStyle(feature) {
    var style = null;
    if (feature.get("speed")>="100") {
        style = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 6,
          stroke: new ol.style.Stroke({
            color: 'red',
            width: 2
          }),
          fill: new ol.style.Fill({
            color: 'red'
          })
        })
        });
    }
    else {
        style = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 6,
          stroke: new ol.style.Stroke({
            color: 'blue',
            width: 2
          }),
          fill: new ol.style.Fill({
            color: 'blue'
          })
        })
        });
    }
    return [style];
}

var gpxLayer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: gpxStyle
});

【讨论】：

这没有回答问题。我想更改每个跟踪点的颜色（并读取每个跟踪点的扩展以确定该颜色）。此答案为轨道中的所有跟踪点设置一种颜色。可能是当前版本的 openlayers 不支持这个。