@aibee/owlly 1.0.25 → 1.0.29

package/lib/owlly/overlay/poi-overlay.js

@@ -0,0 +1,1411 @@
+/* eslint-disable max-len */
+import TWEEN from '@tweenjs/tween.js';
+import { SceneUtils } from 'three/examples/jsm/utils/SceneUtils.js';
+import { Externals, NS_THREE } from '../stage/externals';
+import { BasicTools } from '../utils/basic-tools';
+import { Overlay } from './overlay';
+import { OwllyEvents, Events } from '../utils/events';
+import { Env, EnvironmentUtils } from '../utils/environment-utils';
+var MouseState;
+(function (MouseState) {
+    MouseState[MouseState["IDLE"] = 0] = "IDLE";
+    MouseState[MouseState["DOWN"] = 1] = "DOWN";
+    MouseState[MouseState["MOVE"] = 2] = "MOVE";
+})(MouseState || (MouseState = {}));
+/**
+ * POI覆盖层, 可以展示POI图标与文字, 存在图标时以图标中心为中心, 否则为文字中心
+ * @example
+ * ```typescript
+ * const poiOverlay = new PoiOverlay();
+ * // 任意View
+ * view.addOverlay(poiOverlay);
+ * ```
+ */
+class PoiOverlay extends Overlay {
+    constructor(canvas) {
+        super();
+        this.needRender = false;
+        if (EnvironmentUtils.GetEnv() === Env.Miniapp) {
+            if (!canvas)
+                throw Error('poi-overlay need a offscreenCanvas');
+            PoiOverlay.canvas = canvas;
+        }
+        else if (!PoiOverlay.canvas) {
+            PoiOverlay.canvas = document.createElement('canvas');
+        }
+        // fix: poi名字太长展示不全
+        const dpr = EnvironmentUtils.GetGlobalDPR();
+        PoiOverlay.canvas.width = 500 * dpr;
+        PoiOverlay.canvas.height = 500 * dpr;
+        PoiOverlay.ctx = PoiOverlay.canvas.getContext('2d');
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // get canvas(): any {
+    //   return PoiOverlay.canvas;
+    // }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // get ctx(): any {
+    //   return PoiOverlay.canvas.getContext('2d');
+    // }
+    init(parent) {
+        const { THREE } = Externals.getInstance();
+        this.rectMap = new Map();
+        this.parent = parent;
+        this.scene = new THREE.Scene();
+        const width = parent.getViewWidth();
+        const height = parent.getViewHeight();
+        this.renderCamera = new NS_THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, 0.1, 1000);
+        this.renderCamera.up.set(0, 1, 0);
+        this.renderCamera.position.set(0, 0, 50);
+        this.renderCamera.lookAt(0, 0, 0);
+        this.camera = this.parent.camera;
+        this.renderer = this.parent.renderer;
+        // const canvas = this.canvas;
+        // canvas.width = parent.getViewWidth();
+        // canvas.height = parent.getViewHeight();
+        // this.canvas = canvas; // 离屏canvas
+        this.pois = new Set();
+        this.enabled = true;
+        this.orderPois = BasicTools.debounce(this.orderPoisByLevel.bind(this), 50);
+        this.listeners = {
+            pointerDown: (e) => { this.onPointerDown(e); },
+            pointerUp: (e) => { this.onPointerUp(e); },
+            touchStart: (e) => { this.onTouchStart(e); },
+            touchEnd: (e) => { this.onTouchEnd(e); },
+        };
+        this.mouseState = MouseState.IDLE;
+        this.mousePositionBuffer = new THREE.Vector2();
+        this.parent.on(OwllyEvents.MOUSE_DOWN, this.listeners.pointerDown);
+        this.parent.on(OwllyEvents.MOUSE_UP, this.listeners.pointerUp);
+        this.parent.on(OwllyEvents.TOUCH_START, this.listeners.touchStart);
+        this.parent.on(OwllyEvents.TOUCH_END, this.listeners.touchEnd);
+    }
+    update() {
+        if (this.renderThisFrame || Array.from(this.pois).reduce((r, p) => (p.update() || r), false)) {
+            this.renderThisFrame = false;
+            this.needRender = true;
+            return true;
+        }
+        return false;
+    }
+    forceRenderInThisFrame() {
+        this.renderThisFrame = true;
+    }
+    render() {
+        if (!this.enabled)
+            return;
+        const { THREE } = Externals.getInstance();
+        const frustum = new THREE.Frustum();
+        frustum.setFromProjectionMatrix(new THREE.Matrix4().multiplyMatrices(this.parent.camera.projectionMatrix, this.parent.camera.matrixWorldInverse));
+        const viewWidth = this.parent.getViewWidth();
+        const viewHeight = this.parent.getViewHeight();
+        const euler = new THREE.Euler();
+        euler.setFromQuaternion(this.parent.camera.quaternion, 'ZYX');
+        this.checkUpdate();
+        if (this.needRender || this.renderThisFrame) {
+            this.rectMap.clear();
+            const inFrustumPois = [];
+            this.pois.forEach((p) => {
+                p.draw();
+                const { isInFrustum } = p.calcPosAndSize(frustum, viewWidth / 2, viewHeight / 2);
+                if (isInFrustum) {
+                    inFrustumPois.push(p);
+                }
+            });
+            this.recalculateVisibilities(inFrustumPois); // 计算可见性
+            Array.from(this.pois).forEach((p, index) => {
+                p.updatePosition(viewWidth / 2, viewHeight / 2, index);
+            });
+            this.renderer.clearDepth();
+            this.renderer.render(this.scene, this.renderCamera);
+        }
+        this.renderThisFrame = false;
+        this.needRender = false;
+    }
+    orderPoisByLevel() {
+        const pois = Array.from(this.pois);
+        pois.sort((p, q) => p.getLevel() - q.getLevel());
+        this.pois = new Set(pois);
+        this.renderThisFrame = true;
+    }
+    recalculateVisibilities(pois) {
+        // 碰撞测试
+        const range = [];
+        let first = true;
+        Array.from(pois)
+            .sort((p, q) => (q.collision ? -1 : (q.getLevel() - p.getLevel())))
+            .forEach((poi) => {
+            const { xMin, yMin, xMax, yMax, } = poi.getBoundingRect(); // 最小级别的碰撞检测盒
+            if (!poi.collision) {
+                poi.setHidden(false);
+                range.push([xMin, xMax, yMin, yMax]);
+                first = false;
+                return;
+            }
+            const { xMin: oXMin, yMin: oYMin, xMax: oXMax, yMax: oYMax, } = poi.getOuterRect(); // 最外层碰撞检测盒
+            if (first) {
+                range.push([xMin, xMax, yMin, yMax]);
+                first = false;
+                poi.setHidden(false);
+                return;
+            }
+            const valid = !range.some(([lx, rx, by, ty]) => {
+                const xIntersect = xMax < lx || xMin > rx; // x方向不重叠
+                const yIntersect = yMax < by || yMin > ty; // y 方向不重叠
+                return !xIntersect && !yIntersect;
+            });
+            if (valid) {
+                range.push([xMin, xMax, yMin, yMax]);
+                poi.setHidden(false);
+            }
+            else if (poi.collisionMode === 'outer') {
+                poi.setHidden(true); // 全部隐藏
+            }
+            else if (poi.collisionMode === 'icon' || poi.collisionMode === 'label') {
+                const subvalid = !range.some(([lx, rx, by, ty]) => {
+                    const xIntersect = oXMax < lx || oXMin > rx; // x方向不重叠
+                    const yIntersect = oYMax < by || oYMin > ty; // y 方向不重叠
+                    return !xIntersect && !yIntersect;
+                });
+                if (subvalid) {
+                    range.push([xMin, xMax, yMin, yMax]);
+                    poi.setHidden(true, true); // 部分显示
+                }
+                else {
+                    poi.setHidden(true); // 全部隐藏
+                }
+            }
+        });
+    }
+    checkUpdate() {
+        // 检查更新
+        const { THREE } = Externals.getInstance();
+        if (this.renderThisFrame)
+            return;
+        const poiNeedUpdate = Array.from(this.pois).some((p) => p.update());
+        if (poiNeedUpdate) {
+            this.renderThisFrame = true;
+            return;
+        }
+        const { camera } = this.parent;
+        const { quaternion, position, zoom, up, } = camera;
+        // 检查平移
+        const curPos = position.clone();
+        const curQuaternion = quaternion.clone();
+        const curZoom = zoom;
+        if (!this.prevPosition) {
+            this.prevPosition = curPos.clone();
+            this.prevQuaternion = curQuaternion.clone();
+            this.prevZoom = curZoom;
+            this.renderThisFrame = true;
+            return;
+        }
+        const quat1 = new THREE.Quaternion().setFromUnitVectors(up, new THREE.Vector3(0, 1, 0));
+        const lookAtVector1 = new THREE.Vector3(0, 0, -1).applyQuaternion(this.prevQuaternion);
+        lookAtVector1.applyQuaternion(quat1);
+        const spherical1 = new THREE.Spherical();
+        spherical1.setFromVector3(lookAtVector1);
+        const quat2 = new THREE.Quaternion().setFromUnitVectors(up, new THREE.Vector3(0, 1, 0));
+        const lookAtVector2 = new THREE.Vector3(0, 0, -1).applyQuaternion(curQuaternion);
+        lookAtVector2.applyQuaternion(quat2);
+        const spherical2 = new THREE.Spherical();
+        spherical2.setFromVector3(lookAtVector2);
+        // eslint-disable-next-line max-len
+        if (Math.abs(spherical1.phi * (180 / Math.PI) - spherical2.phi * (180 / Math.PI)) + Math.abs(spherical1.theta * (180 / Math.PI) - spherical2.theta * (180 / Math.PI)) > 0.0001) {
+            this.prevPosition = curPos.clone();
+            this.prevQuaternion = curQuaternion.clone();
+            this.prevZoom = curZoom;
+            this.renderThisFrame = true;
+            return;
+        }
+        const viewWidth = this.parent.getViewWidth();
+        const viewHeight = this.parent.getViewHeight();
+        const curPagePos = curPos.clone().project(camera);
+        const curPagePosX = (curPagePos.x - 1) / 2 * viewWidth;
+        const curPagePosY = (1 - curPagePos.y) / 2 * viewHeight;
+        curPagePos.set(curPagePosX, curPagePosY, 0);
+        const prevPagePos = this.prevPosition.clone().project(camera);
+        const prevPagePosX = (prevPagePos.x - 1) / 2 * viewWidth;
+        const prevPagePosY = (1 - prevPagePos.y) / 2 * viewHeight;
+        prevPagePos.set(prevPagePosX, prevPagePosY, 0);
+        if (curPagePos.distanceTo(prevPagePos) > 0.0001) {
+            // console.log('检测到平移更新', prevPagePos, curPagePos, curPos, curPos.x, curPos.y, this.prevPosition.x, this.prevPosition.y, camera, quaternion);
+            // 平移
+            this.prevPosition = curPos.clone();
+            this.prevQuaternion = curQuaternion.clone();
+            this.prevZoom = curZoom;
+            this.renderThisFrame = true;
+            return;
+        }
+        // 非线性, zoom越小, 更新频率越快
+        // curZoom > this.prevZoom 时 在放大 zoom变大相同大小带来的更新减缓
+        // curZoom < this.prevZoom 时 在减小 zoom变小相同大小带来的更新加快
+        if (this.prevZoom !== curZoom
+            && (Math.abs((curZoom - this.prevZoom) / curZoom) > 0.0001)
+            || (Math.abs((this.prevZoom - curZoom) / this.prevZoom) > 0.0001)) {
+            // console.log('检测到zoom更新');
+            this.prevPosition = curPos.clone();
+            this.prevQuaternion = curQuaternion.clone();
+            this.prevZoom = curZoom;
+            this.renderThisFrame = true;
+            return;
+        }
+        this.renderThisFrame = false;
+    }
+    dispose() {
+        this.parent.off(OwllyEvents.MOUSE_DOWN, this.listeners.pointerDown);
+        this.parent.off(OwllyEvents.MOUSE_UP, this.listeners.pointerUp);
+        this.parent.off(OwllyEvents.TOUCH_START, this.listeners.touchStart);
+        this.parent.off(OwllyEvents.TOUCH_END, this.listeners.touchEnd);
+        this.clearPoi();
+        if (PoiOverlay.canvas) {
+            PoiOverlay.canvas.remove();
+            PoiOverlay.canvas = null;
+        }
+        if (PoiOverlay.ctx) {
+            PoiOverlay.ctx = null;
+        }
+    }
+    onPointerDown(e) {
+        const { clientX, clientY } = e;
+        const [left, top] = this.parent.getViewOffset();
+        const x = clientX - left;
+        const y = clientY - top;
+        let target = null;
+        Array.from(this.rectMap).some(([rect, poi]) => {
+            // v.visible && ( !v.hide || v.subHide)
+            const { xMin, yMin, xMax, yMax, } = rect;
+            const box2 = new NS_THREE.Box2(new NS_THREE.Vector2(xMin, yMin), new NS_THREE.Vector2(xMax, yMax));
+            if (box2.containsPoint(new NS_THREE.Vector2(x, y))) {
+                target = poi;
+                return true;
+            }
+            return false;
+        });
+        if (target) {
+            this.onNodePointerDown(target, x, y, e.button);
+        }
+    }
+    onPointerUp(e) {
+        const { THREE } = Externals.getInstance();
+        const { clientX, clientY } = e;
+        const [left, top] = this.parent.getViewOffset();
+        const x = clientX - left;
+        const y = clientY - top;
+        const distance = new THREE.Vector2(x, y).distanceToSquared(this.mousePositionBuffer);
+        this.emit(Events.POI_UP, this.eventTarget, e.button);
+        if (this.mouseState === MouseState.DOWN && distance < 100) {
+            this.emit(Events.POI_CLICKED, this.eventTarget, e.button);
+        }
+        this.mouseState = MouseState.IDLE;
+    }
+    onTouchStart(e) {
+        const { clientX, clientY } = e.touches[0];
+        const [left, top] = this.parent.getViewOffset();
+        const x = clientX - left;
+        const y = clientY - top;
+        let target = null;
+        Array.from(this.rectMap).some(([rect, poi]) => {
+            // v.visible && ( !v.hide || v.subHide)
+            const { xMin, yMin, xMax, yMax, } = rect;
+            const box2 = new NS_THREE.Box2(new NS_THREE.Vector2(xMin, yMin), new NS_THREE.Vector2(xMax, yMax));
+            if (box2.containsPoint(new NS_THREE.Vector2(x, y))) {
+                target = poi;
+                return true;
+            }
+            return false;
+        });
+        if (target) {
+            this.onNodePointerDown(target, x, y, 0);
+        }
+    }
+    onTouchEnd(e) {
+        const { THREE } = Externals.getInstance();
+        const { clientX, clientY } = e.changedTouches[0];
+        const [left, top] = this.parent.getViewOffset();
+        const x = clientX - left;
+        const y = clientY - top;
+        const distance = new THREE.Vector2(x, y).distanceToSquared(this.mousePositionBuffer);
+        this.emit(Events.POI_UP, this.eventTarget, 0);
+        if (this.mouseState === MouseState.DOWN && distance < 100) {
+            this.emit(Events.POI_CLICKED, this.eventTarget, 0);
+        }
+        this.mouseState = MouseState.IDLE;
+    }
+    onNodePointerDown(target, x, y, button = 0) {
+        if (this.mouseState !== MouseState.IDLE)
+            return;
+        this.mouseState = MouseState.DOWN;
+        this.mousePositionBuffer.set(x, y);
+        this.eventTarget = target;
+        this.emit(Events.POI_DOWN, target, button);
+    }
+    /**
+     * 新建POI
+     * @param position POI在3D空间中的位置
+     */
+    createPoi(position) {
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        const poi = new Poi();
+        poi.setParent(this);
+        this.renderThisFrame = true;
+        poi.setPosition(position);
+        if (!this.pois)
+            throw Error('poiOverlay need bind a view, use view.addOverlay()');
+        this.pois.add(poi);
+        this.scene.add(poi.group);
+        return poi;
+    }
+    setRectMap(rect, ele) {
+        this.rectMap.set(rect, ele);
+    }
+    /**
+     * 删除POI
+     * @param poi 待删除的POI
+     */
+    removePoi(poi) {
+        this.pois.delete(poi);
+        this.scene.remove(poi.group);
+        poi.dispose();
+        this.renderThisFrame = true;
+    }
+    clearPoi() {
+        const pois = Array.from(this.pois);
+        pois.forEach((poi) => {
+            this.scene.remove(poi.group);
+        });
+        this.pois.clear();
+        this.renderThisFrame = true;
+    }
+    /**
+     * 设置覆盖层可见性 兼容旧poi
+     * @param visible 覆盖层是否可见
+     */
+    setVisibility(visible) {
+        this.visible = visible;
+        this.enabled = visible;
+    }
+    setEnabled(value) {
+        this.enabled = value;
+    }
+    resize(viewWidth, viewHeight) {
+        this.updateCameraAspect(viewWidth, viewHeight);
+        this.renderThisFrame = true;
+    }
+    updateCameraAspect(viewWidth, viewHeight) {
+        const width = viewWidth;
+        const height = viewHeight;
+        this.renderCamera.left = -width / 2;
+        this.renderCamera.right = width / 2;
+        this.renderCamera.top = height / 2;
+        this.renderCamera.bottom = -height / 2;
+        this.renderCamera.updateProjectionMatrix();
+    }
+}
+PoiOverlay.canvas = document.createElement('canvas');
+PoiOverlay.ctx = PoiOverlay.canvas.getContext('2d');
+class Poi {
+    constructor(position) {
+        this._renderThisFrame = false;
+        const { THREE } = Externals.getInstance();
+        this.dpr = EnvironmentUtils.GetGlobalDPR();
+        this.isFlipY = false;
+        this.position = position || new THREE.Vector3();
+        this.group = new NS_THREE.Group();
+        this.textVisibility = true;
+        this.iconVisibility = true;
+        this.iconInCircle = false;
+        this.iconCircleOptions = {
+            width: 0,
+            color: '#ffffff',
+        };
+        this.textPosInfo = {
+            anchor: 'center',
+            offsetX: 0,
+            offsetY: 0,
+            anchorOffsetX: 0,
+            anchorOffsetY: 0,
+        };
+        this.iconPosInfo = {
+            anchor: 'center',
+            offsetX: 0,
+            offsetY: 0,
+            anchorOffsetX: 0,
+            anchorOffsetY: 0,
+        };
+        this.level = 1;
+        this.isInFrustum = false;
+        this.animationEnabled = false;
+        this.text = null;
+        this.icon = null;
+        this.rect = null;
+        this.boundingBox = null;
+        this.overlapArea = { x: 0, y: 0 };
+        this.visible = true; // 检查是否用到
+        this.hide = false;
+        this.subHide = false;
+        this.rotation = 0;
+        this.autoRotation = false;
+        this.collision = true;
+        this.collisionMode = 'outer';
+        this.iconRect = {
+            xMin: 0,
+            yMin: 0,
+            xMax: 0,
+            yMax: 0,
+        };
+        this.textRect = {
+            xMin: 0,
+            yMin: 0,
+            xMax: 0,
+            yMax: 0,
+        };
+        this.boundingRect = {
+            xMin: 0,
+            yMin: 0,
+            xMax: 0,
+            yMax: 0,
+        };
+        this.outerRect = {
+            xMin: 0,
+            yMin: 0,
+            xMax: 0,
+            yMax: 0,
+        };
+        this.visibilityAnimation = {
+            anim: null,
+            from: 1,
+            to: 1,
+            current: 1,
+        };
+        this.text = null;
+        this.textWidth = 0;
+        this.textHeight = 0;
+        this.icon = null;
+        this.iconOptions = {
+            size: [20, 20],
+            src: null,
+        };
+        this.labelOptions = {
+            fontSize: 12,
+            padding: 0,
+            content: null,
+        };
+        this.rectOptions = {
+            width: 0,
+            height: 0,
+            fill: 0xff0000,
+            opacity: 0.5,
+            offsetX: 0,
+            offsetY: 0,
+        };
+        this.visiblePartWhenCollision = 'none';
+        this.subAreaOpacity = 1;
+        this.abandonedAreaOpacity = 1;
+        this.screenPosition = { x: 0, y: 0 };
+        this.labelOpacity = 1;
+        this.iconOpacity = 1;
+    }
+    set renderThisFrame(value) {
+        this._renderThisFrame = value;
+    }
+    get renderThisFrame() {
+        return this._renderThisFrame;
+    }
+    dispose() {
+        if (this.group) {
+            BasicTools.dispose(this.group, true);
+        }
+        this.parent = null;
+        this.iconCircleMaterial = null;
+        this.iconMaterial = null;
+        this.textMaterial = null;
+        this.icon = null;
+        this.rect = null;
+        this.boundingBox = null;
+        this.group = null;
+    }
+    setParent(parent) {
+        this.parent = parent;
+    }
+    setPosition(position, tolerance = 0.0001) {
+        if (position.distanceTo(this.position) < tolerance)
+            return;
+        this.position.copy(position);
+        this.renderThisFrame = true;
+    }
+    setOpacity(labelOpacity = this.labelOpacity, iconOpacity = this.iconOpacity) {
+        this.labelOpacity = labelOpacity;
+        this.iconOpacity = iconOpacity;
+    }
+    /**
+     * 设置旋转角度
+     * @param rotation 旋转角度
+     */
+    setRotation(rotation, tolerance = 0.0001) {
+        if (Math.abs(rotation - this.rotation) < tolerance)
+            return;
+        this.group.rotateZ(rotation - this.rotation);
+        this.rotation = rotation;
+        this.renderThisFrame = true;
+    }
+    /**
+     * 设置是否碰撞
+     * @param collision 是否碰撞
+     */
+    setCollision(collision) {
+        this.collision = collision;
+        this.renderThisFrame = true;
+    }
+    /**
+     * 设置碰撞模式
+     * @param mode 碰撞模式 label || icon || outer(默认)
+     */
+    setCollisionMode(mode) {
+        this.collisionMode = mode;
+        this.renderThisFrame = true;
+    }
+    setLabelVisibility(visible) {
+        this.textVisibility = visible;
+        this.renderThisFrame = true;
+    }
+    setIconVisiblity(visible) {
+        this.iconVisibility = visible;
+        this.renderThisFrame = true;
+    }
+    setHideModeWhenCollision(mode) {
+        // 即将废弃
+        if (mode === 'all') {
+            this.setVisiblePartWhenCollision('none');
+        }
+        else if (mode === 'none') {
+            this.setVisiblePartWhenCollision('all');
+        }
+        else {
+            this.setVisiblePartWhenCollision(mode);
+        }
+    }
+    // 碰撞下的显隐: 全部显示 / 全部隐藏 / label隐藏 / icon隐藏
+    setVisiblePartWhenCollision(part) {
+        this.visiblePartWhenCollision = part;
+    }
+    setCollisionOverlap(x, y) {
+        this.overlapArea = { x, y };
+        this.renderThisFrame = true;
+    }
+    /**
+       * 设置POI层级
+       * @param level 层级
+       */
+    setLevel(level, forceOrder = false) {
+        this.level = level;
+        this.renderThisFrame = true;
+        this.parent.orderPois(forceOrder);
+    }
+    /**
+       * 获取POI层级
+       */
+    getLevel() {
+        return this.level;
+    }
+    /**
+       * 设置POI可见性
+       * @param visible 可见性
+       */
+    setVisibility(visible) {
+        if (this.visible !== visible)
+            this.renderThisFrame = true;
+        this.visible = visible;
+    }
+    /**
+       * 设置POI是否暂时隐藏
+       * @param hide true 全部隐藏 false: 根据 hideModeWhenCollision 做显隐判断
+       */
+    setHidden(hide, subHide = false) {
+        // 优先级 hide > subHide
+        // hide 为 false 完全显示
+        // hide === true && subHide === true 部分显示
+        // hide === true && subHide === false 全部隐藏
+        if (!this.animationEnabled) {
+            if (this.hide !== hide || this.subHide !== subHide) {
+                this.hide = hide;
+                this.subHide = subHide;
+                this.renderThisFrame = true;
+            }
+        }
+        else {
+            // 在动画中 判断终点是否相同
+            // eslint-disable-next-line no-nested-ternary
+            const to = !hide ? 1 : (subHide ? 0.5 : 0);
+            if (this.visibilityAnimation.anim && to === this.visibilityAnimation.to)
+                return;
+            // 不在动画中 判断 hide === this.hide && subHide === this.subHide
+            if (!this.visibilityAnimation.anim && (hide === this.hide && subHide === this.subHide))
+                return;
+            if (this.visibilityAnimation.anim) { // 假设之前在执行, ani.stop()
+                this.visibilityAnimation.anim.stop();
+                this.visibilityAnimation.anim = null;
+            }
+            const start = { subAreaOpacity: this.subAreaOpacity, abandonedAreaOpacity: this.abandonedAreaOpacity };
+            const end = { subAreaOpacity: 0, abandonedAreaOpacity: 0 };
+            if (hide) { // hide = true 隐藏 || 部分显示
+                if (subHide) {
+                    // 部分显示
+                    end.subAreaOpacity = 1;
+                    end.abandonedAreaOpacity = 0;
+                }
+                else {
+                    // 全部隐藏
+                    end.subAreaOpacity = 0;
+                    end.abandonedAreaOpacity = 0;
+                }
+            }
+            else { // !hide 完全展示
+                end.subAreaOpacity = 1;
+                end.abandonedAreaOpacity = 1;
+            }
+            let subMaterials = [];
+            const abandonedMaterials = [];
+            switch (this.visiblePartWhenCollision) {
+                case 'all':
+                    if (this.text) {
+                        subMaterials.push(this.textMaterial);
+                    }
+                    // if (this.rect) {
+                    //   subMaterials.push(this.rectMaterial);
+                    // }
+                    if (this.icon) {
+                        subMaterials.push(this.iconMaterial);
+                        if (this.iconCircleMaterial && this.iconCircleMaterial.visible) {
+                            subMaterials.push(this.iconCircleMaterial);
+                        }
+                    }
+                    break;
+                case 'none':
+                    if (this.text) {
+                        abandonedMaterials.push(this.textMaterial);
+                    }
+                    if (this.icon) {
+                        abandonedMaterials.push(this.iconMaterial);
+                        if (this.iconCircleMaterial && this.iconCircleMaterial.visible) {
+                            abandonedMaterials.push(this.iconCircleMaterial);
+                        }
+                    }
+                    break;
+                case 'label':
+                    // eslint-disable-next-line max-len
+                    subMaterials = [this.textMaterial, this.rectMaterial];
+                    if (this.text) {
+                        subMaterials.push(this.textMaterial);
+                    }
+                    if (this.icon) {
+                        abandonedMaterials.push(this.iconMaterial);
+                        if (this.iconCircleMaterial && this.iconCircleMaterial.visible) {
+                            abandonedMaterials.push(this.iconCircleMaterial);
+                        }
+                    }
+                    break;
+                case 'icon':
+                    if (this.text) {
+                        abandonedMaterials.push(this.textMaterial);
+                    }
+                    if (this.icon) {
+                        subMaterials.push(this.iconMaterial);
+                        if (this.iconCircleMaterial && this.iconCircleMaterial.visible) {
+                            subMaterials.push(this.iconCircleMaterial);
+                        }
+                    }
+                    break;
+                default:
+                    break;
+            }
+            this.visibilityAnimation.from = this.visibilityAnimation.current;
+            // eslint-disable-next-line no-nested-ternary
+            this.visibilityAnimation.to = !hide ? 1 : (subHide ? 0.5 : 0);
+            // 动画
+            const duration = 300;
+            this.visibilityAnimation.anim = new TWEEN.Tween(start).to(end, duration).onUpdate((cur) => {
+                this.subAreaOpacity = cur.subAreaOpacity;
+                this.abandonedAreaOpacity = cur.abandonedAreaOpacity;
+                subMaterials.forEach((areaM) => {
+                    areaM.opacity = cur.subAreaOpacity;
+                });
+                abandonedMaterials.forEach((areaM) => {
+                    areaM.opacity = cur.abandonedAreaOpacity;
+                });
+            }).start()
+                .onComplete(() => {
+                this.visibilityAnimation.anim = null;
+                this.visibilityAnimation.from = null;
+                this.visibilityAnimation.current = null;
+                this.visibilityAnimation.to = null;
+                this.hide = hide;
+                this.subHide = subHide;
+            });
+        }
+    }
+    /**
+       * 设置Rect是否可见
+       * @param withRect 可见性
+       */
+    setRect(withRect) {
+        this.withRect = withRect;
+        this.renderThisFrame = true;
+    }
+    /**
+       * 设置Rect默认宽高 未废弃, 不发挥作用
+       * @param withRect 可见性
+       */
+    setRectDefSize(width, height) {
+        this.rectOptions.width = width;
+        this.rectOptions.height = height;
+        this.renderThisFrame = true;
+    }
+    /**
+       * 设置Rect背景色 未废弃, 不发挥作用
+       * @param color
+       */
+    setRectFill(color) {
+        this.rectOptions.fill = color;
+        this.renderThisFrame = true;
+    }
+    /**
+       * 设置Rect偏移 未废弃, 不发挥作用
+       * @param x
+       * @param y
+       */
+    setRectOffset(x = 0, y = 0) {
+        this.rectOptions.offsetX = x;
+        this.rectOptions.offsetY = y;
+        this.renderThisFrame = true;
+    }
+    setIconImage(src) {
+        if (this.iconOptions && this.iconOptions.src === src)
+            return;
+        this.iconOptions.src = src;
+        this.clearIcon();
+        this.renderThisFrame = true;
+    }
+    setIconSize(width, height) {
+        this.iconSize = [width, height];
+        this.iconOptions.size = [width, height];
+        this.renderThisFrame = true;
+    }
+    /**
+     * 设置POI中icon的显示
+     */
+    setIconShowInCircle(lineWidth, lineColor) {
+        this.iconInCircle = true;
+        this.iconCircleOptions = {
+            width: lineWidth,
+            color: lineColor,
+        };
+    }
+    drawIcon() {
+        const { src, size } = this.iconOptions;
+        if (!src)
+            return;
+        if (this.icon
+            && this.group.getObjectByName('poi_icon')
+            && !!this.iconInCircle === !!this.iconCircleMaterial)
+            return;
+        if (!Poi.ImageMaterialMap.has(src)) {
+            Poi.ImageMaterialMap.set(src, 'dealing');
+            const loader = new NS_THREE.TextureLoader();
+            loader.load(src, (texture) => {
+                texture.needsUpdate = true;
+                texture.magFilter = NS_THREE.LinearFilter;
+                // fix: ios 16.4 纹理变黑块
+                texture.minFilter = NS_THREE.NearestFilter;
+                texture.flipY = this.isFlipY;
+                const material = new NS_THREE.MeshBasicMaterial({
+                    map: texture,
+                    transparent: true,
+                    opacity: this.iconOpacity,
+                });
+                material.needsUpdate = true;
+                material.visible = true;
+                Poi.ImageMaterialMap.set(src, material);
+            });
+        }
+        else if (Poi.ImageMaterialMap.get(src) === 'dealing') {
+            this.renderThisFrame = true;
+        }
+        else {
+            if (this.icon)
+                this.group.remove(this.icon);
+            this.iconMaterial = Poi.ImageMaterialMap.get(src).clone();
+            this.iconMaterial.opacity = this.iconOpacity;
+            const { width: cWidth, color: cColor } = this.iconCircleOptions;
+            const ifDrawCircle = cWidth && this.iconInCircle;
+            if (ifDrawCircle) {
+                this.iconCircleMaterial = new NS_THREE.MeshBasicMaterial({
+                    color: cColor,
+                    transparent: true,
+                    opacity: this.iconOpacity,
+                });
+            }
+            const mats = ifDrawCircle ? [
+                this.iconCircleMaterial,
+                this.iconMaterial,
+            ] : [
+                this.iconMaterial,
+            ];
+            const iconGeo = ifDrawCircle ? new NS_THREE.CircleGeometry(size[0] / 2, 30) : new NS_THREE.PlaneGeometry(size[0], size[1]);
+            const icon = SceneUtils.createMultiMaterialObject(iconGeo, mats);
+            this.icon = icon;
+            if (this.icon) {
+                // console.log('cWidth', size[0], cWidth);
+                if (this.icon.children.length > 1) {
+                    this.icon.children[1].scale.set(size[0] / (cWidth + size[0]), size[0] / (cWidth + size[0]), 1);
+                }
+                this.icon.renderOrder = 3;
+                this.icon.name = 'poi_icon';
+                this.group.add(this.icon);
+                this.renderThisFrame = true;
+            }
+        }
+    }
+    clearIcon() {
+        if (!this.icon)
+            return;
+        if (this.group) {
+            this.group.remove(this.icon);
+        }
+        this.icon.children.forEach((mesh) => {
+            if (mesh.geometry) {
+                mesh.geometry.dispose();
+            }
+        });
+        if (this.iconMaterial) {
+            this.iconMaterial.dispose();
+            this.iconMaterial = null;
+        }
+        if (this.iconCircleMaterial) {
+            this.iconCircleMaterial.dispose();
+            this.iconCircleMaterial = null;
+        }
+        this.icon = null;
+    }
+    /**
+       * 设置图标相对(0,0)的位置
+       * @param  direction: x / y  value: + / - 表示方向
+       * x = 2 的时候, 表示label 中心 和 icon 中心 同一条y轴, label 右边框 距离 icon 左边框2个单位
+       */
+    setIconAnchor(anchor) {
+        this.iconPosInfo.anchor = anchor;
+        this.renderThisFrame = true;
+    }
+    /**
+     * 设置图标反转
+     */
+    setIconFlipY(flipY) {
+        this.isFlipY = flipY;
+    }
+    setIconOffset(x, y) {
+        this.iconPosInfo.anchorOffsetX = x;
+        this.iconPosInfo.anchorOffsetY = y;
+        this.renderThisFrame = true;
+    }
+    /**
+       * 设置文字字体大小
+       * @param fontSize 字号, 单位为px
+       */
+    setFontSize(fontSize) {
+        this.labelOptions.fontSize = fontSize;
+        this.renderThisFrame = true;
+    }
+    setFontPadding(fPadding) {
+        this.labelOptions.padding = fPadding;
+        this.renderThisFrame = true;
+    }
+    setLabelText(text) {
+        this.labelOptions.content = text;
+        this.renderThisFrame = true;
+    }
+    drawText() {
+        if (!this.labelOptions.content)
+            return;
+        if (this.group.getObjectByName('poi_text'))
+            return;
+        const dpr = this.dpr;
+        const { fontSize, padding, content } = this.labelOptions;
+        PoiOverlay.ctx.font = `${fontSize * dpr}px sans-serif`;
+        PoiOverlay.ctx.fillStyle = 'black';
+        const textSize = PoiOverlay.ctx.measureText(content);
+        const textWidth = Math.ceil(textSize.width) + 10 + (padding * 2);
+        const textHeight = (fontSize + 5 + (padding * 2)) * dpr;
+        this.textWidth = textWidth / dpr;
+        this.textHeight = textHeight / dpr;
+        this.setRectDefSize(this.textWidth, this.textHeight); // 根据text占据位置自动设置rect大小
+        PoiOverlay.ctx.clearRect(0, 0, textWidth, textHeight);
+        PoiOverlay.ctx.fillText(content, padding * dpr, (fontSize + padding) * dpr);
+        const textImageData = PoiOverlay.ctx.getImageData(0, 0, textWidth, textHeight);
+        this.textMaterial = new NS_THREE.MeshBasicMaterial({
+            transparent: true,
+            map: new NS_THREE.DataTexture(Uint8Array.from(textImageData.data), textWidth, textHeight, NS_THREE.RGBAFormat),
+            side: NS_THREE.DoubleSide,
+            opacity: this.labelOpacity,
+        });
+        this.text = new NS_THREE.Mesh(new NS_THREE.PlaneGeometry(this.textWidth, this.textHeight), this.textMaterial);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.text.material.map.flipY = true;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.text.material.map.flipX = true;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.text.material.map.needsUpdate = true;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.text.material.map.magFilter = NS_THREE.LinearFilter;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.text.material.visible = true;
+        this.text.name = 'poi_text';
+        this.text.renderOrder = 4;
+        const { offsetX, offsetY, } = this.recalcOffset(this.textWidth, this.textHeight, this.textPosInfo.anchor, this.textPosInfo.anchorOffsetX, this.textPosInfo.anchorOffsetY);
+        this.textPosInfo.offsetX = offsetX;
+        this.textPosInfo.offsetY = offsetY;
+        this.group.add(this.text);
+    }
+    recalcOffset(width, height, anchor, anchorOffsetX, anchorOffsetY) {
+        // 在已有text宽高情况下计算 textOffsetX  和 textOffsetY
+        let offsetX = 0;
+        let offsetY = 0;
+        switch (anchor) {
+            case 'center':
+                // 默认
+                offsetX = anchorOffsetX;
+                offsetY = anchorOffsetY;
+                break;
+            case 'left':
+                offsetX = width / 2 + anchorOffsetX;
+                offsetY = anchorOffsetY;
+                break;
+            case 'right':
+                offsetX = -width / 2 + anchorOffsetX;
+                offsetY = anchorOffsetY;
+                break;
+            case 'top':
+                offsetX = anchorOffsetX;
+                offsetY = -height / 2 + anchorOffsetY;
+                break;
+            case 'bottom':
+                offsetX = anchorOffsetX;
+                offsetY = height / 2 + anchorOffsetY;
+                break;
+            case 'topleft':
+                offsetX = width / 2 + anchorOffsetX;
+                offsetY = -height / 2 + anchorOffsetY;
+                break;
+            case 'topright':
+                offsetX = -width / 2 + anchorOffsetX;
+                offsetY = -height / 2 + anchorOffsetY;
+                break;
+            case 'bottomleft':
+                offsetX = width / 2 + anchorOffsetX;
+                offsetY = height / 2 + anchorOffsetY;
+                break;
+            case 'bottomright':
+                offsetX = -width / 2 + anchorOffsetX;
+                offsetY = height / 2 + anchorOffsetY;
+                break;
+            default:
+                break;
+        }
+        return { offsetX, offsetY };
+    }
+    /**
+       * 设置POI文字相对(0,0)的位置。在有icon 和 无icon时锚点不同
+       * @param  direction: x / y  value: + / - 表示方向
+       * x = 2 的时候, 表示label 中心 和 icon 中心 同一条y轴, label 右边框 距离 icon 左边框2个单位
+       */
+    setLabelAnchor(anchor) {
+        // center label的锚点在 position
+        // top position在label 上方线条的中心
+        // left position在label 左边线条的中心
+        this.textPosInfo.anchor = anchor;
+        this.renderThisFrame = true;
+    }
+    setLabelOffset(x, y) {
+        this.textPosInfo.anchorOffsetX = x;
+        this.textPosInfo.anchorOffsetY = y;
+        this.renderThisFrame = true;
+    }
+    getLabelAnchor() {
+        return this.textPosInfo.anchor;
+    }
+    getLabelOffset() {
+        const { anchorOffsetX, anchorOffsetY } = this.textPosInfo;
+        return { x: anchorOffsetX, y: anchorOffsetY };
+    }
+    calcBoundingSize() {
+        const pos = this.screenPosition;
+        const textOffsetX = this.textPosInfo.offsetX;
+        const textOffsetY = this.textPosInfo.offsetY;
+        const iconOffsetX = this.iconPosInfo.offsetX;
+        const iconOffsetY = this.iconPosInfo.offsetY;
+        const label = {
+            xMin: this.text ? pos.x - this.textWidth / 2 + textOffsetX : pos.x,
+            xMax: this.text ? pos.x + this.textWidth / 2 + textOffsetX : pos.x,
+            yMin: this.text ? pos.y - this.textHeight / 2 - textOffsetY : pos.y,
+            yMax: this.text ? pos.y + this.textHeight / 2 - textOffsetY : pos.y,
+        };
+        const icon = {
+            xMin: this.icon ? pos.x - this.iconOptions.size[0] / 2 + iconOffsetX : pos.x,
+            xMax: this.icon ? pos.x + this.iconOptions.size[0] / 2 + iconOffsetX : pos.x,
+            yMin: this.icon ? pos.y - this.iconOptions.size[1] / 2 - iconOffsetY : pos.y,
+            yMax: this.icon ? pos.y + this.iconOptions.size[1] / 2 - iconOffsetY : pos.y,
+        };
+        let xMax = Math.max(icon.xMax, label.xMax);
+        let xMin = Math.min(icon.xMin, label.xMin);
+        let yMax = Math.max(icon.yMax, label.yMax);
+        let yMin = Math.min(icon.yMin, label.yMin);
+        this.iconRect = {
+            xMin: this.icon ? pos.x - this.iconOptions.size[0] / 2 + iconOffsetX : pos.x,
+            xMax: this.icon ? pos.x + this.iconOptions.size[0] / 2 + iconOffsetX : pos.x,
+            yMin: this.icon ? pos.y - this.iconOptions.size[1] / 2 - iconOffsetY : pos.y,
+            yMax: this.icon ? pos.y + this.iconOptions.size[1] / 2 - iconOffsetY : pos.y,
+        };
+        this.textRect = {
+            xMin: this.text ? pos.x - this.textWidth / 2 + textOffsetX : pos.x,
+            xMax: this.text ? pos.x + this.textWidth / 2 + textOffsetX : pos.x,
+            yMin: this.text ? pos.y - this.textHeight / 2 - textOffsetY : pos.y,
+            yMax: this.text ? pos.y + this.textHeight / 2 - textOffsetY : pos.y,
+        };
+        this.outerRect = {
+            xMax, xMin, yMax, yMin,
+        };
+        if (this.collisionMode === 'icon') {
+            xMax = icon.xMax;
+            xMin = icon.xMin;
+            yMax = icon.yMax;
+            yMin = icon.yMin;
+        }
+        else if (this.collisionMode === 'label') {
+            xMax = label.xMax;
+            xMin = label.xMin;
+            yMax = label.yMax;
+            yMin = label.yMin;
+        }
+        // 得到 x 的 最大(> 0)和最小(< 0), y 的 最大(>0)和最小(<0)
+        this.boundingRect.xMax = xMax;
+        this.boundingRect.yMax = yMax;
+        this.boundingRect.xMin = xMin;
+        this.boundingRect.yMin = yMin;
+    }
+    drawRect() {
+        if (!this.withRect || !this.labelOptions.content)
+            return;
+        if (this.rect && this.group.getObjectByName('poi_rect'))
+            return;
+        this.rect = new NS_THREE.Group();
+        const rWidth = this.rectOptions.width || this.textWidth;
+        const rHeight = this.rectOptions.height || this.textHeight;
+        const cornerR = 10;
+        const x = 0;
+        const y = 0;
+        const rightT1 = [x + rWidth / 2 - cornerR, y + rHeight / 2];
+        const rightT2 = [x + rWidth / 2, y + rHeight / 2 - cornerR];
+        const rightB1 = [x + rWidth / 2, y - rHeight / 2 + cornerR];
+        const rightB2 = [x + rWidth / 2 - cornerR, y - rHeight / 2];
+        const leftB1 = [x - rWidth / 2 + cornerR, y - rHeight / 2];
+        const leftB2 = [x - rWidth / 2, y - rHeight / 2 + cornerR];
+        const leftT1 = [x - rWidth / 2, y + rHeight / 2 - cornerR];
+        const leftT2 = [x - rWidth / 2 + cornerR, y + rHeight / 2];
+        const rectShape = new NS_THREE.Shape();
+        rectShape.moveTo(rightT1[0], rightT1[1]);
+        rectShape.bezierCurveTo(rightT1[0], rightT1[1], x + rWidth / 2, y + rHeight / 2, rightT2[0], rightT2[1]);
+        rectShape.moveTo(rightB1[0], rightB1[1]);
+        rectShape.bezierCurveTo(rightB1[0], rightB1[1], x + rWidth / 2, y - rHeight / 2, rightB2[0], rightB2[1]);
+        rectShape.moveTo(leftB1[0], leftB1[1]);
+        rectShape.bezierCurveTo(leftB1[0], leftB1[1], x - rWidth / 2, y - rHeight / 2, leftB2[0], leftB2[1]);
+        rectShape.moveTo(leftT1[0], leftT1[1]);
+        rectShape.bezierCurveTo(leftT1[0], leftT1[1], x - rWidth / 2, y + rHeight / 2, leftT2[0], leftT2[1]);
+        rectShape.moveTo(rightT1[0], rightT1[1]);
+        const geometry = new NS_THREE.ShapeGeometry(rectShape);
+        const material = new NS_THREE.MeshBasicMaterial({
+            color: 0x0000ff,
+            transparent: true,
+            opacity: 0.5,
+        });
+        this.rectMaterial = material;
+        const mesh = new NS_THREE.Mesh(geometry, material);
+        rectShape.autoClose = true;
+        const points = rectShape.getPoints();
+        const geometryPoints = new NS_THREE.BufferGeometry().setFromPoints(points);
+        const line = new NS_THREE.Line(geometryPoints, new NS_THREE.LineBasicMaterial({ color: 0xff0000 }));
+        line.position.set(0, 0, 0);
+        this.rect.add(mesh);
+        this.rect.add(line);
+        this.rect.renderOrder = 2;
+        this.rect.name = 'poi_rect';
+        this.group.add(this.rect);
+    }
+    drawBoundingBox() {
+        if (!this.withBoundingBox)
+            return;
+        if (this.group.getObjectByName('poi_bounding_rect'))
+            return;
+        if (this.outerRect.xMin === 0 && this.outerRect.xMax === 0)
+            return;
+        const { xMax, yMax, xMin, yMin, } = this.outerRect;
+        this.boundingBox = new NS_THREE.Group();
+        const cornerR = 10;
+        const x = 0;
+        const y = 0;
+        const width = xMax - xMin;
+        const height = yMax - yMin;
+        const rightT1 = [x + width / 2 - cornerR, y + height / 2];
+        const rightT2 = [x + width / 2, y + height / 2 - cornerR];
+        const rightB1 = [x + width / 2, y - height / 2 + cornerR];
+        const rightB2 = [x + width / 2 - cornerR, y - height / 2];
+        const leftB1 = [x - width / 2 + cornerR, y - height / 2];
+        const leftB2 = [x - width / 2, y - height / 2 + cornerR];
+        const leftT1 = [x - width / 2, y + height / 2 - cornerR];
+        const leftT2 = [x - width / 2 + cornerR, y + height / 2];
+        const rectShape = new NS_THREE.Shape();
+        rectShape.moveTo(rightT1[0], rightT1[1]);
+        rectShape.bezierCurveTo(rightT1[0], rightT1[1], x + width / 2, y + height / 2, rightT2[0], rightT2[1]);
+        rectShape.moveTo(rightB1[0], rightB1[1]);
+        rectShape.bezierCurveTo(rightB1[0], rightB1[1], x + width / 2, y - height / 2, rightB2[0], rightB2[1]);
+        rectShape.moveTo(leftB1[0], leftB1[1]);
+        rectShape.bezierCurveTo(leftB1[0], leftB1[1], x - width / 2, y - height / 2, leftB2[0], leftB2[1]);
+        rectShape.moveTo(leftT1[0], leftT1[1]);
+        rectShape.bezierCurveTo(leftT1[0], leftT1[1], x - width / 2, y + height / 2, leftT2[0], leftT2[1]);
+        rectShape.moveTo(rightT1[0], rightT1[1]);
+        const geometry = new NS_THREE.ShapeGeometry(rectShape);
+        const material = new NS_THREE.MeshBasicMaterial({
+            color: 0xff0000,
+            transparent: true,
+            opacity: 0.5,
+        });
+        const mesh = new NS_THREE.Mesh(geometry, material);
+        rectShape.autoClose = true;
+        const points = rectShape.getPoints();
+        const geometryPoints = new NS_THREE.BufferGeometry().setFromPoints(points);
+        const line = new NS_THREE.Line(geometryPoints, new NS_THREE.LineBasicMaterial({ color: 0xff0000, linewidth: 2 }));
+        line.position.set(0, 0, 0);
+        this.boundingBox.name = 'poi_bounding_rect';
+        this.boundingBox.add(mesh);
+        this.boundingBox.add(line);
+        this.boundingBox.renderOrder = 0;
+        this.group.add(this.boundingBox);
+    }
+    setBoundingBox() {
+        this.withBoundingBox = true;
+    }
+    /** @ignore */
+    getBoundingRect() {
+        const { x: ox, y: oy } = this.overlapArea;
+        const { xMin: xmin, yMin: ymin, xMax: xmax, yMax: ymax, } = this.boundingRect;
+        return {
+            xMin: xmin + ox,
+            yMin: ymin + oy,
+            xMax: xmax - ox,
+            yMax: ymax - oy,
+        };
+    }
+    /** @ignore */
+    getOuterRect() {
+        const { x: ox, y: oy } = this.overlapArea;
+        const { xMin: xmin, yMin: ymin, xMax: xmax, yMax: ymax, } = this.outerRect;
+        return {
+            xMin: xmin + ox,
+            yMin: ymin + oy,
+            xMax: xmax - ox,
+            yMax: ymax - oy,
+        };
+    }
+    setAnimationEnabled(value) {
+        this.animationEnabled = value;
+    }
+    // 获取旋转角度
+    calcPoiRotation(cameraDeg) {
+        if (this.autoRotation) {
+            return cameraDeg + this.rotation;
+        }
+        return this.rotation;
+    }
+    getVisibility() {
+        return this.visible;
+    }
+    calcPosAndSize(frustum, widthHalf, heightHalf) {
+        if (!this.parent) {
+            return { isInFrustum: this.isInFrustum };
+        }
+        let isInFrustum = this.visible && frustum.containsPoint(this.position);
+        if (isInFrustum) {
+            const p = this.position.clone().project(this.parent.camera);
+            this.screenPosition = { x: (p.x + 1) * widthHalf, y: (1 - p.y) * heightHalf };
+            this.calcBoundingSize();
+            // 计算与view是否相交
+            if (this.outerRect.xMin < 0 || this.outerRect.xMax > widthHalf * 2 || this.outerRect.yMin < 0 || this.outerRect.yMax > heightHalf * 2) {
+                isInFrustum = false;
+            }
+        }
+        this.isInFrustum = isInFrustum;
+        return {
+            isInFrustum: this.isInFrustum,
+        };
+    }
+    draw() {
+        this.drawText();
+        this.drawIcon();
+        this.drawRect();
+        this.drawBoundingBox();
+    }
+    updatePosition(// 根据已计算出的position, offset, visible 等更新渲染位置, 显隐
+    widthHalf, heightHalf, index) {
+        if (!this.group)
+            return;
+        if (!this.isInFrustum) {
+            this.hide = true;
+            this.subHide = false;
+            this.group.visible = false;
+            return;
+        }
+        this.group.visible = this.visible;
+        if (!this.visible) {
+            return;
+        }
+        const textOffsetX = this.textPosInfo.offsetX;
+        const textOffsetY = this.textPosInfo.offsetY;
+        const iconOffsetX = this.iconPosInfo.offsetX;
+        const iconOffsetY = this.iconPosInfo.offsetY;
+        const zIndex = index * 0.0001; // index是根据level递增排序的
+        this.group.position.set(this.screenPosition.x - widthHalf, heightHalf - this.screenPosition.y, zIndex);
+        if (this.text) {
+            this.text.position.set(textOffsetX, textOffsetY, 0);
+        }
+        if (this.rect) {
+            this.rect.position.set(textOffsetX, textOffsetY, 0);
+        }
+        if (this.icon) {
+            this.icon.position.set(iconOffsetX, iconOffsetY, 0);
+        }
+        if (this.boundingBox) {
+            const pos2dx = (this.outerRect.xMax + this.outerRect.xMin) / 2;
+            const pos2dy = (this.outerRect.yMax + this.outerRect.yMin) / 2;
+            this.boundingBox.position.set(pos2dx - this.screenPosition.x, this.screenPosition.y - pos2dy, 0);
+        }
+        const animating = this.visibilityAnimation.anim; // onComplete 时候会销毁
+        const groupVisible = !!animating || (!animating && (!this.hide || this.subHide));
+        this.group.visible = groupVisible;
+        // console.log('groupVisible', groupVisible, !this.hide, this.subHide, (!this.hide || this.subHide));
+        // subArea 和 abandonedArea 的展示
+        // 1- 根据碰撞检测结果和碰撞类型判断group icon text 的显示
+        // 2- 上一步通过, 则判断 当前是否设置了 iconVisibility 和 textVisibility
+        if (groupVisible && (!animating || !this.animationEnabled)) { // 显示 && 动画执行完 || 无设置动画效果
+            let subAreas = [];
+            let abandonedAreas = [];
+            switch (this.visiblePartWhenCollision) {
+                case 'all':
+                    subAreas = [this.group];
+                    abandonedAreas = [];
+                    break;
+                case 'none':
+                    subAreas = [];
+                    abandonedAreas = [this.group];
+                    break;
+                case 'label':
+                    subAreas = [];
+                    if (this.text) {
+                        subAreas.push(this.text);
+                    }
+                    if (this.rect) {
+                        subAreas.push(this.rect);
+                    }
+                    if (this.icon) {
+                        abandonedAreas.push(this.icon);
+                    }
+                    break;
+                case 'icon':
+                    if (this.icon) {
+                        subAreas.push(this.icon);
+                    }
+                    if (this.text) {
+                        abandonedAreas.push(this.text);
+                    }
+                    if (this.rect) {
+                        abandonedAreas.push(this.rect);
+                    }
+                    break;
+                default:
+                    subAreas = [];
+                    abandonedAreas = [this.group];
+                    break;
+            }
+            if (this.subHide) { // 部分显示
+                subAreas.forEach((area) => {
+                    area.visible = true;
+                    if (area instanceof NS_THREE.Group) {
+                        area.children.forEach((child) => {
+                            child.visible = true;
+                        });
+                    }
+                });
+                abandonedAreas.forEach((area) => {
+                    area.visible = false;
+                    if (area instanceof NS_THREE.Group) {
+                        area.children.forEach((child) => {
+                            child.visible = false;
+                        });
+                    }
+                });
+            }
+            else if (!this.hide) { // 全部显示
+                subAreas.forEach((area) => {
+                    area.visible = true;
+                    if (area instanceof NS_THREE.Group) {
+                        area.children.forEach((child) => {
+                            child.visible = true;
+                        });
+                    }
+                });
+                abandonedAreas.forEach((area) => {
+                    area.visible = true;
+                    if (area instanceof NS_THREE.Group) {
+                        area.children.forEach((child) => {
+                            child.visible = true;
+                        });
+                    }
+                });
+            }
+            if (this.icon && !this.iconVisibility) { // 独立设置了icon不允许显示
+                this.icon.visible = false;
+            }
+            if (this.text && !this.textVisibility) { // 独立设置了text不允许显示
+                this.text.visible = false;
+            }
+        }
+        if (!groupVisible) {
+            // do nothing
+        }
+        else if (this.subHide) {
+            if (this.parent) {
+                // 部分显示
+                if (this.visiblePartWhenCollision === 'icon') {
+                    this.parent.setRectMap(this.iconRect, this);
+                }
+                else {
+                    this.parent.setRectMap(this.textRect, this);
+                }
+            }
+        }
+        else if (this.parent) {
+            // fix: poi-click 不触发
+            this.parent.setRectMap(this.textRect, this);
+            this.parent.setRectMap(this.iconRect, this);
+        }
+        // this.renderThisFrame = true;
+    }
+    update() {
+        const needRender = this.renderThisFrame || (this.isInFrustum && !!this.iconOptions.src && !this.icon);
+        this.renderThisFrame = false;
+        return needRender;
+    }
+    setPoiId(poiId) {
+        this.poiId = poiId;
+    }
+}
+Poi.ImageMaterialMap = new Map();
+Poi.ImageMaterialMap = new Map();
+export { PoiOverlay, Poi };