小册子地图上的轮廓线标签

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即可获得与您提供的示例类似的效果。