Простая метка на многоугольнике (geojson)

Я пытаюсь понять, что я считаю довольно распространенным прецедентом с объектом multipolgon листка.

Я создаю MultiPolygon с помощью geojson:

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

Мне хотелось бы поставить простую текстовую метку в центре каждого полигона. (Например, что-то вроде помещения имени состояния в центр каждого состояния).

Я посмотрел: https://groups.google.com/forum/?fromgroups=#!topic/leaflet-js/sA2HnU5W9Fw

Что на самом деле накладывает текст, но когда я добавляю кучу полигонов, он, кажется, помещает ярлык не в центр, и я в настоящее время не могу отследить проблему.

Я также посмотрел: https://github.com/jacobtoye/Leaflet.label

но, по-видимому, он помещает метку на полигонах, когда вы наводите указатель мыши на многоугольник и не статически статируете на многоугольнике.

Я думаю, что мой лучший способ действий - использовать эту первую ссылку и определить, почему она меняет местоположение, но в то же время, если кто-нибудь знает быстрый и простой способ наложить ярлык на многоугольник в листовке, Я был бы очень обязан.

Кроме того, если у меня есть какие-либо ошибочные предположения о двух ссылках выше, пожалуйста, не стесняйтесь выпрямить меня.

Спасибо очень заблаговременно.

Ответы

Ответ 1

Плакат с надписью labellet также позволяет создавать статические метки, см. демонстрацию . Единственная причина, по которой метка полилинии не является статичной, заключается в том, что она перемещается по ходу вдоль полилинии.

Возможно, вы можете сделать это лучше, переопределив bindLabel() для полигонов, но это простой способ добавить статическую метку в центр многоугольника:

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

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

Ответ 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);
  }
);