전단지 맵의 등고선 레이블

Question

등고선이 포함 된 geoJSON이있는 Leaflet 맵이 있습니다. 각 선에 해당하는 표고는 feature.properties에 있습니다. geoJSON의 상승. 나는 다음과 달성하고자하는 : 나는 전단이를 달성하기 위해 노력했습니다 무엇

각 폴리 라인의 중심을 계산 한 후 feature.properties의 데이터를 포함하는 해당 위치에 마커를 추가하는 것입니다. 높이.

L.geoJson(contourJSON, { 
    onEachFeature: function(feature, layer) { 
    var label = L.marker(layer.getBounds().getCenter(), { 
     icon: L.divIcon({ 
     className: 'label', 
     html: feature.properties.Elevation, 
     iconSize: [100, 40] 
     }) 
    }).addTo(map); 
    } 
}); 

작품의 어떤 종류의,하지만 멋진 스타일을 가지고 있지 않으며, 특정 라인에 속하는 값 정말 분명하지 않다 :

가 무엇을 추가하는 더 나은 방법이 될 것입니다 고도 레이블은 현재의 확대/축소 수준에서 읽기 쉽고 동적 일 수 있습니다. 나는 리플릿 1.0.3을 사용하고 있습니다. 어쩌면 Tooltip은 해결책을 제시 할 수 있습니까? 감사!

Answer 1

당신은 아마도 결합, 그 전단지 플러그인에 관심이있을 수 있습니다 (하지 않도록 그들을 결합하는 것이 얼마나 쉬운)

... 디스플레이 [S를

• Leaflet.LabelTextCollision (demo를) ] 레이블을 벡터 데이터에 추가합니다.

• Leaflet.TextPath (demo)

는 폴리 라인을 따라 텍스트를 표시합니다.

Leaflet plugins의 나머지 부분도 확인하시기 바랍니다.

나는 폴리 라인 "센터"에 레이블/마커를 배치하는 것이 적절하다고 확신하지 않습니다. 정점 중 하나를 선택하거나 예를 들어 가장 오른쪽/동쪽을 선택하면 제공 한 예제와 비슷한 효과가 나타납니다.