如何将自定义库事件(即Google Maps事件)转换为RxJS中的Observable流？

Question

我想从Google Map事件中创建一个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地图为例:

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

我想将这些谷歌地图事件转换为可观察流的原因是我可以使用RxJS debounce来提高性能.这种方式center_changed只能在批量中识别(而不是在2秒内发射10倍,它只能在同样的2秒内识别最后1x).我的困境是将自定义Google Maps事件转换为可观察的流.也许有一种简单的方法可以不断添加到一个可观察的,但从我的搜索中我还没有发现如何做到这一点.

感谢您在这件事上的时间和帮助!对此,我真的非常感激!

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处理程序返回的值作为第二个参数传递给remove处理程序.在这种情况下,它是听众 - 这是移除Google Maps事件监听器时所需要的.