代码总结

在threebox中为了只暴露出一个tb，使用下面的形式。

import { Threebox, THREE } from '@rdapp/threebox';
window.Threebox = Threebox;
window.THREE = THREE;
const THREE_BOX_LAYER_ID = 'THREE_BOX_LAYER_ID';

class TbService extends EventTarget {
  async init(option) {
    const { map } = option;
    this._map = map;

    let tb = null;
    const self = this;
    await new Promise((res) => {
      this._map.addLayer({
        id: THREE_BOX_LAYER_ID,
        type: 'custom',
        renderingMode: '3d',
        onAdd(mapbox, mbxContext) {
          tb = new Threebox(mapbox, mbxContext, {
            defaultLights: true,
          });
          res();
        },
        render() {
          if (tb) tb.update();
          self.dispatchEvent(new Event('TbLayerRender'));
        },
      });
    });
    this.tb = tb;
  }
}
export default new TbService();

在render时，为了不破坏之前的函数，使用事件监听。

 tbService.addEventListener('TbLayerRender', () => {
      if (this.drawable.title !== '') {
        const coffient = 2 ** (this._map.getZoom() - 16);
        this.popup.options.offset = coffient * 70;
      }
    });

tbService.js:35 Uncaught TypeError: this.dispatchEvent is not a function

途中遇到上述问题，多半是this的问题

[来自stackoverflow](https://stackoverflow.com/questions/45831911/is-there-any-eventemitter-in-browser-side-that-has-similar-logic-in-nodejs)
class MyClass extends EventTarget {
  doSomething() {
    this.dispatchEvent(new Event('something'));
  }
}

const instance = new MyClass();
instance.addEventListener('something', (e) => {
  console.log('Instance fired "something".', e);
});
instance.doSomething();