在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();