Mã màu một đa tuyến Tờ rơi dựa trên các giá trị bổ sung, ví dụ: độ cao, tốc độ,

Tôi muốn vẽ đường đua GPX trên bản đồ Tờ rơi. Đa tuyến không nên chỉ có một màu, nhưng tôi muốn hiển thị một số giá trị nhất định như độ cao, tốc độ, nhịp tim, nhiệt độ, nhịp, độ dốc được mã hóa màu. Tất nhiên chỉ có một giá trị có thể được hình dung cùng một lúc.

Các giá trị sẽ được lưu trữ cùng với L.LatLng, ví dụ như trong một meta: {ele: 298, hr: 155}đối tượng.

Tôi chưa quen với Leaflet và đặc biệt quan tâm đến việc tìm ra cách hiệu quả để làm điều này. Việc đầu tiên xuất hiện trong đầu là tạo ra hàng trăm hoặc hàng nghìn polylines mỗi màu với một màu đặc biệt. Nhưng điều này nghe có vẻ rất tham lam về bộ nhớ và cpu.

Có ý kiến ​​gì không?

Một ví dụ những gì tôi muốn nói có thể được xem ở đây

Chuyển đổi bản nhạc GPX của bạn thành GeoJSON với QGIS.

Hãy nói rằng GeoJSON của bạn trông như thế này. GeoJSON có một thuộc tính elevationvới giá trị của độ cao.

        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 ], ] } }
];

Thêm GeoJSON của bạn với mã sau vào bản đồ tờ rơi của bạn. Sử dụng một chức năng để định kiểu tệp của bạn. Phần "color"tử gọi hàm get colorvà truyền vào elevationgiá trị của tính năng của bạn dưới dạng tham số.

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

Hàm getColortrả về màu dựa trên giá trị độ cao.

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

Tôi đã tạo một JSFiddle với GeoJSON mẫu và các hàm được mô tả ở trên: http://jsfiddle.net/2VY5z/1/

Tôi đã tạo một plugin nhỏ cho Leaflet: Leaflet.MultiOptionsPolyline .

Đây là một ảnh chụp màn hình từ trang demo :

Hiện tại nó thiếu tài liệu, nhưng trang demo liên kết đến mã nguồn nên khá tự giải thích.

Phản hồi của bạn rất đáng hoan nghênh (tạo sự cố trên GitHub hoặc nhận xét câu trả lời này nếu bạn không có tài khoản GitHub).

Có vẻ như đây là chủ đề cũ, nhưng hy vọng, ai đó tìm thấy điều này hữu ích.

Một plugin Leaflet để vẽ gradient màu dọc theo polylines. https://github.com/iosphere/Leaflet.hotline/