Bagaimana cara memberi label poin geojson di Leaflet?

Bagaimana cara menunjukkan label untuk poin geojson di peta Leaflet?

Ada Leaflet.label yang sekarang tidak digunakan lagi untuk L.Tooltip , tetapi itu hanya menampilkan teks saat di-hover. Saya ingin menunjukkan label teks langsung di peta tanpa perlu interaksi pengguna.

Input sampel - https://gist.github.com/maphew/e168430e999fc738eeb3448feda121cd

Hasil yang diinginkan (titik hijau dengan label teks, elemen grafis lainnya hanya untuk konteks):

Pembaruan: Saya ingin membuat teks yang menyatu dengan peta seperti gambar di bawah ini, bukan popup tooltip.

leaflet geojson

— matt wilkie
sumber

Cukup gunakan opsi tooltip permanent? Dari leafletjs.com/reference-1.1.0.html#tooltip-option :Whether to open the tooltip permanently or only on mouseover

— BradHards

Gunakan L.Markers dengan L.DivIcons.

— IvanSanchez

Jika Anda tidak dapat menyelesaikan ini sepenuhnya di Leaflet, sebuah opsi bisa dengan meletakkan poin Anda di GeoServer (atau serupa) dan memuatnya sebagai lapisan ubin WMS di mana gaya menunjukkan label . Dalam contoh ini label biru diperoleh dengan cara ini

— Stephen Lead

@IvanSanchez Saya tidak bisa melakukannya. Kustom html tidak masuk. Lihat upaya saya di jsfiddle.net/maphew/q0refcwx/1

— matt wilkie

Berikut ini adalah implementasi mengikuti saran @BradHards untuk menggunakan permanentopsi untuk tooltip. The opacitypilihan memudar teks dan kontainer latar belakang sama.

var data_points = {
    "type": "FeatureCollection",
    "name": "test-points-short-named",
    "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
    "features": [
    { "type": "Feature", "properties": { "name": "1" }, "geometry": { "type": "Point", "coordinates": [ -135.02507178240552, 60.672508785052223 ] } },
    { "type": "Feature", "properties": { "name": "6"}, "geometry": { "type": "Point", "coordinates": [ -135.02480935075292, 60.672888247036376 ] } },
    { "type": "Feature", "properties": { "name": "12"}, "geometry": { "type": "Point", "coordinates": [ -135.02449372349508, 60.672615176262731 ] } },
    { "type": "Feature", "properties": { "name": "25"}, "geometry": { "type": "Point", "coordinates": [ -135.0240752514004, 60.673313811878423 ] } }
    ]};

var pointLayer = L.geoJSON(null, {
  pointToLayer: function(feature,latlng){
    label = String(feature.properties.name) // Must convert to string, .bindTooltip can't use straight 'feature.properties.attribute'
    return new L.CircleMarker(latlng, {
      radius: 1,
    }).bindTooltip(label, {permanent: true, opacity: 0.7}).openTooltip();
    }
  });
pointLayer.addData(data_points);
mymap.addLayer(pointLayer);

Contoh kerja lengkap: https://jsfiddle.net/maphew/gtdkxj8e/3/

Untuk menghapus latar belakang label

Lihat Mengganti style tooltip Leaflet? untuk detail memodifikasi CSS dan Menghapus label label tooltip sepenuhnya di peta Leaflet.js? untuk menghapus pointer segitiga tanpa menyentuh CSS (cukup tambahkan direction: "center"ke .bindTooltip!)

Javascript:

.bindTooltip(label, {permanent: true, 
   direction: "center",
   className: "my-labels"}).openTooltip();

CSS:

.leaflet-tooltip.my-labels {
  background-color: transparent;
  border: transparent;
  box-shadow: none;
  }

Contoh kerja lengkap: https://jsfiddle.net/maphew/gtdkxj8e/7/

— matt wilkie
sumber

Jika Anda mengambil rute ini, Anda dapat mengubah css tooltips atau menambahkan classname (tooltip mewarisi dari divoverlay) ke tooltip untuk menghapus warna latar belakang, perbatasan, bayangan, dll yaitu. .leaflet-tooltip {background-color: transparent;border: transparent;}

— Diffusion_net

@Diffusion_net terima kasih! kata kunci tersebut mengarahkan saya ke pertanyaan terkait dan ke solusi yang lebih lengkap (sekarang ditambahkan untuk menjawab).

— matt wilkie