传单(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

传单标签插件还允许使用静态标签,请参阅演示.折线标签不是静态的唯一原因是它沿着折线移动时会四处移动.

您可以通过覆盖多边形的bindLabel()来做得更好,但这是一种向多边形中心添加静态标签的简单方法:

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

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

Answer 2

您可以使用onEachFeature选项为每个多边形L.geoJson创建新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);
  }
);