GeoJSON poligonları nasıl etiketlenir?


10

Leaflet'i GeoJSON özellikleriyle birlikte kullanıyorum. GeoJSON özelliklerini etiketlemenin bir yolu var mı (bu durumda - çokgenler)? Etiketleri

feature.properties.name 

Bu benim kod nereye etiket eklemek düşünüyorum:

function style(feature) {
            return {
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.7,
                fillColor: getColor(feature.properties.coloring)
            };
        }

1
Hala el altındaysanız, çokgeni etiketlemek için kullandığınız çözümü yayınlamak ister misiniz?
a1an

Yanıtlar:


6

Broşürün kullanmayı beklediği formatı bilmeniz gerekir. SİM. Örnek: OpenLayers bu GeoJSON formatının bir nokta oluşturmasını ve bazı özel özellikler vermesini bekler:

{"type":"FeatureCollection",
    "features":[
        {"type":"Feature",
            "properties":{
                "name":"TRON-02",
                "serial":"TRON002",
                "bearing":0,
                "color":"green",
                "size":15,
                "image":"img/unit_map3.png",
            },
            "geometry":{
                "type":"Point",
                "coordinates":[-50.06542968749966,-23.749149728383717]
            }
        }
    ]
}

Gördüğünüz gibi, bir Geometri (Nokta) oluşturdum ve niteliklerime katıldım. Bunu OpenLayers'a gönderdiğimde, sonuç, noktayı haritadaki özelleştirmek için "color" ve "name" (etiket olarak) kullanarak @ Aragon örneğine sığacaktır.

Lütfen bu GeoJSON örneğini kopyalayıp http://json.parser.online.fr/ adresine yapıştırın veya siteyi kendinizinkini doğrulamak için kullanın.


Çokgenler hakkında soru değil miydi? Nokta geometrisi ile ilgili bir soru soruyu nasıl çözdü?
a1an

Ve çokgen nedir? Aynı adı vereceksiniz. Değişecek tek şey "geometri" kısmıdır. Sadece sorunu çözmekle kalmadı, şimdiye kadar 5 ups aldı.
Magno C

O zaman yeniden ifade edeyim: Aynı sorum var ve çokgene bir etiket yerleştirmek, bir noktaya yerleştirmekten oldukça farklı, bu yüzden çokgen bana bu bağlamda birkaç kenarı olan iki boyutlu bir kapalı nesne anlamına geliyor. Bu yüzden bazı detayları almakla ilgileniyorum, dolayısıyla ilk yorumum. Bir "bunu çözdü" cevabı o zaman çok yararlı değil ama yine de teşekkürler :-)
a1an

1
Sadece "özellikler" şeyler ekleyin ve hepsi iyi olacak. Bkz. @Aragon yanıtı return feature.properties.color;Gördüğünüz gibi properties, bir featureözelliktir ve özelliklerinden colorbiri olarak vardır. Bu yolu izleyerek istediğiniz her şeyi bu nesneye koyabilirsiniz.
Magno C

2
RFMtamamen uncalled. Ve bir nokta ile bir çokgen arasındaki fark önemlidir, çünkü hangi geometrinin kullanılacağını bilmek burada tam olarak sorun
Stephen Lead

5

İşte, Leaflet Polygons ve Labels ile nasıl çözdüm, böylece name özelliğine sahip çokgen üzerinde yüzen bir etiket elde edersiniz.

varsayalım:

  • json yanıtı json değişkenine ayrıştırılır
  • json'da deliksiz sadece basit çokgenler var
  • polygon_style stil işleviniz tarafından döndürülen stil seçeneklerini tutar
  • labels_layer bir Layergroup broşürüdür (veya doğrudan haritanızda)

Sonra:

for ( var i=0; i < json.features.length; i++ ) {
    feat = json.features[i];
    coords = [];
    for ( var j = 0 ; j < feat.geometry.coordinates[0].length - 1; j++ ) {
        coord = feat.geometry.coordinates[0][j];
        point = [];
        point.push( coord[1], coord[0]);
        coords.push( point );
    }
    labels_layer.addLayer(L.polygon( coords, polygon_style ).bindLabel(feat.properties.name))  ;
}

Oldukça garip bir şekilde GeoJson (aslında EPSG: 4326) ve Leaflet koordinatları sırayla değiştirilir.


1
Leaflet 1.0+ kullananlar için L.Label, L.Tooltip olarak Leaflet çekirdeğine taşındı ve eklenti kullanımdan kaldırıldı. BindLabel () yerine bindTooltip () yöntemini kullanırsınız. github.com/Leaflet/Leaflet.label
aethergy

1

Bu soru openlayers.if için olduğunu düşünüyorum, bu yüzden etiketleme için kullanabilirsiniz;

var style = new OpenLayers.Style({
    weight: 2,
    opacity: 1,
    color: 'white',
    dashArray: '3',
    fillOpacity: 0.7,
    fillColor: "${getColor}",  
    label: "${getLabel}"
  } , {
    context: {
      getColor: function(feature) {
        return feature.properties.color;
      },
      getLabel: function(feature) {
        return feature.properties.name;
      }
    }
  );

umarım sana yardımcı olur ...


1
OpenLayers değil. Leaflet'i GeoJSON özellikleriyle birlikte kullanıyorum. Yani bu işe yaramıyor. Ama denediğiniz için teşekkürler.
akış

Neden fillColor: "${color}"bir işlev yaratmak yerine yapmıyorsunuz ?
Magno C

1
@Magno C Sizin puanınız arasında bir fark yok. İkisi de aynı. rastgele renk veya başka bir şey olarak daha karmaşık bir işlev eklemek istiyorsanız için yazdım. hala görüşleriniz için teşekkür ederim.
Aragon

Anlaşıldı Aragon. Yeni yöntem için teşekkürler. Gelecekte yararlı olabilir. Başparmak havaya !
Magno C

@Againstflow'un gösterdiğim formattan tükenmesinin bir yolu olmadığını düşünüyorum, çünkü GeoJSON'u burada yöneten bir şartname var: link
Magno C
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.