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


7

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

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

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

回答:


2

最近のプロジェクトでも同じ要件がありました。これは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ファイル全体をテーマからダウンロード(非圧縮)できます。必要に応じて変更してください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.