传单地图上的轮廓线标签

Question

我有一张Leaflet地图，其中包含一个包含等高线的geoJSON。对应于每一行的高程位于feature.properties.Elevation中的geoJSON。我想实现以下目标：

我在传单中尝试实现的目的是计算每条折线的中心，然后在包含feature.properties.Elevation数据的位置添加标记。

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插件感兴趣:(不确定合并它们有​​多容易）

• Leaflet.LabelTextCollision（demo）

  

...在矢量数据上显示[s]标签，同时避免标签冲突。

• Leaflet.TextPath（demo）

  

沿折线显示文字。

您可能还想查看余下的Leaflet plugins。

顺便说一句，我不确定你的标签/标记放在折线＆＃34;中心＆＃34;是合适的。您可以选择其中一个顶点，或者例如最右侧/东侧的顶点，以获得与您提供的示例类似的效果。