Filteransicht basierend auf dem angezeigten Teil einer Open Layers-Karte

Ich habe eine Seite, die eine OpenLayers-Karte zeigt, die mit Daten aus einer Open Layers-Datenüberlagerungsansicht gespeist wird (Benutzerstandorte; der Standort wird über ein Standort-Cck-Feld in den Benutzerkontoeinstellungen bereitgestellt). Direkt unter der Karte werden die Überlagerungsdaten mithilfe eines Klons der Open Layers-Datenüberlagerung aufgelistet.

Gibt es eine Möglichkeit, die angezeigten Berechtigungen in der Liste basierend darauf zu filtern, welcher Teil der Karte gerade angezeigt wird? Gibt es eine Möglichkeit, Objekte aus der Liste auszublenden, wenn ich in einen anderen Teil der Karte zoome?

Beispiel: Vollständig gezoomt, um die ganze Welt anzuzeigen -> alle Objekte anzeigen. In die USA gezoomt, wobei nur Kalifornien angezeigt wird -> alle Objekte mit einem kalifornischen Standort anzeigen.

Wir hatten die gleiche Anforderung in einem kürzlich durchgeführten Projekt. Es wurde mit Javascript gelöst, es gibt keinen sofort einsatzbereiten Weg, dies zu tun.

Weitere Informationen finden Sie unter https://www.transpower.co.nz/projects

Hier ist ein Code, mit dem Sie beginnen können:

(function ($, Drupal, window, document, undefined) {

  // ...

  $(function(){

    if($(".not-front .openlayers-map").length && !$('.node-type-project').length) { // only run when there is actually a map on the page, but not on the home page

      if ($('body').hasClass('page-community-initiatives')) {
        is_ci = true;
      }

      mapData = $(".openlayers-map").data('openlayers').openlayers;
      pointLayers = mapData.getLayersByClass("OpenLayers.Layer.Vector");

      // cycle through all layers and points on those layers, adding the points to an array
      for (var i in pointLayers) {
        for (var j in pointLayers[i].features) {
          pointData.push(pointLayers[i].features[j]);
        }
      }

      // if we've pulled out some points, go make a list
      if (pointData.length) {
        makeList(pointData, ".pane-openlayers-map");
      } else {
        $('.pane-openlayers-map').append('<div class="no-results"><p>Your search returned no results, please try again.</p></div>')
      }

      // add event listener to the map to be fired whenever the user interacts with it.
      // calls refreshList function above
      mapData.events.on({
        "moveend": refreshList
      });

      Drupal.openlayers.popup.popupSelect.events.on({
        "featurehighlighted": popupOpen,
        "featureunhighlighted": popupClose
      });

    }

  });

})(jQuery, Drupal, this, this.document);

Die gesamte JS-Datei kann vom Thema heruntergeladen (nicht minimiert) werden . Bitte ändern Sie es Ihren Bedürfnissen entsprechend.