リーフレット（geojson）ポリゴンのシンプルなラベル

Question

私はリーフレットのマルチポリゴンオブジェクトでかなり一般的なユースケースであると想像しています。

私はにGeoJSONを使用してマルチポリゴンを作成します。

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

私が好きな、何が各ポリゴンの中心にシンプルなテキストラベルを置くことです。 （例えば、各州の中心に州名を入れるようなもの）。実際にテキストをオーバーレイが、私はポリゴンの束を追加するとき、奇妙な方法で、中心から外れたラベルを置くように見える、と私は現在できないよ https://groups.google.com/forum/?fromgroups=#!topic/leaflet-js/sA2HnU5W9Fw

：私が見てきた

問題を追跡する

私も見てきました：https://github.com/jacobtoye/Leaflet.label

が、ポリゴンの上にあなたのマウスは、ポリゴン上で静的に滞在していないときには、ポリゴンのみにラベルを置くように見えます。

私は、最初のリンクを使って場所を変更する理由を追跡するのが最善の方法だと思っていますが、その間に誰かが素早く簡単にリーフレットのポリゴン、私はずっと義務づけられています。

また、上記の2つのリンクに関する誤った仮定がある場合は、私をまっすぐにしてください。

ありがとうございます。

Answer 1

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

おそらくポリゴンのbindLabel（）をオーバーライドすることで、これよりも良い行うことができますが、これは、多角形の中央に静的なラベルを追加する簡単な方法です：

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

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

Answer 2

あなたにオプションを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); 
    } 
);