Color-code a Leaflet polyline ขึ้นอยู่กับค่าเพิ่มเติมเช่นความสูงความเร็ว

ฉันต้องการวาด GPX-track บนแผนที่ Leaflet โพลีไลน์ไม่ควรมีเพียงสีเดียว แต่ฉันต้องการแสดงค่าบางอย่างเช่นระดับความสูง, ความเร็ว, อัตราการเต้นของหัวใจ, อุณหภูมิ, จังหวะ, ความชันของรหัสสี แน่นอนสามารถมองเห็นค่าเดียวเท่านั้นในครั้งเดียว

ค่าจะถูกเก็บไว้พร้อมกับL.LatLngเช่นในmeta: {ele: 298, hr: 155}วัตถุ

ฉันใหม่กับ Leaflet และกังวลเป็นพิเศษเกี่ยวกับการหาวิธีที่มีประสิทธิภาพในการทำเช่นนี้ สิ่งแรกที่อยู่ในใจคือการสร้าง polylines หลายร้อยหรือหลายพันตัวแต่ละอันมีสีพิเศษ แต่ฟังดูโลภมากเกี่ยวกับหน่วยความจำและซีพียู

ความคิดใด ๆ

ตัวอย่างสิ่งที่ฉันหมายถึงสามารถดูได้ที่นี่

แปลง GPX track ของคุณเป็น GeoJSON ด้วย QGIS

สมมติว่า 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' ;
};

ฉันสร้าง JSFiddle ด้วยตัวอย่าง GeoJSON และฟังก์ชั่นที่อธิบายไว้ข้างต้น: http://jsfiddle.net/2VY5z/1/

ฉันได้สร้างปลั๊กอินขนาดเล็กสำหรับใบปลิว: Leaflet.MultiOptionsPolyline

นี่คือภาพหน้าจอจากหน้าตัวอย่าง :

ขณะนี้ยังไม่มีเอกสารประกอบ แต่หน้าตัวอย่างเชื่อมโยงไปยังซอร์สโค้ดซึ่งควรอธิบายด้วยตนเอง

ความคิดเห็นของคุณยินดีต้อนรับ (สร้างปัญหาใน GitHub หรือแสดงความคิดเห็นคำตอบนี้หากคุณไม่มีบัญชี GitHub)

ดูเหมือนว่านี่จะเป็นเธรดเก่า แต่หวังว่าจะมีคนพบว่ามีประโยชน์

ปลั๊กอิน Leaflet สำหรับการวาดการไล่ระดับสีตามแนวโพลีน https://github.com/iosphere/Leaflet.hotline/