Bagaimana cara memberi label pada poligon GeoJSON?

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

Apakah Anda keberatan memposting solusi yang Anda gunakan untuk memberi label poligon, jika masih ada?

— a1an

Jawaban:

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

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

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

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

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

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

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

@ 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