Wie beschriftet man Geojson-Punkte in der Broschüre?

Wie werden Beschriftungen für Geojson-Punkte in einer Merkblattkarte angezeigt?

Es gibt Leaflet.label , das jetzt zugunsten von L.Tooltip veraltet ist , aber nur Text beim Hover anzeigt. Ich möchte die Textbeschriftungen direkt auf der Karte anzeigen, ohne dass eine Benutzerinteraktion erforderlich ist.

Beispieleingabe - https://gist.github.com/maphew/e168430e999fc738eeb3448feda121cd

Gewünschtes Ergebnis (grüne Punkte mit Textbeschriftungen, die anderen grafischen Elemente dienen nur dem Kontext):

Update: Ich möchte Text erstellen, der sich wie im Bild unten in die Karte einfügt, und keinen Popup-Tooltip.

Hier ist eine Implementierung, die dem Vorschlag von @BradHards folgt, die permanentOption für den Tooltip zu verwenden. Die opacityOption blendet sowohl Text- als auch Hintergrundcontainer gleichermaßen aus.

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

Vollständiges Arbeitsbeispiel: https://jsfiddle.net/maphew/gtdkxj8e/3/

So entfernen Sie den Etikettenhintergrund

Siehe Tooltip-Stil für das Überschreiben von Broschüren? Weitere Informationen zum Ändern des CSS und zum vollständigen Entfernen des Tooltip-Beschriftungsrahmens in der Leaflet.js-Karte? das Dreieck Zeiger zum Entfernen ohne die CSS zu berühren (fügen Sie einfach direction: "center"auf .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;
  }

Vollständiges Arbeitsbeispiel: https://jsfiddle.net/maphew/gtdkxj8e/7/