एक पत्रक (GeoJSON) बहुभुज

Question

पर सरल लेबल मैं क्या मैं एक पत्रक multipolygon वस्तु के साथ एक बहुत ही आम यूज-केस होने की कल्पना का प्रयास कर रहा हूँ।

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

मैं चाहता क्या प्रत्येक बहुभुज के केंद्र में एक साधारण पाठ लेबल डाल करने के लिए है:

मैं MultiPolygon का उपयोग कर GeoJSON पैदा करते हैं। (उदाहरण के लिए, प्रत्येक राज्य के केंद्र में राज्य का नाम डालने जैसा कुछ)। https://groups.google.com/forum/?fromgroups=#!topic/leaflet-js/sA2HnU5W9Fw

कौन वास्तव में पाठ ओवरले, लेकिन जब मैं बहुभुज का एक समूह जोड़ने के लिए, यह लेबल ऑफ सेंटर अजीब तरीके में डाल करने के लिए प्रकट होता है, और मैं वर्तमान में असमर्थ हूं:

मैं देखा है समस्या को ट्रैक करने के लिए।

मैं भी देखा है: https://github.com/jacobtoye/Leaflet.label

लेकिन यह है कि केवल बहुभुज पर लेबल लगाने के लिए प्रकट होता है जब आप बहुभुज पर माउस, और बहुभुज पर स्थिर नहीं रहता।

मुझे लगता है कि मेरा सबसे अच्छा तरीका उस पहले लिंक का उपयोग करना है, और यह ट्रैक करना है कि यह स्थान क्यों बदल रहा है, लेकिन इस बीच, अगर किसी को पुस्तिका में बहुभुज पर लेबल रखने का एक त्वरित और आसान तरीका पता है , मैं बहुत बाध्य होगा।

इसके अलावा, अगर मैं ऊपर दो लिंक के बारे में कोई दोषपूर्ण मान्यताओं है, मुझे बाहर सीधा करने के लिए संकोच न करें।

अग्रिम धन्यवाद।

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.divIcon बनाने के लिए L.geoJson के onEachFeature विकल्प का उपयोग कर सकते हैं।

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); 
    } 
);