根据其他值（例如高度，速度，

我想在Leaflet地图上绘制GPX轨道。折线不应该只有一种颜色，但我想显示某些值，例如海拔，速度，心率，温度，节奏，坡度用颜色编码。当然，一次只能看到一个值。

这些值将与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帐户的情况下对此答案发表评论）。

看起来这是旧线程，但希望有人能找到帮助。

一个Leaflet插件，用于沿折线绘制彩色渐变。 https://github.com/iosphere/Leaflet.hotline/