高度、速度などの追加の値に基づいてリーフレットポリラインを色分けします。

リーフレットマップにGPXトラックを描画したいと思います。ポリラインの色は1つだけではありませんが、高度、速度、心拍数、温度、ケイデンス、勾配のような特定の値を色分けして表示したいと思います。もちろん、一度に視覚化できる値は1つだけです。

値はと一緒にL.LatLng、たとえばmeta: {ele: 298, hr: 155}オブジェクトに保存されます。

私はLeafletを初めて使い、特にこれを行うための効率的な方法を見つけることを心配しています。最初に思いついたのは、それぞれが特別な色の数百または数千のポリラインを作成することでした。しかし、これはメモリとCPUに関して非常に貪欲に聞こえます。

何か案は？

私が意味する例はここで見ることができます

QGISでGPXトラックをGeoJSONに変換します。

GeoJSONが次のようになっているとします。GeoJSONにはelevation、標高の値を持つ属性があります。

        var yourGeoJSON = [ 
{ "type": "Feature", "properties": { "id": 2, "elevation": 50 }, "geometry": { "type": "LineString", "coordinates": [ [ 11.836395263671875, 47.75317468890147 ], [ 11.865234375, 47.73193447949174 ] ] } },
{ "type": "Feature", "properties": { "id": 1, "elevation": 750 }, "geometry": { "type": "LineString", "coordinates": [ [ 11.865234375,47.73193447949174 ], [ 11.881027221679688, 47.700520033704954 ] ] } },
{ "type": "Feature", "properties": { "id": 0, "elevation": 1700 }, "geometry": { "type": "LineString", "coordinates": [ [ 11.881027221679688, 47.700520033704954 ], [ 11.923599243164062, 47.706527200903395 ] ] } },
{ "type": "Feature", "properties": { "id": 0, "elevation": 3000 }, "geometry": { "type": "LineString", "coordinates": [ [ 11.923599243164062, 47.706527200903395 ], [ 11.881027221679688, 47.700520033704954 ], ] } }
];

次のコードを使用して、GeoJSONをリーフレットマップに追加します。関数を使用してファイルをスタイルします。"color"要素は、関数を呼び出すget colorとに渡すelevationパラメータとしてあなたの機能の値。

L.geoJson(yourGeoJSON, {
    style: function (feature) {
        return {
         "color": getColor(feature.properties.elevation),
         "opacity": 1,
        }}
}).addTo(map);

この関数getColorは、標高値に基づいて色を返します。

function getColor(x) {
  return x < 500     ?    '#bd0026':
         x < 1000     ?   '#f03b20':
         x < 1500     ?   '#fd8d3c':
         x < 2000     ?   '#fecc5c':
                          '#ffffb2' ;
};

サンプルGeoJSONと上記の関数を使用してJSFiddleを作成しました：http ://jsfiddle.net/2VY5z/1/

Leaflet用の小さなプラグインLeaflet.MultiOptionsPolylineを作成しました。

デモページのスクリーンショットを次に示します。

現在、ドキュメントはありませんが、デモページはソースコードにリンクしているので、一目瞭然です。

フィードバックを歓迎します（GitHubアカウントをお持ちでない場合は、GitHubで問題を作成するか、この回答にコメントしてください）。

これは古いスレッドのように見えますが、うまくいけば、誰かがこれが役立つと思います。

ポリラインに沿って色付きのグラデーションを描くためのリーフレットプラグイン。 https://github.com/iosphere/Leaflet.hotline/