web-dev-qa-db-ja.com

開いているレイヤーマップの表示部分に基づいてビューをフィルター処理する

Open Layersデータオーバーレイビューからのデータが供給されるOpenLayersマップを表示するページがあります（ユーザーの場所。場所はユーザーアカウント設定の場所のcckフィールドを介して提供されます）。マップのすぐ下に、オーバーレイデータがOpen Layersデータオーバーレイのクローンを使用してリストされます。

現在マップのどの部分が表示されているかに基づいて、リストに表示されているエンティティをフィルタリングする方法はありますか？つまり、マップの別の部分にズームインしたときにリストからエンティティを非表示にする方法はありますか？

例：全体にズームして全世界を表示->すべてのエンティティを表示します。米国にズームし、カリフォルニアのみを表示->カリフォルニアの場所にあるすべてのエンティティを表示します。

viewslocationjavascript
7
deinqwertz

最近のプロジェクトでも同じ要件がありました。それはjavascriptで解決されました、これを行うための独創的な方法はありません。

参照してください https://www.transpower.co.nz/projects

ここにあなたが始めるためのいくつかのコードがあります：

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

JSファイル全体は theme からダウンロード（非圧縮）できます。必要に応じて変更してください。

2
wiifm