Chế độ xem bộ lọc dựa trên phần được hiển thị của bản đồ Lớp mở

Tôi có một trang hiển thị bản đồ OpenLayers được cung cấp dữ liệu đến từ chế độ xem lớp phủ dữ liệu Lớp mở (vị trí người dùng; vị trí được cung cấp qua trường cck vị trí trong cài đặt tài khoản người dùng). Ngay bên dưới bản đồ, dữ liệu lớp phủ được liệt kê bằng cách sử dụng bản sao của lớp phủ dữ liệu Lớp mở.

Có cách nào để lọc các quyền được hiển thị trong danh sách dựa trên phần nào của bản đồ hiện đang được xem không? Đó là, có cách nào để ẩn các thực thể khỏi danh sách khi tôi phóng to vào một phần khác của bản đồ không?

Ví dụ: Thu phóng đến toàn bộ mở rộng, hiển thị toàn bộ thế giới -> hiển thị tất cả các thực thể. Thu phóng đến Hoa Kỳ, chỉ hiển thị California -> hiển thị tất cả các thực thể có vị trí ở California.

Chúng tôi đã có cùng một yêu cầu trong một dự án gần đây. Nó đã được giải quyết bằng javascript, không có cách nào khác để làm điều này.

Vui lòng xem https://www.transpower.co.nz/projects

Đây là một số mã để giúp bạn bắt đầu:

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

Toàn bộ tệp JS có thể được tải xuống (chưa hoàn thành) từ chủ đề . Hãy thay đổi cho phù hợp với nhu cầu của bạn.