Bagaimana cara memberi label pada poligon GeoJSON?

9

Saya menggunakan Leaflet yang dikombinasikan dengan fitur GeoJSON. Apakah ada cara untuk memberi label fitur GeoJSON (dalam hal ini - poligon)? Seharusnya mendapat label dari

feature.properties.name 

Ini adalah kode saya di mana saya pikir saya dapat memasukkan label:

function style(feature) {
            return {
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.7,
                fillColor: getColor(feature.properties.coloring)
            };
        }
melawan arus
sumber
1
Apakah Anda keberatan memposting solusi yang Anda gunakan untuk memberi label poligon, jika masih ada?
a1an

Jawaban:

5

Anda perlu tahu format leaflet yang ingin digunakan. RFM. Contoh: OpenLayers mengharapkan format GeoJSON ini untuk membuat titik dan memberikan beberapa atribut khusus:

{"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]
            }
        }
    ]
}

Seperti yang Anda lihat, saya telah membuat Geometri (Titik) dan bergabung dengan atribut saya untuk itu. Ketika saya mengirim ini ke OpenLayers, hasilnya akan sesuai dengan contoh @ Aragon, menggunakan "warna" dan "nama" (sebagai label) untuk menyesuaikan titik di peta.

Silakan salin dan tempel contoh GeoJSON ini di http://json.parser.online.fr/ atau gunakan situs untuk mencoba dan memvalidasi milik Anda.

Magno C
sumber
Bukankah pertanyaan tentang poligon? Bagaimana jawaban tentang geometri Titik memecahkan pertanyaan?
a1an
Dan apa itu poligon? Anda akan memberi nama yang sama. Satu-satunya hal yang akan berubah adalah bagian "geometri". Tidak hanya menyelesaikan pertanyaan tetapi menerima 5 up hingga sekarang.
Magno C
Saya ulangi lagi: Saya memiliki pertanyaan yang sama dan menempatkan label pada poligon sangat berbeda dari menempatkannya pada suatu titik, jadi poligon berarti bagi saya objek tertutup dua dimensi dengan beberapa tepi, dalam konteks ini. Itu sebabnya saya tertarik untuk mendapatkan beberapa perincian, oleh karena itu komentar pertama saya. Jawaban "itu memang menyelesaikannya" tidak begitu membantu tetapi terima kasih :-)
a1an
1
Cukup tambahkan "properti" dan semuanya akan baik-baik saja. Lihat jawaban @Aragon return feature.properties.color;Seperti yang Anda lihat, propertiesadalah featureatribut dan miliki colorsebagai salah satu atributnya. Anda dapat memasukkan apa pun yang Anda inginkan ke objek ini dengan mengikuti cara ini.
Magno C
2
RFMbenar-benar tidak pantas untuk. Dan perbedaan antara titik dan poligon adalah signifikan, karena mengetahui geometri mana yang tepat digunakan adalah masalah di sini
Stephen Lead
5

Inilah cara saya menyelesaikannya dengan Leaflet Polygons and Labels, sehingga Anda mendapatkan label mengambang pada poligon dengan properti namanya.

Seharusnya:

  • Anda mendapatkan respons json diuraikan ke dalam variabel json
  • hanya ada poligon sederhana tanpa lubang di json
  • polygon_style menampung opsi gaya yang dikembalikan oleh fungsi gaya Anda
  • label_layer adalah Layergroup selebaran (atau langsung peta Anda)

Kemudian:

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

Cukup aneh, GeoJson (sebenarnya EPSG: 4326) dan koordinat Leaflet ditukar secara berurutan.

a1an
sumber
1
Bagi mereka yang menggunakan Leaflet 1.0+, L.Label telah dipindahkan ke inti Leaflet sebagai L.Tooltip dan plugin telah ditinggalkan. Anda akan menggunakan bindTooltip () alih-alih bindLabel (). github.com/Leaflet/Leaflet.label
aethergy
1

Saya pikir pertanyaan ini adalah tentang openlayers.Jika demikian, Anda dapat menggunakannya untuk memberi label;

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

Saya harap ini membantu Anda ...

Aragon
sumber
1
Itu bukan OpenLayers. Saya menggunakan Leaflet yang dikombinasikan dengan fitur GeoJSON. Jadi ini tidak berhasil. Tapi terima kasih sudah mencoba.
melawan aliran
Mengapa Anda tidak fillColor: "${color}"membuat fungsi?
Magno C
1
@ Magno C tidak ada perbedaan antara poin Anda. Tapi keduanya sama. Saya telah menulis ini untuk jika Anda ingin menambahkan fungsi yang lebih rumit sebagai warna acak atau yang lainnya. masih terima kasih atas poin Anda.
Aragon
Mengerti Aragon. Terima kasih untuk metode baru ini. Semoga bermanfaat di masa depan. Jempolan !
Magno C
Saya pikir tidak mungkin @againstflow kehabisan dari format yang saya perlihatkan, karena ada spesifikasi GeoJSON yang berkuasa di sini: tautan
Magno C