小冊子地圖上的輪廓線標籤

Question

我有一張帶有包含輪廓線的geoJSON的Leaflet地圖。每條線對應的高程位於geoJSON的feature.properties.Elevation中。我要實現以下目標：

我已經試過在單張實現這一目標是計算每條線的中心，然後添加標記包含從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); 
    } 
}); 

哪種作品，但沒有一個漂亮的造型和它不是真正清楚哪些值屬於特定行：

什麼是添加的一個更好的方法高程標籤是否可讀，並且可能對當前縮放級別動態？我正在使用Leaflet 1.0.3，所以也許Tooltip可以提供解決方案？謝謝！

Answer 1

你可能有興趣在這些傳單插件，可能合併：（不知道這將是多麼容易把它們結合在一起）

• Leaflet.LabelTextCollision（demo）

...顯示[S ]標籤上的矢量數據，同時避免標籤碰撞。

• Leaflet.TextPath（demo）

顯示沿折線文本。

您可能還想查看Leaflet plugins的其餘部分。

順便說一句，我不確定將您的標籤/標記放置在折線「中心」處是否合適。您可能只需選擇其頂點中的一個，或者例如最右邊的/ East即可獲得與您提供的示例類似的效果。