@aibee/owlly 1.0.25

package/src/owlly/overlay/poi-overlay.ts

@@ -0,0 +1,1739 @@
+/* eslint-disable max-len */
+import TWEEN, { Group } 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 { View } from '../view/view';
+import { OwllyEvents, Events } from '../utils/events';
+import { Env, EnvironmentUtils } from '../utils/environment-utils';
+
+/**
+ * POI元素, 包含一个图标与一段文字
+ * @example
+ * ```typescript
+ * const poiOverlay = new PoiOverlay();
+ * const poi = poiOverlay.createPoi(new Vector3(0, 0, 0));
+ * ```
+ */
+interface Rect {
+  xMin: number; xMax: number; yMin: number; yMax: number;
+}
+
+
+enum MouseState {
+  IDLE,
+  DOWN,
+  MOVE,
+}
+
+/**
+ * POI覆盖层, 可以展示POI图标与文字, 存在图标时以图标中心为中心, 否则为文字中心
+ * @example
+ * ```typescript
+ * const poiOverlay = new PoiOverlay();
+ * // 任意View
+ * view.addOverlay(poiOverlay);
+ * ```
+ */
+
+class PoiOverlay extends Overlay {
+  static canvas: HTMLCanvasElement;
+
+  static ctx: CanvasRenderingContext2D;
+
+  private parent: View;
+
+  private rectMap: Map<Rect, Poi>;
+
+  private pois: Set<Poi>; // 按照level递增的顺序排
+
+  private mouseState: MouseState;
+
+  private mousePositionBuffer: NS_THREE.Vector2;
+
+  private eventTarget: Poi;
+
+  private enabled: boolean;
+
+  private renderThisFrame: boolean;
+
+  private visible: boolean; // 兼容
+
+  public camera: NS_THREE.Camera;
+
+  public scene: NS_THREE.Scene;
+
+  public renderCamera: NS_THREE.OrthographicCamera;
+
+  public renderer: NS_THREE.WebGL1Renderer;
+
+  public orderPois: Function;
+
+  // 这里有接收小程序传入的canvas，会调用小程序中的方法
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // public canvas: any = {};
+
+  public prevPosition: NS_THREE.Vector3 | null;
+
+  public prevQuaternion: NS_THREE.Quaternion | null;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  public prevZoom: any;
+
+  private needRender = false;
+
+  private listeners: {
+    pointerDown: (event: MouseEvent) => void;
+    pointerUp: (event: MouseEvent) => void;
+    touchStart: (event: TouchEvent) => void;
+    touchEnd: (event: TouchEvent) => void;
+  };
+
+  constructor(canvas?: HTMLCanvasElement) {
+    super();
+    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') as CanvasRenderingContext2D;
+  }
+
+  // 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: View): void {
+    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 as NS_THREE.Camera;
+    this.renderer = this.parent.renderer as NS_THREE.WebGL1Renderer;
+    // 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): void => { this.onPointerDown(e); },
+      pointerUp: (e): void => { this.onPointerUp(e); },
+      touchStart: (e): void => { this.onTouchStart(e); },
+      touchEnd: (e): void => { 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(): boolean {
+    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(): void {
+    this.renderThisFrame = true;
+  }
+
+  render(): void {
+    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: Poi[] = [];
+      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: number) => {
+        p.updatePosition(
+          viewWidth / 2,
+          viewHeight / 2,
+          index,
+        );
+      });
+      this.renderer.clearDepth();
+      this.renderer.render(this.scene, this.renderCamera);
+    }
+    this.renderThisFrame = false;
+    this.needRender = false;
+  }
+
+  orderPoisByLevel(): void { // 按level递增顺序排序, 以使得collision为false时 level高的渲染的比较高
+    const pois = Array.from(this.pois);
+    pois.sort((p, q) => p.getLevel() - q.getLevel());
+    this.pois = new Set(pois);
+    this.renderThisFrame = true;
+  }
+
+  recalculateVisibilities(pois: Poi[]): void { // 确定是否在视野范围内, 再推到range里, 不
+    // 碰撞测试
+    const range: [number, number, number, number][] = [];
+    let first = true;
+    Array.from(pois)
+      .sort((p, q) => (q.collision ? -1 : (q.getLevel() - p.getLevel())))
+      .forEach((poi): void => {
+        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(): void {
+    // 检查更新
+    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,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } = camera as any;
+    // 检查平移
+    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 as NS_THREE.Quaternion);
+    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 as THREE.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 as THREE.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;
+  }
+
+  public dispose(): void {
+    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 as unknown as HTMLCanvasElement;
+    }
+    if (PoiOverlay.ctx) {
+      PoiOverlay.ctx = null as unknown as CanvasRenderingContext2D;
+    }
+  }
+
+  private onPointerDown(e: MouseEvent): void {
+    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);
+    }
+  }
+
+  private onPointerUp(e: MouseEvent): void {
+    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;
+  }
+
+  private onTouchStart(e: TouchEvent): void {
+    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);
+    }
+  }
+
+  private onTouchEnd(e: TouchEvent): void {
+    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;
+  }
+
+  private onNodePointerDown(target: Poi, x: number, y: number, button = 0): void {
+    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空间中的位置
+   */
+  public createPoi(position: NS_THREE.Vector3): Poi {
+    // 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;
+  }
+
+  public setRectMap(rect: Rect, ele: Poi): void {
+    this.rectMap.set(rect, ele);
+  }
+
+  /**
+   * 删除POI
+   * @param poi 待删除的POI
+   */
+  public removePoi(poi: Poi): void {
+    this.pois.delete(poi);
+    this.scene.remove(poi.group!);
+    poi.dispose();
+    this.renderThisFrame = true;
+  }
+
+  public clearPoi(): void{
+    const pois = Array.from(this.pois);
+    pois.forEach((poi) => {
+      this.scene.remove(poi.group!);
+    });
+    this.pois.clear();
+    this.renderThisFrame = true;
+  }
+
+  /**
+   * 设置覆盖层可见性 兼容旧poi
+   * @param visible 覆盖层是否可见
+   */
+  public setVisibility(visible: boolean): void {
+    this.visible = visible;
+    this.enabled = visible;
+  }
+
+  public setEnabled(value: boolean): void {
+    this.enabled = value;
+  }
+
+  public resize(viewWidth: number, viewHeight: number): void {
+    this.updateCameraAspect(viewWidth, viewHeight);
+    this.renderThisFrame = true;
+  }
+
+  private updateCameraAspect(viewWidth: number, viewHeight: number): void {
+    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') as CanvasRenderingContext2D;
+
+
+class Poi {
+  static ImageMaterialMap = new Map();
+
+  private position: NS_THREE.Vector3;
+
+  private screenPosition: { x: number; y: number };
+
+  private visible: boolean;
+
+  private hide: boolean;
+
+  private parent: PoiOverlay|null;
+
+  private subHide: boolean;
+
+  private textVisibility: boolean; // 做兼容, 未用到
+
+  private iconVisibility: boolean; // 做兼容, 未用到
+
+  private animationEnabled: boolean;
+
+  public isInFrustum: boolean;
+
+  private textPosInfo: {
+    anchor: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright';
+    offsetX: number; // 相对position
+    offsetY: number; // 相对position
+    anchorOffsetX: number; // 相对设置的position, 为 正 表示向右偏移
+    anchorOffsetY: number; // 相对设置的position, 为 正 表示向上偏移
+  }
+
+  private iconPosInfo: {
+    anchor: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright';
+    offsetX: number; // 相对锚点
+    offsetY: number; // 相对锚点
+    anchorOffsetX: number; // 相对设置的position
+    anchorOffsetY: number; // 相对设置的position
+  }
+
+  // 是否开启自动旋转
+  // 开启时跟随画布一起旋转
+  // 默认：false
+  private autoRotation: boolean;
+
+  private rotation: number;
+
+  public collision: boolean;
+
+  private boundingBox: NS_THREE.Group | null;
+
+  private overlapArea: { x: number; y: number }; // 开启碰撞检测时允许设置可重叠区域
+
+  public collisionMode: string; // icon || label || outer
+
+  private withBoundingBox: boolean;
+
+  private subAreaOpacity: number; // 在设置
+
+  private abandonedAreaOpacity: number;
+
+  private visiblePartWhenCollision: string;
+
+  // 用于计算poi碰撞边界
+  private boundingRect: Rect;
+
+  // 用于计算poi全部展示区域边界
+  private outerRect: Rect;
+
+  private iconCircleOptions: {
+    width: number;
+    color: string;
+  }
+
+  private iconInCircle: boolean;
+
+  private iconRect: Rect;
+
+  private textRect: Rect;
+
+  private visibilityAnimation: {
+    anim: TWEEN.Tween | null;
+    from: number | null;
+    to: number | null;
+    current: number | null;
+  };
+
+  private textWidth: number;
+
+  private textHeight: number;
+
+  private iconSize: [number, number];
+
+  private textMaterial: NS_THREE.MeshBasicMaterial | null;
+
+  private iconMaterial: NS_THREE.MeshBasicMaterial | null;
+
+  private iconCircleMaterial: NS_THREE.MeshBasicMaterial | null;
+
+  private rectMaterial: NS_THREE.MeshBasicMaterial | null;
+
+
+  private text: NS_THREE.Mesh | null;
+
+  private icon: NS_THREE.Group | null;
+
+  public group: NS_THREE.Group | null;
+
+  public poiId: number;
+
+  // private renderThisFrame: boolean;
+
+  private iconOptions: { size: [number, number]; src: null | string };
+
+  private labelOptions: { fontSize: number; padding: number; content: null | string };
+
+  // eslint-disable-next-line max-len
+  private rectOptions: { width: number; height: number; fill: number | string; opacity: number; offsetX: number; offsetY: number };
+
+  private withRect: boolean;
+
+  private rect: NS_THREE.Group | null;
+
+  private level: number;
+
+  private dpr: number;
+
+  private isFlipY: boolean;
+
+  private _renderThisFrame = false;
+
+  private labelOpacity: number;
+
+  private iconOpacity: number;
+
+  private set renderThisFrame(value: boolean) {
+    this._renderThisFrame = value;
+  }
+
+  private get renderThisFrame(): boolean {
+    return this._renderThisFrame;
+  }
+
+  constructor(position?: NS_THREE.Vector3) {
+    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;
+  }
+
+  public dispose(): void{
+    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;
+  }
+
+  public setParent(parent: PoiOverlay): void {
+    this.parent = parent;
+  }
+
+  public setPosition(position: NS_THREE.Vector3, tolerance = 0.0001): void {
+    if (position.distanceTo(this.position) < tolerance) return;
+    this.position.copy(position);
+    this.renderThisFrame = true;
+  }
+
+  public setOpacity(labelOpacity = this.labelOpacity, iconOpacity = this.iconOpacity): void {
+    this.labelOpacity = labelOpacity;
+    this.iconOpacity = iconOpacity;
+  }
+
+  /**
+   * 设置旋转角度
+   * @param rotation 旋转角度
+   */
+  public setRotation(rotation: number, tolerance = 0.0001): void {
+    if (Math.abs(rotation - this.rotation) < tolerance) return;
+    this.group!.rotateZ(rotation - this.rotation);
+    this.rotation = rotation;
+    this.renderThisFrame = true;
+  }
+
+  /**
+   * 设置是否碰撞
+   * @param collision 是否碰撞
+   */
+  public setCollision(collision: boolean): void {
+    this.collision = collision;
+    this.renderThisFrame = true;
+  }
+
+  /**
+   * 设置碰撞模式
+   * @param mode 碰撞模式 label || icon || outer(默认)
+   */
+  public setCollisionMode(mode: string): void {
+    this.collisionMode = mode;
+    this.renderThisFrame = true;
+  }
+
+  public setLabelVisibility(visible: boolean): void {
+    this.textVisibility = visible;
+    this.renderThisFrame = true;
+  }
+
+  public setIconVisiblity(visible: boolean): void {
+    this.iconVisibility = visible;
+    this.renderThisFrame = true;
+  }
+
+  public setHideModeWhenCollision(mode: string): void {
+    // 即将废弃
+    if (mode === 'all') {
+      this.setVisiblePartWhenCollision('none');
+    } else if (mode === 'none') {
+      this.setVisiblePartWhenCollision('all');
+    } else {
+      this.setVisiblePartWhenCollision(mode);
+    }
+  }
+
+  // 碰撞下的显隐: 全部显示 / 全部隐藏 / label隐藏 / icon隐藏
+  public setVisiblePartWhenCollision(part: string): void {
+    this.visiblePartWhenCollision = part;
+  }
+
+  public setCollisionOverlap(x: number, y: number): void {
+    this.overlapArea = { x, y };
+    this.renderThisFrame = true;
+  }
+
+  /**
+     * 设置POI层级
+     * @param level 层级
+     */
+  public setLevel(level: number, forceOrder = false): void {
+    this.level = level;
+    this.renderThisFrame = true;
+    this.parent!.orderPois(forceOrder);
+  }
+
+  /**
+     * 获取POI层级
+     */
+  public getLevel(): number {
+    return this.level;
+  }
+
+  /**
+     * 设置POI可见性
+     * @param visible 可见性
+     */
+  public setVisibility(visible: boolean): void {
+    if (this.visible !== visible) this.renderThisFrame = true;
+    this.visible = visible;
+  }
+
+  /**
+     * 设置POI是否暂时隐藏
+     * @param hide true 全部隐藏 false: 根据 hideModeWhenCollision 做显隐判断
+     */
+  public setHidden(hide: boolean, subHide = false): void {
+    // 优先级 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: NS_THREE.MeshBasicMaterial[] = [];
+      const abandonedMaterials: NS_THREE.MeshBasicMaterial[] = [];
+      switch (this.visiblePartWhenCollision) {
+        case 'all':
+          if (this.text) {
+            subMaterials.push(this.textMaterial as NS_THREE.MeshBasicMaterial);
+          }
+          // if (this.rect) {
+          //   subMaterials.push(this.rectMaterial);
+          // }
+          if (this.icon) {
+            subMaterials.push(this.iconMaterial as NS_THREE.MeshBasicMaterial);
+            if (this.iconCircleMaterial && this.iconCircleMaterial.visible) {
+              subMaterials.push(this.iconCircleMaterial as NS_THREE.MeshBasicMaterial);
+            }
+          }
+          break;
+        case 'none':
+          if (this.text) {
+            abandonedMaterials.push(this.textMaterial as NS_THREE.MeshBasicMaterial);
+          }
+          if (this.icon) {
+            abandonedMaterials.push(this.iconMaterial as NS_THREE.MeshBasicMaterial);
+            if (this.iconCircleMaterial && this.iconCircleMaterial.visible) {
+              abandonedMaterials.push(this.iconCircleMaterial as NS_THREE.MeshBasicMaterial);
+            }
+          }
+          break;
+        case 'label':
+          // eslint-disable-next-line max-len
+          subMaterials = [this.textMaterial as NS_THREE.MeshBasicMaterial, this.rectMaterial as NS_THREE.MeshBasicMaterial];
+          if (this.text) {
+            subMaterials.push(this.textMaterial as NS_THREE.MeshBasicMaterial);
+          }
+          if (this.icon) {
+            abandonedMaterials.push(this.iconMaterial as NS_THREE.MeshBasicMaterial);
+            if (this.iconCircleMaterial && this.iconCircleMaterial.visible) {
+              abandonedMaterials.push(this.iconCircleMaterial as NS_THREE.MeshBasicMaterial);
+            }
+          }
+          break;
+        case 'icon':
+          if (this.text) {
+            abandonedMaterials.push(this.textMaterial as NS_THREE.MeshBasicMaterial);
+          }
+          if (this.icon) {
+            subMaterials.push(this.iconMaterial as NS_THREE.MeshBasicMaterial);
+            if (this.iconCircleMaterial && this.iconCircleMaterial.visible) {
+              subMaterials.push(this.iconCircleMaterial as NS_THREE.MeshBasicMaterial);
+            }
+          }
+          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: NS_THREE.MeshBasicMaterial) => {
+          areaM.opacity = cur.subAreaOpacity;
+        });
+        abandonedMaterials.forEach((areaM: NS_THREE.MeshBasicMaterial) => {
+          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 可见性
+     */
+  public setRect(withRect: boolean): void {
+    this.withRect = withRect;
+    this.renderThisFrame = true;
+  }
+
+  /**
+     * 设置Rect默认宽高 未废弃, 不发挥作用
+     * @param withRect 可见性
+     */
+  private setRectDefSize(width: number, height: number): void {
+    this.rectOptions.width = width;
+    this.rectOptions.height = height;
+    this.renderThisFrame = true;
+  }
+
+  /**
+     * 设置Rect背景色 未废弃, 不发挥作用
+     * @param color
+     */
+  public setRectFill(color: number | string): void {
+    this.rectOptions.fill = color;
+    this.renderThisFrame = true;
+  }
+
+  /**
+     * 设置Rect偏移 未废弃, 不发挥作用
+     * @param x
+     * @param y
+     */
+  public setRectOffset(x = 0, y = 0): void {
+    this.rectOptions.offsetX = x;
+    this.rectOptions.offsetY = y;
+    this.renderThisFrame = true;
+  }
+
+  public setIconImage(src: string): void {
+    if (this.iconOptions && this.iconOptions.src === src) return;
+    this.iconOptions.src = src;
+    this.clearIcon();
+    this.renderThisFrame = true;
+  }
+
+  public setIconSize(width: number, height: number): void {
+    this.iconSize = [width, height];
+    this.iconOptions.size = [width, height];
+    this.renderThisFrame = true;
+  }
+
+  /**
+   * 设置POI中icon的显示
+   */
+  public setIconShowInCircle(lineWidth: number, lineColor: string): void {
+    this.iconInCircle = true;
+    this.iconCircleOptions = {
+      width: lineWidth,
+      color: lineColor,
+    };
+  }
+
+  drawIcon(): void {
+    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 as NS_THREE.Material,
+        this.iconMaterial as NS_THREE.Material,
+      ] : [
+        this.iconMaterial as NS_THREE.Material,
+      ];
+      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;
+      }
+    }
+  }
+
+  private clearIcon(): void {
+    if (!this.icon) return;
+    if (this.group) {
+      this.group.remove(this.icon);
+    }
+    this.icon.children.forEach((mesh: NS_THREE.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个单位
+     */
+  public setIconAnchor(
+    anchor: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright',
+  ): void {
+    this.iconPosInfo.anchor = anchor;
+    this.renderThisFrame = true;
+  }
+
+  /**
+   * 设置图标反转
+   */
+  public setIconFlipY(flipY: boolean): void {
+    this.isFlipY = flipY;
+  }
+
+  public setIconOffset(x: number, y: number): void {
+    this.iconPosInfo.anchorOffsetX = x;
+    this.iconPosInfo.anchorOffsetY = y;
+    this.renderThisFrame = true;
+  }
+
+  /**
+     * 设置文字字体大小
+     * @param fontSize 字号, 单位为px
+     */
+  public setFontSize(fontSize: number): void {
+    this.labelOptions.fontSize = fontSize;
+    this.renderThisFrame = true;
+  }
+
+  public setFontPadding(fPadding: number): void {
+    this.labelOptions.padding = fPadding;
+    this.renderThisFrame = true;
+  }
+
+  public setLabelText(text: string): void {
+    this.labelOptions.content = text;
+    this.renderThisFrame = true;
+  }
+
+  public drawText(): void {
+    if (!this.labelOptions.content) return;
+    if (this.group!.getObjectByName('poi_text')) return;
+    const dpr = this.dpr;
+    const { fontSize, padding, content } = this.labelOptions;
+    (PoiOverlay.ctx as CanvasRenderingContext2D).font = `${fontSize * dpr}px sans-serif`;
+    (PoiOverlay.ctx as CanvasRenderingContext2D).fillStyle = 'black';
+    const textSize = (PoiOverlay.ctx as CanvasRenderingContext2D).measureText(content as string);
+    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 as CanvasRenderingContext2D).clearRect(0, 0, textWidth, textHeight);
+    (PoiOverlay.ctx as CanvasRenderingContext2D).fillText(content as string, padding * dpr, (fontSize + padding) * dpr);
+    const textImageData = (PoiOverlay.ctx as CanvasRenderingContext2D).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 as NS_THREE.MeshBasicMaterial,
+    );
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (this.text.material as any).map.flipY = true;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (this.text.material as any).map.flipX = true;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (this.text.material as any).map.needsUpdate = true;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (this.text.material as any).map.magFilter = NS_THREE.LinearFilter;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (this.text.material as any).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);
+  }
+
+  public recalcOffset(width: number,
+    height: number,
+    anchor: string,
+    anchorOffsetX: number,
+    anchorOffsetY: number): { offsetX: number; offsetY: number } {
+    // 在已有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个单位
+     */
+  public setLabelAnchor(
+    anchor: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright',
+  ): void {
+    // center label的锚点在 position
+    // top position在label 上方线条的中心
+    // left position在label 左边线条的中心
+    this.textPosInfo.anchor = anchor;
+    this.renderThisFrame = true;
+  }
+
+  public setLabelOffset(x: number, y: number): void {
+    this.textPosInfo.anchorOffsetX = x;
+    this.textPosInfo.anchorOffsetY = y;
+    this.renderThisFrame = true;
+  }
+
+  public getLabelAnchor(): 'center' | 'left' | 'right' | 'top' | 'bottom' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright' {
+    return this.textPosInfo.anchor;
+  }
+
+  public getLabelOffset(): { x: number; y: number } {
+    const { anchorOffsetX, anchorOffsetY } = this.textPosInfo;
+    return { x: anchorOffsetX, y: anchorOffsetY };
+  }
+
+  calcBoundingSize(): void { // 2D画布上的 size
+    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;
+  }
+
+  private drawRect(): void {
+    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);
+  }
+
+  private drawBoundingBox(): void {
+    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);
+  }
+
+  public setBoundingBox(): void {
+    this.withBoundingBox = true;
+  }
+
+  /** @ignore */
+  public getBoundingRect(): { xMin: number; yMin: number; xMax: number; yMax: number } {
+    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 */
+  public getOuterRect(): { xMin: number; yMin: number; xMax: number; yMax: number } {
+    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,
+    };
+  }
+
+  public setAnimationEnabled(value: boolean): void {
+    this.animationEnabled = value;
+  }
+
+  // 获取旋转角度
+  private calcPoiRotation(cameraDeg: number): number {
+    if (this.autoRotation) {
+      return cameraDeg + this.rotation;
+    }
+    return this.rotation;
+  }
+
+  public getVisibility(): boolean {
+    return this.visible;
+  }
+
+  public calcPosAndSize(frustum: NS_THREE.Frustum, widthHalf: number, heightHalf: number): { isInFrustum: boolean } { // 重新计算位置和包围盒/ 不现实的话不推入rectMap
+    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,
+    };
+  }
+
+
+  public draw(): void {
+    this.drawText();
+    this.drawIcon();
+    this.drawRect();
+    this.drawBoundingBox();
+  }
+
+  public updatePosition( // 根据已计算出的position, offset, visible 等更新渲染位置, 显隐
+    widthHalf: number,
+    heightHalf: number,
+    index: number,
+  ): void {
+    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: Array<NS_THREE.Mesh | NS_THREE.Group> = [];
+      let abandonedAreas: Array<NS_THREE.Mesh | NS_THREE.Group> = [];
+      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: NS_THREE.Mesh | NS_THREE.Group) => {
+          area.visible = true;
+          if (area instanceof NS_THREE.Group) {
+            area.children.forEach((child: NS_THREE.Mesh) => {
+              child.visible = true;
+            });
+          }
+        });
+        abandonedAreas.forEach((area: NS_THREE.Mesh | NS_THREE.Group) => {
+          area.visible = false;
+          if (area instanceof NS_THREE.Group) {
+            area.children.forEach((child: NS_THREE.Mesh) => {
+              child.visible = false;
+            });
+          }
+        });
+      } else if (!this.hide) { // 全部显示
+        subAreas.forEach((area: NS_THREE.Mesh | NS_THREE.Group) => {
+          area.visible = true;
+          if (area instanceof NS_THREE.Group) {
+            area.children.forEach((child: NS_THREE.Mesh) => {
+              child.visible = true;
+            });
+          }
+        });
+        abandonedAreas.forEach((area: NS_THREE.Mesh | NS_THREE.Group) => {
+          area.visible = true;
+          if (area instanceof NS_THREE.Group) {
+            area.children.forEach((child: NS_THREE.Mesh) => {
+              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;
+  }
+
+  public update(): boolean {
+    const needRender = this.renderThisFrame || (this.isInFrustum && !!this.iconOptions.src && !this.icon);
+    this.renderThisFrame = false;
+    return needRender;
+  }
+
+  public setPoiId(poiId: number): void {
+    this.poiId = poiId;
+  }
+}
+Poi.ImageMaterialMap = new Map();
+
+export { PoiOverlay, Poi };