Question

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

我该怎么做？

这可能意味着：为此，我必须更改Openlayers中的哪些文件和功能？

Answer 1

您可以尝试ol-ext中的ol/style/FlowLine来实现。

使用此样式，您可以使用功能沿线更改特征的with / color。本示例说明如何：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;
  }
});

@ +

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

我可以让GPX轨道的颜色由与每个轨道点相关的值确定吗，例如海拔还是速度？

2 个答案: