33

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

我使用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

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

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

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

首先十分感谢。

4

2 回答 2

22

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

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

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

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

于 2013-01-13T22:09:32.283 回答
21

您可以使用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);
  }
);
于 2015-09-15T11:14:41.337 回答