추가 값 (예 : 고도, 속도,

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/