2017-01-11 33 views
0

私はこのように、書き換えリーフレットイベント

map.on('boxzoomend', function(e) { 
    console.log('end') 
}) 

しかし、boxzoomはまだズームと私はそれを停止し、ちょうどコンソール内のテキストを印刷する方法が分からない、boxzoomイベントを書き換えるようにしてください。私は、コンソール

  • 印刷テキストをズームから次

    1. ストップとしてboxzoom書き換えることを願っていますが、イベントを書き換えるための正しい方法を提供することはできますか?ありがとうございました。

  • +0

    正確に何が必要なのかはっきりしません。地図をマウスホイールで拡大しないようにしますか? – muzaffar

    +0

    不明な点をおかけして申し訳ございません。私は要件を変更しました。私はシフト&矩形を描画した後に、地図がズームで止まり、コンソールのテキストのみを印刷することを希望します。 – Ezek

    +0

    実際に 'map.on( 'boxzoomend')は、一度矩形を描画すると、地図はzommingを終える。だから、あなたがこれを試している方法はあなたを助けません。 – muzaffar

    答えて

    3

    ズームは、boxzoomendイベントではなく、BoxZoomハンドラで実行されます。

    _onMouseUp: function (e) { 
    
        ... 
    
        this._map 
         .fitBounds(bounds) 
         .fire('boxzoomend', {boxZoomBounds: bounds}); 
    }, 
    

    したい機能を達成するためのより良い方法は、あなたが必要とする方法を修正すること、BoxZoomハンドラを拡張する新しいハンドラを作成することです:私はLeaflet source code from src/map/handler/Map.BoxZoom.jsを引用してみましょう。

    これを行う前にLeaflet tutorials、特にcreating Leaflet pluginsのものを読むことをお勧めします。

    アイデアはBoxZoomハンドラ拡張することです:ので、その代わりに、ズームの... ... _onMouseUp方法を変更...

    L.Map.BoxPrinter = L.Map.BoxZoom.extend({ 
    

    _onMouseUp: function (e) { 
    

    それだけで物事を印刷します:

     ... 
         console.log(bounds); 
         this._map.fire('boxzoomend', {boxZoomBounds: bounds}); 
        } 
    } 
    

    チュートリアルで説明しているように、ハンドラをフックし、いくつかのマップオプションを提供します。

    L.Map.mergeOptions({boxPrinter: true}); 
    L.Map.addInitHook('addHandler', 'boxPrinter', L.Map.BoxPrinter); 
    

    我々はそれに取り組んでいる一方で、デフォルトではすべてのマップインスタンスのデフォルトBoxZoomハンドラを無効にします。

    L.Map.mergeOptions({boxZoom: false}); 
    

    全部がthis working exampleにようになります。

    +0

    ありがとうございました。チュートリアルはとても役に立ちます! – Ezek