@orca-fe/x-map
Version:
135 lines (134 loc) • 4.38 kB
JavaScript
import SimpleThree from '../three/SimpleThree';
import AbstractLayer from './AbstractLayer';
export default class ThreeLayer extends AbstractLayer {
constructor(options = {}) {
var _a;
super();
this.markerMap = new WeakMap();
this.raf = 0;
const dom = document.createElement('div');
dom.className = `${(_a = dom.className) !== null && _a !== void 0 ? _a : ''} three-layer`;
dom.style.position = 'absolute';
dom.style.top = '0';
dom.style.left = '0';
dom.style.width = '100%';
dom.style.height = '100%';
this.dom = dom;
const { simpleThreeOptions } = options;
const three = new SimpleThree(dom, Object.assign({ cameraPosition: [0, 0, 0], ambientLightColor: 0xaaaaaa, ambientLightIntensity: 0.5, autoResize: false, rendererOptions: {
alpha: true,
antialias: true,
} }, simpleThreeOptions));
this.three = three;
three.renderer.setClearColor(0xffffff, 0);
three.addDirectionalLight({
direction: [100000, 100000, 100000],
intensity: 0.1,
});
three.addDirectionalLight({
direction: [100000, -50000, 200000],
intensity: 0.1,
});
['mouseenter', 'mouseleave', 'click', 'mousedown', 'mouseup'].forEach((eventName) => {
three.on(eventName, (intersection, event) => {
let obj = intersection.object;
let marker = this.markerMap.get(obj);
while (marker == null && obj.parent) {
obj = obj.parent;
marker = this.markerMap.get(obj);
}
if (marker) {
marker.emit(eventName, event, intersection);
}
});
});
}
updatePosition(raf = true) {
this.markers.forEach((marker) => {
marker.updatePosition();
});
const run = () => {
if (this.map) {
const mt = this.map.getThreeMatrix();
this.three.updateMatrix(mt, false);
this.three.render();
}
};
run();
}
updatePositionDebounce() {
if (this.timer) {
window.clearTimeout(this.timer);
}
this.timer = window.setTimeout(() => {
this.updatePosition(false);
}, 32);
}
startAnimate() {
this.stopAnimate();
this.raf = requestAnimationFrame(() => {
this.updatePosition();
this.startAnimate();
});
}
stopAnimate() {
if (this.raf) {
cancelAnimationFrame(this.raf);
this.raf = 0;
}
}
setMap(map) {
super.setMap(map);
this.three.map = map;
// setLayer again
this.markers.forEach((threeObj) => {
threeObj.setLayer(this);
});
this.updatePosition();
}
destroy() {
super.destroy();
this.three.dispose();
}
addMarker(marker) {
marker.setLayer(this);
this.three.scene.add(marker.object3D);
if (marker.pointerEvents) {
this.three.rayCasterObjects.add(marker.object3D);
}
this.markers.add(marker);
this.markerMap.set(marker.object3D, marker);
}
removeMarker(marker) {
marker.setLayer(undefined);
this.three.scene.remove(marker.object3D);
if (marker.pointerEvents) {
this.three.rayCasterObjects.delete(marker.object3D);
}
this.markers.delete(marker);
this.markerMap.delete(marker.object3D);
}
add(marker) {
if (Array.isArray(marker)) {
marker.forEach(this.addMarker.bind(this));
}
else {
this.addMarker(marker);
}
setTimeout(() => {
this.updatePositionDebounce();
}, 17);
}
remove(marker) {
if (Array.isArray(marker)) {
marker.forEach(this.removeMarker.bind(this));
}
else {
this.removeMarker(marker);
}
this.updatePositionDebounce();
}
getSize() {
return this.three.domSize;
}
}