カスタムライブラリイベント（Google Mapsイベントなど）をRxJSのObservableストリームに変換するにはどうすればよいですか？

Question

私はGoogleマップイベントからRxJS観測可能ストリームを作成したいと思います。私のようなので、ネイティブブラウザのイベントからこれを行う方法を知っている：

var result = document.getElementById('result'); 

var source = Rx.Observable.fromEvent(document, 'mousemove'); 

var subscription = source.subscribe(function (e) { 
    result.innerHTML = e.clientX + ', ' + e.clientY; 
}); 

mousemoveが.fromEvent()がハードコーディングされたデフォルトとしてmousemove認識していることを信じるように私をリードブラウザイベント、です。しかし、カスタムイベントを認識したい場合は、どのように観測可能なストリームを作成できますか？たとえばGoogleマップを見てみましょう：私はパフォーマンスの改善のためのRxJS debounceを使用できるように

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: {lat: -25.363, lng: 131.044} 
    }); 

    map.addListener('center_changed', function() { 
    var center = map.getCenter() 
    console.log(center) 
    }); 

私が観察ストリームにこれらのGoogleマップイベントを変換したい理由はあります。そうすればcenter_changedはバッチでのみ認識されます（2秒間に10回発射するのではなく、同じ2秒間に最後の1回を認識します）。私のジレンマは、そのカスタムGoogleマップイベントを観測可能なストリームに変換しています。おそらく観察可能なものに継続的に追加する簡単な方法がありますが、私の検索ではその方法を見つけられませんでした。

この問題でお時間をいただきありがとうございます。ほんとうにありがとう！

Answer 1

あなたがやりたいfromEventPatternを使用することができるはずです。

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: { lat: -25.363, lng: 131.044 } 
}); 

var source = Rx.Observable.fromEventPattern(
    function (handler) { 
     return map.addListener('center_changed', handler); 
    }, 
    function (handler, listener) { 
     google.maps.event.removeListener(listener); 
    } 
); 
source.subscribe(function() { 
    console.log(map.getCenter()); 
}); 

fromEventPatternが、それは「カスタム」のほとんどの種類から、観察を取得するのは簡単ですので、あなたは、アドオンを提供し、実装を削除することができますイベントメカニズム。 addハンドラによって返された値は、2番目のパラメータとしてremoveハンドラに渡されることに注意してください。この場合、それはリスナーです。これは、Googleマップのイベントリスナーを削除するときに必要となるものです。