使用Leaflet标记多边形区域的标签

Question

如何使用 Leaflet 7.3 和 GeoJSON 中的多边形数据添加来自字段“NAME”的标签?

以下是当前的 GeoJSON 多边形数据示例。我想在多边形中央启用固定标签，重叠没有问题。

var districts = L.geoJson(null, {
  style: function (feature) {
    return {
      color: "green",
      fill: true,
      opacity: 0.8
    };
  },


onEachFeature(feature, layer) {
    layer.on('mouseover', function () {
      this.setStyle({
        'fillColor': '#0000ff'
      });
    });
    layer.on('mouseout', function () {
      this.setStyle({
        'fillColor': '#ff0000'
      });
    });
    layer.on('click', function () {
    window.location = feature.properties.URL;
    });
}

});

$.getJSON("data/districts.geojson", function (data) {
  districts.addData(data);
});

- Bergen88

---

我认为您忘记在L.geoJson选项中定义onEachFeature回调函数。请参见http://leafletjs.com/reference.html#geojson - YaFred

Answer 1

在 onEachFeature 回调函数中，您可以获取由 GeoJSON 图层创建的 L.Polygon 的中心并将标签绑定到它上面。

var polygonCenter = layer.getBounds().getCenter();

// e.g. using Leaflet.label plugin
L.marker(polygonCenter)
    .bindLabel(feature.properties['NAME'], { noHide: true })
    .addTo(map);

这里有一个例子：http://jsfiddle.net/FranceImage/ro54bqbz/，使用了Leaflet.label。

- YaFred

---

我应该将这个添加到已经调用的oneachfeature中，还是创建一个新的函数？到目前为止，我一直在收到一个错误：“TypeError：e未定义”。 - Bergen88

你是否包含了以下两个链接：https://raw.githubusercontent.com/Leaflet/Leaflet.label/master/dist/leaflet.label.js 和 https://github.com/Leaflet/Leaflet.label/blob/master/dist/leaflet.label.css？ - YaFred

app1o8bd13e.js 中有一个错误... onEachFeature: function (feature, layer)。目前，你写成了 onEachFeature(feature, layer)。你可以使用浏览器的 JavaScript 控制台查看这个错误。 - YaFred

我已经更新了代码，但是我收到了“bindLabel不是一个函数”的错误。 - Bergen88