How to label the features in openlayers without using overlays

Question

I am aware of adding overlays in openlayers and using them as tooltips for relaying some information, but we have to manage the things to get it done. Leaflet on the other hand has provided bindLabel() to display tooltips in the viewport of map. My question is can it be done in openlayers without overlays because as the number of overlays grows the map starts to get slow in rendering. Overlays can only be displayed in one world. What if we want to display it in other worlds of map.

References labels and overlays :

Leaflet labels for features

Overlays in openlayers

Answer 1

Include a text style in the style to display labels on features. You can use a single overlay which follows the pointer as a tooltip.

var fill = new ol.style.Fill({
  color: 'rgba(255,255,255,0.4)'
});
var stroke = new ol.style.Stroke({
  color: '#3399CC',
  width: 1.25
});
var styles = [
  new ol.style.Style({
    image: new ol.style.Circle({
      fill: fill,
      stroke: stroke,
      radius: 5
    }),
    fill: fill,
    stroke: stroke,
    text: new ol.style.Text({
      font: '18px Calibri,sans-serif',
      textBaseline: 'top',
      offsetY: 6,
      backgroundFill: new ol.style.Fill({
        color: 'rgba(255,204,51,0.5)'
      }),
      backgroundStroke: new ol.style.Stroke({
        width: 1,
        color: 'rgba(0,0,0,0.5)'
      }),
      padding: [0,2,0,2]
    })
  })
];

  var map = new ol.Map({
    target: 'map',
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    }),
    layers: [new ol.layer.VectorTile({
      source: new ol.source.VectorTile({
        format: new ol.format.MVT(),
        url: 'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf'
      }),
      style: function(feature) {
        var type = feature.get('layer');
        if (type == 'Coastline' || type.indexOf('City') == 0) {
          styles[0].getText().setText(feature.get('_name') || feature.get('_name_global'));
          return styles;
        }
      },
      declutter : true
    })]
  });

var content = document.createElement('div');
content.style.overflow = "auto";
content.style.height = "90px";
var popup = document.createElement('div');
popup.className = "ol-unselectable"
popup.style.zindex = "1";
popup.style.position = "absolute";
popup.style.background = "rgba(224,148,94,1)";
popup.style.font = "18px Calibri,sans-serif";
popup.style.color = "white";
 
popup.appendChild(content);

var overlay = new ol.Overlay({
    element: popup,
   // positioning: 'bottom-center',
    offset: [0, -95],
    autoPan: false
});
map.addOverlay(overlay);

map.once('rendercomplete', function(){
  showInfo(ol.proj.fromLonLat([72.825833, 18.975]));
});

map.on('pointermove', function(event){ showInfo(event.coordinate); });

function showInfo(coordinate) {
    var features = map.getFeaturesAtPixel(map.getPixelFromCoordinate(coordinate), {
        hitTolerance: 2
    });
    if (!features) {
        overlay.setPosition(undefined);
        return;
    }
    var feature = features[0];
    var name = feature.get('_name') || feature.get('_name_global');
    if (!name) {
        overlay.setPosition(undefined);
        return;
    }
    var text = ' ' + name + ' ';
    var local = feature.get('_name_local')
    if (local && local != name) {
      text += '<br>' + '&nbsp;' + local + '&nbsp;';
    }
    content.innerHTML = '<pre>' + text + '</pre>';
    overlay.setPosition(coordinate);
}

<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet"/>
<div id="map" class="map"></div>