web-dev-qa-db-ja.com

リーフレット（ジオソン）ポリゴンの単純なラベル

私は、リーフレットのマルチポリゴンオブジェクトを使用して、かなり一般的なユースケースになると思っていることを試みています。

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

しかし、ポリゴン上にマウスを置いたときにのみポリゴンにラベルを付けるように見え、ポリゴン上に静的に留まることはありません。

私の最善の行動は、最初のリンクを使用し、それが場所を変更する理由を追跡することだと思いますが、一方で、誰かがリーフレットのポリゴンにラベルをすばやく簡単に配置する方法を知っているなら、とても義務付けられています。

また、上記の2つのリンクについて誤った仮定がある場合は、お気軽にご連絡ください。

事前に感謝します。

javascriptmappingopenlayersleaflet
29
Hoopes

リーフレットラベルプラグインでは、静的ラベルも使用できます。 demo を参照してください。ポリラインラベルが静的ではない唯一の理由は、ポリラインに沿って移動するとラベルが動き回ることです。

PolygonsのbindLabel（）をオーバーライドすることにより、おそらくこれよりも良い結果が得られますが、これはポリゴンの中心に静的ラベルを追加する簡単な方法です。

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

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

22
flup

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);
  }
);
14
Brendan Nee