Могу ли я позволить цвет дорожки GPX определяться значениями, связанными с каждой точкой дорожки, например, высотой или скоростью? - PullRequest
Новая
       20

Могу ли я позволить цвет дорожки GPX определяться значениями, связанными с каждой точкой дорожки, например, высотой или скоростью?

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

Мой файл gpx уже содержит информацию о возвышении для каждого trkpt, и я могу увеличить его со скоростью для каждого trkpt.Я хотел бы представить высоту или скорость в каждом trkpt, изменяя цвет трека.Например: slow это синий, fast это красный.

Как я могу это сделать?

И это, вероятно, означает: Какие файлы и функции в Openlayers мне нужно изменить, чтобы сделать это?

Ответы [ 2 ]

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

Вы должны использовать функцию стиля для векторного слоя:

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
});
0 голосов
/ 04 февраля 2019

Вы можете попробовать ol/style/FlowLine из ol-ext , чтобы достичь этого.

Используя этот стиль, вы можете изменить / с цветом объекта вдоль линии, используя функцию,В этом примере показано, как: 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;
  }
});

@ +

...