传单（geojson）多边形上的简单标签

Question

我正在尝试使用传单多面体对象进行我想象的相当常见的用例。

我使用 geojson 创建了 MultiPolygon：

var layer = L.GeoJSON(g, style_opts);

我想要在每个多边形的中心放置一个简单的文本标签。 （例如，将州名放在每个州的中心）。

我看过： https://groups.google.com/forum/?fromgroups=#!topic/leaflet-js/sA2HnU5W9Fw

这实际上覆盖了文本，但是当我添加一堆多边形时，它似乎以奇怪的方式使标签偏离中心，我目前无法找到问题所在。

我也看过：https://github.com/jacobtoye/Leaflet.label

但是当您将鼠标悬停在多边形上时，这似乎只会将标签放在多边形上，并且不会静态停留在多边形上。

我认为我最好的做法是使用第一个链接，并找出它改变位置的原因，但与此同时，如果有人知道在传单中的多边形上放置标签的快速简便的方法，我将非常感激。

另外，如果我对上述两个链接有任何错误的假设，请随时纠正我。

非常感谢。

Answer 1

传单标签插件还允许使用静态标签，请参阅demo。 折线标签不是静态的唯一原因是它会随着您沿着折线移动。

您可能会做得比这更好，通过覆盖多边形的 bindLabel() 但这是一种将静态标签添加到多边形中心的简单方法：

label = new L.Label()
label.setContent("static label")
label.setLatLng(polygon.getBounds().getCenter())
map.showLabel(label);

http://jsfiddle.net/CrqkR/6/

Answer 2

您可以使用L.geoJson 的onEachFeature 选项为每个多边形创建一个新的L.divIcon。

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