Mostrar la ventana emergente sólo con un nivel de zoom específico

Question

En mi mapa tengo un vector de puntos que se muestra como mapa de calor hasta un nivel de zoom específico, después de esto muestro los puntos normalmente.

var geoBlogHeatmap = new ol.layer.Heatmap({
  title: 'Heatmap',
  source: sourceGeoBlog,
  opacity: 0.8,
  renderMode: 'vector',
  gradient: ['#253494', '#2c7fb8', '#41b6c4', '#a1dab4', '#ffffcc'],
  blur: 20,
  radius: 20,
  shadow: 250,
  minZoom: 8,
  maxZoom: 13,
});

var geoBlog = new ol.layer.Vector({
  source: sourceGeoBlog,
  style: styleFunction,
  minZoom: 12,
  maxZoom: 18,
});

He utilizado el ejemplo de Popup oficial para mostrar una ventana emergente después de un clic en una característica.

/**
 * Elements that make up the popup.
 */
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');

/**
 * Create an overlay to anchor the popup to the map.
 */
var overlay = new ol.Overlay({
  element: container,
  autoPan: true,
  autoPanAnimation: {
    duration: 250
  },
});

/**
 * Add a click handler to hide the popup.
 * @return {boolean} Don't follow the href.
 */
 closer.onclick = function() {
  overlay.setPosition(undefined);
  closer.blur();
  return false;
};

var feature_onClick;
map.on('click', function(evt) {

    feature_onClick = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
        // console.log(feature);
        return feature;
      });

  if (feature_onClick) {
    // console.log(feature_onClick.getProperties().pk);
    overlay.setPosition(evt.coordinate);
     content.innerHTML =
     '<h3 class="text-center">'+ feature_onClick.getProperties().title + '</h3>'
     + '<hr>'
     + '<p>' + feature_onClick.getProperties().description + '</p>'
     + '<a class="btn btn-sm btn-success" href="'+ feature_onClick.getProperties().url + '">Approfondisci</a>'
     + '<hr>'
     + '<small class="text-muted"> Pubblicato: ' + feature_onClick.getProperties().time_since_publication + '</small>'
     }
});

Me gustaría ver la ventana emergente sólo cuando pueda ver los puntos, entonces de minZoom: 12 . ¿Cómo puedo hacerlo?

Answer 1

Todo lo que tienes que hacer es comprobar en tu click función de procesamiento de eventos si el nivel de zoom actual map.getView().getZoom() es inferior a 12, y si lo es, devuelve inmediatamente.

El código podría entonces ser algo así:

map.on('click', function(evt) {
  if (map.getView().getZoom() < 12) return;

  feature_onClick = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
  .
  .
  .