web-dev-qa-db-ja.com

レイヤー3ズームマップイベントハンドラーを開く

Open Layers 3でズームイベントを処理する必要があります。

以下は私のコードです：

map_object = new ol.Map({
target: 'map',
controls: controls_list,
interactions: interactions_list,
overlays: [overlay],
layers: [OSM_raster, WFS_layer],
    view: view
});


map_object.on("Zoom", function() {
  console.log('Zooming...');
});

このコードはエラーなしで実行され、マップを表示しますが、コンソールへの出力はありません。この関数が起動していないことを示唆しています。

私も試しました：

map_object.on("drag", function() {
  console.log('Dragging...');
});

そして、これも何もしません。

OL3でのマップコントロールイベントの処理方法に関するヘルプは大歓迎です（特にズーム！）。注：onメソッドのtypeフィールドに 'zoom'と 'Zoom'を試しました。

javascriptopenlayers-3
17
Single Entity

moveendイベントで試してください。 （ https://openlayers.org/en/latest/apidoc/module-ol_MapEvent-MapEvent.html#event:moveend を参照）。

7
tonio

これに追加するだけで、「propertychange」で利用可能なイベントのバリエーションを確認できます。私が見ているものから、明示的な.on ('zoom', ...)はありませんが、前に述べたように「解像度」および他のプロパティにアクセスできますコメント：

map.getView().on('propertychange', function(e) {
   switch (e.key) {
      case 'resolution':
        console.log(e.oldValue);
        break;
   }
});
15
ako977

言及 by tonio として、解像度変更と呼ばれるズーム変更を聞く方法オープンレイヤーの用語では、

map.getView().on('change:resolution', (event) => {
    console.log(event);
});

一般的なpropertychangeをリッスンし、変更が解決に関係するかどうかを手動で確認するよりも、これが優れている（簡潔で、簡潔である）ことがわかります。

これは、マウスボタンを使用すると急速に起動するため、変更を待機する計算を起動する前に、それを調整することをお勧めします。

ビューのドキュメント

1
Félix Gagnon-Grenier

Moveendイベントを管理できます...

マップの表示ズームレベルを割り当てるには、グローバル変数が必要です。 currentZoomLevelという名前を付けました。

Moveendイベントが利用可能です。それを使って、ズームレベルチェック機能を追加しましょう。

新しいズームレベルがある場合、DOMのドキュメントに対してzoomendイベントをトリガーします。

最後に、zoomendリスナーをドキュメント要素に追加する必要があります。

var = currentZoomLevel;

map.on('moveend', checknewzoom);

function checknewzoom(evt)
{
   var newZoomLevel = map.getView().getZoom();
   if (newZoomLevel != currentZoomLevel)
   {
      currentZoomLevel = newZoomLevel;
      $(document).trigger("zoomend", zoomend_event);
   }
}

$(document).on('zoomend', function () {
   console.log("Zoom");
   //Your code here
});

ソース

1
trucheromayor