diff --git a/src/vue-amap-extra/packages/ThreeGltf/ThreeGltf.vue b/src/vue-amap-extra/packages/ThreeGltf/ThreeGltf.vue
index b416bbd190389550673ca41dccf138744d36ae67..16c76af7b9a3338b60fd7e39b30413a8567c3bff 100644
--- a/src/vue-amap-extra/packages/ThreeGltf/ThreeGltf.vue
+++ b/src/vue-amap-extra/packages/ThreeGltf/ThreeGltf.vue
@@ -1,84 +1,130 @@
 <template>
-  <div />
+  <div style="display: none">
+    <div ref="popupRef">
+      <slot />
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
-import {defineOptions, getCurrentInstance} from 'vue';
-import {useRegister, buildProps} from "@vuemap/vue-amap";
+import { defineOptions, getCurrentInstance, ref, watch } from "vue";
+import { useRegister, buildProps } from "@vuemap/vue-amap";
 import CustomThreeGltf from "./CustomThreeGltf";
-import type {MoveAnimation, Vec, ConfigLoader} from "./Type";
-import type{PropType, ComponentInternalInstance} from "vue";
+import type { MoveAnimation, Vec, ConfigLoader } from "./Type";
+import type { PropType, ComponentInternalInstance } from "vue";
+import { CSS2DObject } from "../ThreeLayer/CSS2DRenderer";
+const popupRef = ref<HTMLDivElement>();
 
 defineOptions({
-  name: 'ElAmapThreeGltf',
-  inheritAttrs: false
+  name: "ElAmapThreeGltf",
+  inheritAttrs: false,
 });
 
-defineProps(buildProps({
-  url: {
-    type: String
-  },
-  position: {
-    type: Array as PropType<number[]>
-  },
-  height: {
-    type: Number,
-    default: 0
-  },
-  rotation: {
-    type: Object as PropType<Vec>
-  },
-  scale: {
-    type: [Number, Array],
-    default: 1
-  },
-  angle: {
-    type: Number,
-    default: 0
-  },
-  moveAnimation: {
-    type: Object as PropType<MoveAnimation>
-  }, //位置移动是否开启动画
-  configLoader: {
-    type: Function as PropType<ConfigLoader>
-  },
-  useModelCache: {
-    type: Boolean,
-    default: false
-  }
-}));
-const emits = defineEmits(['init','click', 'mousemove', 'mouseover', 'mouseout']);
+const props = defineProps(
+  buildProps({
+    url: {
+      type: String,
+    },
+    position: {
+      type: Array as PropType<number[]>,
+    },
+    height: {
+      type: Number,
+      default: 0,
+    },
+    rotation: {
+      type: Object as PropType<Vec>,
+    },
+    scale: {
+      type: [Number, Array],
+      default: 1,
+    },
+    angle: {
+      type: Number,
+      default: 0,
+    },
+    moveAnimation: {
+      type: Object as PropType<MoveAnimation>,
+    }, //位置移动是否开启动画
+    configLoader: {
+      type: Function as PropType<ConfigLoader>,
+    },
+    useModelCache: {
+      type: Boolean,
+      default: false,
+    },
+    showPopup: {
+      type: Boolean,
+      default: false,
+    },
+    popupHeight: {
+      //弹窗距离模型中心点的高度
+      type: Number,
+      default: 0,
+    },
+  })
+);
+const emits = defineEmits([
+  "init",
+  "click",
+  "mousemove",
+  "mouseover",
+  "mouseout",
+]);
 
 let $amapComponent: CustomThreeGltf;
 
+let popup: CSS2DObject;
+
 const currentInstance = getCurrentInstance();
 
-const {$$getInstance, parentInstance} = useRegister<CustomThreeGltf, any>((options, parentComponent) => {
-  return new Promise<CustomThreeGltf>((resolve) => {
-    // currentInstance.$$startAnimations = $$startAnimations;
-    // currentInstance.$$stopAnimations = $$stopAnimations;
-    // Object.assign( currentInstance.ctx, currentInstance.exposed);
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    $amapComponent = new CustomThreeGltf(parentComponent, options, {
-      $emit: emits,
-      ...(currentInstance?.exposed || {})
-    }, () => {
-      resolve($amapComponent);
+const { $$getInstance, parentInstance } = useRegister<CustomThreeGltf, any>(
+  (options, parentComponent) => {
+    return new Promise<CustomThreeGltf>((resolve) => {
+      // currentInstance.$$startAnimations = $$startAnimations;
+      // currentInstance.$$stopAnimations = $$stopAnimations;
+      // Object.assign( currentInstance.ctx, currentInstance.exposed);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      $amapComponent = new CustomThreeGltf(
+        parentComponent,
+        options,
+        {
+          $emit: emits,
+          ...(currentInstance?.exposed || {}),
+        },
+        () => {
+          addPopup($amapComponent);
+          resolve($amapComponent);
+        }
+      );
     });
-  });
-
-}, {
-  emits,
-  destroyComponent () {
-    if ($amapComponent && parentInstance?.$amapComponent) {
-      if(!parentInstance.isDestroy){
-        $amapComponent.remove();
-      }
-      $amapComponent.destroy();
-      $amapComponent = null as any;
-    }
   },
-});
+  {
+    emits,
+    destroyComponent() {
+      if ($amapComponent && parentInstance?.$amapComponent) {
+        if (!parentInstance.isDestroy) {
+          $amapComponent.remove();
+        }
+        $amapComponent.layer?.cssRenderer?.domElement?.remove();
+        $amapComponent.destroy();
+        $amapComponent = null as any;
+      }
+    },
+  }
+);
+
+const addPopup = (instance: CustomThreeGltf) => {
+  const cssRender = instance.layer?.cssRenderer;
+  if (cssRender == undefined) return;
+  const element = popupRef.value as HTMLDivElement;
+  const css2dObject = new CSS2DObject(element);
+  css2dObject.center.set(0.5, 1);
+  css2dObject.translateY(props.popupHeight || 0);
+  popup = css2dObject;
+  popup.visible = props.showPopup;
+  instance.object.add(popup);
+};
 
 const $$startAnimations = () => {
   $amapComponent.startAnimations();
@@ -93,4 +139,20 @@ defineExpose({
   $$stopAnimations,
 });
 
+watch(
+  () => props.showPopup,
+  (val) => {
+    if (popup) popup.visible = val;
+  }
+);
+
+watch(
+  () => props.popupHeight,
+  (val, old) => {
+    if (popup) {
+      const changeVal = (val || 0) - (old || 0);
+      popup.translateY(changeVal || 0);
+    }
+  }
+);
 </script>
diff --git a/src/vue-amap-extra/packages/ThreeLayer/CSS2DRenderer.js b/src/vue-amap-extra/packages/ThreeLayer/CSS2DRenderer.js
new file mode 100644
index 0000000000000000000000000000000000000000..4db6def74f4a870d0681e8f6a549867deae0e9b1
--- /dev/null
+++ b/src/vue-amap-extra/packages/ThreeLayer/CSS2DRenderer.js
@@ -0,0 +1,182 @@
+import { Matrix4, Object3D, Vector2, Vector3 } from 'three';
+
+class CSS2DObject extends Object3D {
+  constructor(element = document.createElement('div')) {
+    super();
+
+    this.isCSS2DObject = true;
+
+    this.element = element;
+
+    this.element.style.position = 'absolute';
+    this.element.style.userSelect = 'none';
+
+    this.element.setAttribute('draggable', false);
+
+    this.center = new Vector2(0.5, 0.5); // ( 0, 0 ) is the lower left; ( 1, 1 ) is the top right
+
+    this.addEventListener('removed', function () {
+      this.traverse(function (object) {
+        if (object.element instanceof Element && object.element.parentNode !== null) {
+          object.element.parentNode.removeChild(object.element);
+        }
+      });
+    });
+  }
+
+  copy(source, recursive) {
+    super.copy(source, recursive);
+
+    const self = this;
+
+    self.element = source.element.cloneNode(true);
+
+    self.center = source.center;
+
+    return self;
+  }
+}
+
+//
+
+const _vector = new Vector3();
+const _viewMatrix = new Matrix4();
+const _viewProjectionMatrix = new Matrix4();
+const _a = new Vector3();
+const _b = new Vector3();
+
+class CSS2DRenderer {
+  constructor(parameters = {}) {
+    const _this = this;
+
+    let _width, _height;
+    let _widthHalf, _heightHalf;
+
+    const cache = {
+      objects: new WeakMap(),
+    };
+
+    const domElement =
+      parameters.element !== undefined ? parameters.element : document.createElement('div');
+
+    domElement.style.overflow = 'hidden';
+
+    this.domElement = domElement;
+
+    this.getSize = function () {
+      return {
+        width: _width,
+        height: _height,
+      };
+    };
+
+    this.render = function (scene, camera) {
+      if (scene.matrixWorldAutoUpdate === true) scene.updateMatrixWorld();
+      if (camera.parent === null && camera.matrixWorldAutoUpdate === true)
+        camera.updateMatrixWorld();
+
+      _viewMatrix.copy(camera.matrixWorldInverse);
+      _viewProjectionMatrix.multiplyMatrices(camera.projectionMatrix, _viewMatrix);
+
+      renderObject(scene, scene, camera);
+      zOrder(scene);
+    };
+
+    this.setSize = function (width, height) {
+      _width = width;
+      _height = height;
+
+      _widthHalf = _width / 2;
+      _heightHalf = _height / 2;
+
+      domElement.style.width = width + 'px';
+      domElement.style.height = height + 'px';
+    };
+
+    function renderObject(object, scene, camera) {
+      if (object.isCSS2DObject) {
+        _vector.setFromMatrixPosition(object.matrixWorld);
+        _vector.applyMatrix4(_viewProjectionMatrix);
+
+        const visible =
+          object.visible === true &&
+          _vector.z >= -1 &&
+          _vector.z <= 1 &&
+          object.layers.test(camera.layers) === true;
+        object.element.style.display = visible === true ? '' : 'none';
+
+        if (visible === true) {
+          object.onBeforeRender(_this, scene, camera);
+
+          const element = object.element;
+
+          element.style.transform =
+            'translate(' +
+            -100 * object.center.x +
+            '%,' +
+            -100 * object.center.y +
+            '%)' +
+            'translate(' +
+            (_vector.x * _widthHalf + _widthHalf) +
+            'px,' +
+            (-_vector.y * _heightHalf + _heightHalf) +
+            'px)';
+
+          if (element.parentNode !== domElement) {
+            domElement.appendChild(element);
+          }
+
+          object.onAfterRender(_this, scene, camera);
+        }
+
+        const objectData = {
+          distanceToCameraSquared: getDistanceToSquared(camera, object),
+        };
+
+        cache.objects.set(object, objectData);
+      }
+
+      for (let i = 0, l = object.children.length; i < l; i++) {
+        renderObject(object.children[i], scene, camera);
+      }
+    }
+
+    function getDistanceToSquared(object1, object2) {
+      _a.setFromMatrixPosition(object1.matrixWorld);
+      _b.setFromMatrixPosition(object2.matrixWorld);
+
+      return _a.distanceToSquared(_b);
+    }
+
+    function filterAndFlatten(scene) {
+      const result = [];
+
+      scene.traverse(function (object) {
+        if (object.isCSS2DObject) result.push(object);
+      });
+
+      return result;
+    }
+
+    function zOrder(scene) {
+      const sorted = filterAndFlatten(scene).sort(function (a, b) {
+        if (a.renderOrder !== b.renderOrder) {
+          return b.renderOrder - a.renderOrder;
+        }
+
+        const distanceA = cache.objects.get(a).distanceToCameraSquared;
+        const distanceB = cache.objects.get(b).distanceToCameraSquared;
+
+        return distanceA - distanceB;
+      });
+
+      const zMax = sorted.length;
+
+      for (let i = 0, l = sorted.length; i < l; i++) {
+        sorted[i].element.style.zIndex = zMax - i;
+      }
+    }
+  }
+}
+
+export { CSS2DObject, CSS2DRenderer };
diff --git a/src/vue-amap-extra/packages/ThreeLayer/CustomThreeLayer.ts b/src/vue-amap-extra/packages/ThreeLayer/CustomThreeLayer.ts
index dbd71c63af28d90da521c6398ecb0ad7ecdfb0a6..ca87abc761e4f34ce31ac0df37f07f7eecde0876 100644
--- a/src/vue-amap-extra/packages/ThreeLayer/CustomThreeLayer.ts
+++ b/src/vue-amap-extra/packages/ThreeLayer/CustomThreeLayer.ts
@@ -11,102 +11,113 @@ import {
   Vector2,
   AxesHelper,
   Raycaster,
-  Clock
-} from 'three';
-import {merge, bind} from "lodash-es";
-import {HDRCubeTextureLoader} from "three/examples/jsm/loaders/HDRCubeTextureLoader.js";
-import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
-import {ThreeLayer} from '@vuemap/three-layer'
-import type { Texture, Camera,
-  WebGLRenderer,
-  Scene, Object3D
-} from 'three';
-import type {HDROptions, LightOption} from "./Type";
-import type {ThreeLayerOptions} from '@vuemap/three-layer'
+  Clock,
+} from "three";
+import { merge, bind } from "lodash-es";
+import { HDRCubeTextureLoader } from "three/examples/jsm/loaders/HDRCubeTextureLoader.js";
+import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
+import { ThreeLayer } from "@vuemap/three-layer";
+import type { Texture, Camera, WebGLRenderer, Scene, Object3D } from "three";
+import type { HDROptions, LightOption } from "./Type";
+import type { ThreeLayerOptions } from "@vuemap/three-layer";
+import { CSS2DRenderer } from "./CSS2DRenderer";
 
-interface Options extends ThreeLayerOptions{
-  lights?: LightOption[] // 灯光数组
-  hdr?: HDROptions // 开启HDR配置
-  axesHelper: boolean // 是否开启箭头，用于debug，默认不开启
+interface Options extends ThreeLayerOptions {
+  lights?: LightOption[]; // 灯光数组
+  hdr?: HDROptions; // 开启HDR配置
+  axesHelper: boolean; // 是否开启箭头，用于debug，默认不开启
+  createCssRender?: boolean; //是否创建CssRender
 }
 
-class CustomThreeLayer extends ThreeLayer{
-
+class CustomThreeLayer extends ThreeLayer {
   lightTypes = {
     AmbientLight, // 环境光  环境光会均匀的照亮场景中的所有物体
     DirectionalLight, // 平行光  平行光是沿着特定方向发射的光
     HemisphereLight, // 半球光  光源直接放置于场景之上，光照颜色从天空光线颜色渐变到地面光线颜色。
     PointLight, // 点光源  从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光
     RectAreaLight, // 平面光光源  平面光光源从一个矩形平面上均匀地发射光线。这种光源可以用来模拟像明亮的窗户或者条状灯光光源
-    SpotLight // 聚光灯  光线从一个点沿一个方向射出，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大
-  }
-  raycaster: Raycaster | undefined // 射线，用于判断点击或者鼠标移动是否碰到物体
+    SpotLight, // 聚光灯  光线从一个点沿一个方向射出，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大
+  };
+  raycaster: Raycaster | undefined; // 射线，用于判断点击或者鼠标移动是否碰到物体
   mouse: Vector2;
   envMap: any; // HDR的环境贴图
   clickFun: any;
   hoverFun: any;
   resizeFun: any;
   effectComposer?: EffectComposer;
-  renderPass: any
-  passNum = 0
-  passList = [] as any[]
-  clock = new Clock()
+  renderPass: any;
+  passNum = 0;
+  passList = [] as any[];
+  clock = new Clock();
   preHoverGroup = null as Object3D | null;
+  cssRenderer = null as CSS2DRenderer | null;
 
   constructor(map: any, options: Options, callback: () => void) {
-    options.onInit = (render,scene) => {
+    options.onInit = (render, scene) => {
       this.raycaster = new Raycaster();
-      if(options.axesHelper){
-        const axesHelper = new AxesHelper( 10000 );
-        scene.add( axesHelper );
+      if (options.axesHelper) {
+        const axesHelper = new AxesHelper(10000);
+        scene.add(axesHelper);
       }
       this.renderer?.setPixelRatio(window.devicePixelRatio);
+      if (options.createCssRender) this.creatCssRender(map);
       this.createEffect();
       this.createLights(options.lights || []);
       this.createHDR(options.hdr);
       this.bindEvents();
-      if(callback){
-        callback()
+      if (callback) {
+        callback();
       }
-    }
+    };
     options.onRender = (render, scene, camera) => {
-      if(this.passNum > 0){
-        this.effectComposer?.render(this.clock.getDelta())
-      }else{
+      if (this.passNum > 0) {
+        this.effectComposer?.render(this.clock.getDelta());
+      } else {
         this.renderer?.render(this.scene as Scene, camera as Camera);
+        this.cssRenderer?.render(this.scene as Scene, camera as Camera);
       }
-    }
-    super(map, options)
+    };
+    super(map, options);
     this.mouse = new Vector2();
   }
 
   updateEffectComposerSize() {
-    if(this.effectComposer && this.renderer){
-      const size = this.renderer.getSize( new Vector2() );
-      this.effectComposer.setSize( size.x , size.y);
+    if (this.effectComposer && this.renderer) {
+      const size = this.renderer.getSize(new Vector2());
+      this.effectComposer.setSize(size.x, size.y);
+      this.cssRenderer?.setSize(size.x, size.y);
     }
   }
 
   createEffect() {
-    const size = this.renderer?.getSize( new Vector2() );
-    this.effectComposer = new EffectComposer( this.renderer as WebGLRenderer );
-    this.effectComposer.setSize( size?.x as number, size?.y as number);
-
+    const size = this.renderer?.getSize(new Vector2());
+    this.effectComposer = new EffectComposer(this.renderer as WebGLRenderer);
+    this.effectComposer.setSize(size?.x as number, size?.y as number);
+    this.cssRenderer?.setSize(size?.x as number, size?.y as number);
     // const renderPass = new ThreeRenderPass( this.scene, this.camera );
     // this.renderPass = renderPass;
     // this.effectComposer.addPass(renderPass);
   }
 
-  addPass(pass: any){
+  creatCssRender(map: any) {
+    const element = map.getContainer().querySelector(".amap-markers");
+    this.cssRenderer = new CSS2DRenderer();
+    this.cssRenderer.domElement.style.position = "absolute";
+    this.cssRenderer.domElement.style.left = "0";
+    this.cssRenderer.domElement.style.top = "0";
+    element.appendChild(this.cssRenderer.domElement);
+  }
+
+  addPass(pass: any) {
     this.effectComposer?.addPass(pass);
     this.passNum++;
     this.passList.push(pass);
   }
 
-  removePass(pass: any){
-    const index = this.passList.indexOf( pass );
-    if ( index !== - 1 ) {
-      this.passList.splice( index, 1 );
+  removePass(pass: any) {
+    const index = this.passList.indexOf(pass);
+    if (index !== -1) {
+      this.passList.splice(index, 1);
     }
     this.effectComposer?.removePass(pass);
     this.passNum--;
@@ -114,14 +125,20 @@ class CustomThreeLayer extends ThreeLayer{
 
   createLights(lights: LightOption[] | undefined) {
     const defaultLightOptions = {
-      type: 'DirectionalLight', // 灯光类型， 可选值见下面的字典
-      args: [] // 灯光初始化时需要的参数，具体参数顺序可以查看threejs官网灯光的说明。 采用 ...args 的方式进行初始化
+      type: "DirectionalLight", // 灯光类型， 可选值见下面的字典
+      args: [], // 灯光初始化时需要的参数，具体参数顺序可以查看threejs官网灯光的说明。 采用 ...args 的方式进行初始化
     };
     if (lights && lights.length > 0) {
-      lights.forEach(lightOptions => {
-        lightOptions = merge({}, defaultLightOptions, lightOptions) as LightOption;
+      lights.forEach((lightOptions) => {
+        lightOptions = merge(
+          {},
+          defaultLightOptions,
+          lightOptions
+        ) as LightOption;
         if (this.lightTypes[lightOptions.type]) {
-          const light = new this.lightTypes[lightOptions.type](...lightOptions.args);
+          const light = new this.lightTypes[lightOptions.type](
+            ...lightOptions.args
+          );
           const position = lightOptions.position;
           const lookAt = lightOptions.lookAt;
           if (position) {
@@ -132,7 +149,7 @@ class CustomThreeLayer extends ThreeLayer{
           }
           this.add(light);
         } else {
-          console.warn('当前设置的灯光类型不存在');
+          console.warn("当前设置的灯光类型不存在");
         }
       });
     }
@@ -142,12 +159,16 @@ class CustomThreeLayer extends ThreeLayer{
     if (!hdr) {
       return;
     }
-    const options = merge({}, {
-      urls: [], // HDR贴图下载地址，需要6个文件，代表6个方向
-      path: '/', // HDR下载地址的路径前缀
-      // roughness: 0.0,
-      exposure: 1.0 // 光亮程度
-    }, hdr);
+    const options = merge(
+      {},
+      {
+        urls: [], // HDR贴图下载地址，需要6个文件，代表6个方向
+        path: "/", // HDR下载地址的路径前缀
+        // roughness: 0.0,
+        exposure: 1.0, // 光亮程度
+      },
+      hdr
+    );
     const render = this.renderer as WebGLRenderer;
     render.physicallyCorrectLights = true;
     render.outputEncoding = sRGBEncoding;
@@ -191,24 +212,24 @@ class CustomThreeLayer extends ThreeLayer{
     this.clickFun = bind(this._clickEvent, this);
     this.hoverFun = bind(this._hoverEvent, this);
     this.resizeFun = bind(this.updateEffectComposerSize, this);
-    if(this.canvas){
-      this.canvas.addEventListener('click', this.clickFun, false);
-      this.canvas.addEventListener('mousemove', this.hoverFun, false);
-    }else{
-      this.map.on('click', this.clickFun);
-      this.map.on('mousemove', this.hoverFun);
+    if (this.canvas) {
+      this.canvas.addEventListener("click", this.clickFun, false);
+      this.canvas.addEventListener("mousemove", this.hoverFun, false);
+    } else {
+      this.map.on("click", this.clickFun);
+      this.map.on("mousemove", this.hoverFun);
     }
-    this.map.on('resize', this.resizeFun);
+    this.map.on("resize", this.resizeFun);
   }
 
   ubBindEvents() {
-    this.map.off('click', this.clickFun);
-    this.map.off('mousemove', this.hoverFun);
-    this.map.on('off', this.resizeFun);
+    this.map.off("click", this.clickFun);
+    this.map.off("mousemove", this.hoverFun);
+    this.map.on("off", this.resizeFun);
   }
 
   _getOriginEvent(e: any) {
-    if(e.originEvent){
+    if (e.originEvent) {
       return e.originEvent;
     }
     return e;
@@ -218,10 +239,10 @@ class CustomThreeLayer extends ThreeLayer{
     e = this._getOriginEvent(e);
     const group = this._intersectGltf(e);
     if (group) {
-      if(group.userData.$vue){
-        group.userData.$vue.$emit('click', group);
+      if (group.userData.$vue) {
+        group.userData.$vue.$emit("click", group);
       }
-      this.emit('click', group);
+      this.emit("click", group);
     }
   }
 
@@ -231,19 +252,22 @@ class CustomThreeLayer extends ThreeLayer{
     if (group) {
       if (!group.userData.isHover) {
         group.userData.isHover = true;
-        if(group.userData.$vue){
-          group.userData.$vue.$emit('mouseover', group);
-        }else{
-          this.emit('mouseover', group);
+        if (group.userData.$vue) {
+          group.userData.$vue.$emit("mouseover", group);
+        } else {
+          this.emit("mouseover", group);
         }
       }
     }
-    if(this.preHoverGroup){
-      if(!group || this.preHoverGroup.uuid !== group.uuid){
-        if(this.preHoverGroup.userData.$vue){
-          this.preHoverGroup.userData.$vue.$emit('mouseout', this.preHoverGroup);
-        }else{
-          this.emit('mouseout', this.preHoverGroup);
+    if (this.preHoverGroup) {
+      if (!group || this.preHoverGroup.uuid !== group.uuid) {
+        if (this.preHoverGroup.userData.$vue) {
+          this.preHoverGroup.userData.$vue.$emit(
+            "mouseout",
+            this.preHoverGroup
+          );
+        } else {
+          this.emit("mouseout", this.preHoverGroup);
         }
         this.preHoverGroup.userData.isHover = false;
       }
@@ -258,13 +282,24 @@ class CustomThreeLayer extends ThreeLayer{
 
     // window.pageYOffset 鼠标滚动的距离
     // clientTop 一个元素顶部边框的宽度
-    const offsetTop = getBoundingClientRect.top + window.pageYOffset - client.clientTop;
-    const offsetLeft = getBoundingClientRect.left + window.pageXOffset - client.clientLeft;
-    this.mouse.x = ((e.x + window.pageXOffset - offsetLeft) / getBoundingClientRect.width) * 2 - 1;
-    this.mouse.y = -((e.y + window.pageYOffset - offsetTop) / getBoundingClientRect.height) * 2 + 1;
+    const offsetTop =
+      getBoundingClientRect.top + window.pageYOffset - client.clientTop;
+    const offsetLeft =
+      getBoundingClientRect.left + window.pageXOffset - client.clientLeft;
+    this.mouse.x =
+      ((e.x + window.pageXOffset - offsetLeft) / getBoundingClientRect.width) *
+        2 -
+      1;
+    this.mouse.y =
+      -((e.y + window.pageYOffset - offsetTop) / getBoundingClientRect.height) *
+        2 +
+      1;
     const camera = this.camera;
     this.raycaster?.setFromCamera(this.mouse, camera as Camera);
-    const intersects = this.raycaster?.intersectObjects([this.scene as Scene], true);
+    const intersects = this.raycaster?.intersectObjects(
+      [this.scene as Scene],
+      true
+    );
     const length = intersects?.length;
     if (length && length > 0) {
       let group: Object3D | null = null;
@@ -281,7 +316,7 @@ class CustomThreeLayer extends ThreeLayer{
   }
 
   _getGroup(object: Object3D): Object3D | null {
-    if(!object){
+    if (!object) {
       return null;
     }
     if (object.userData.acceptEvent) {
@@ -296,13 +331,12 @@ class CustomThreeLayer extends ThreeLayer{
       this.envMap.dispose();
       this.envMap = null;
     }
+    this.cssRenderer?.domElement?.remove();
     super.destroy();
     this.lightTypes = null as any;
     this.raycaster = undefined;
     // this.mouse = undefined;
   }
-
-
 }
 
-export default CustomThreeLayer
+export default CustomThreeLayer;
diff --git a/src/vue-amap-extra/packages/ThreeLayer/ThreeLayer.vue b/src/vue-amap-extra/packages/ThreeLayer/ThreeLayer.vue
index ac80d5010ae0f9b275e2c7a671e655fae164a932..025496c092228b0464a0481f1025d5e94f003850 100644
--- a/src/vue-amap-extra/packages/ThreeLayer/ThreeLayer.vue
+++ b/src/vue-amap-extra/packages/ThreeLayer/ThreeLayer.vue
@@ -2,101 +2,109 @@
   <slot />
 </template>
 <script setup lang="ts">
-import {defineOptions, provide} from 'vue';
-import {useRegister, buildProps, provideKey} from "@vuemap/vue-amap";
+import { defineOptions, provide } from "vue";
+import { useRegister, buildProps, provideKey } from "@vuemap/vue-amap";
 import CustomThreeLayer from "./CustomThreeLayer";
-import type {TRegisterFn, IProvideType} from "@vuemap/vue-amap";
-import type {PropType} from 'vue';
-import type {HDROptions, LightOption} from "./Type";
-import type {WebGLRendererParameters} from "three";
+import type { TRegisterFn, IProvideType } from "@vuemap/vue-amap";
+import type { PropType } from "vue";
+import type { HDROptions, LightOption } from "./Type";
+import type { WebGLRendererParameters } from "three";
 
 defineOptions({
-  name: 'ElAmapLayerThree',
-  inheritAttrs: false
+  name: "ElAmapLayerThree",
+  inheritAttrs: false,
 });
 
 const needInitComponents: TRegisterFn[] = [];
-const provideData:IProvideType = {
+const provideData: IProvideType = {
   $amapComponent: undefined,
-  addChildComponent (cb){
+  addChildComponent(cb) {
     needInitComponents.push(cb);
   },
-  isDestroy: false
+  isDestroy: false,
 };
 
 provide(provideKey, provideData);
 
-defineProps(buildProps({
-  lights: {
-    type: Array as PropType<LightOption[]>,
-    default () {
-      return [];
-    }
-  }, // 灯光数组
-  hdr: {
-    type: Object as PropType<HDROptions>
-  },
-  zooms: {
-    type: Array as PropType<number[]>,
-    default () {
-      return [2, 20];
-    }
-  }, // 支持的缩放级别范围，默认范围 [2, 20]
-  opacity: {
-    type: Number
-  }, // 透明度，默认 1
-  alpha: {
-    type: Boolean,
-    default: true
-  }, // canvas是否包含alpha (透明度)。默认为 false
-  antialias: {
-    type: Boolean,
-    default: false
-  },// 是否执行抗锯齿。默认为false
-  customCoordsCenter: {
-    type: Array as PropType<number[]>,
-    default () {
-      return null;
-    }
-  },
-  axesHelper: {
-    type: Boolean,
-    default: false
-  },
-  createCanvas: {
-    type: Boolean,
-    default: false
-  },
-  webGLRendererParameters: {
-    type: Object as PropType<WebGLRendererParameters>,
-    default () {
-      return undefined;
-    }
-  }
-}));
-const emits = defineEmits(['init']);
+defineProps(
+  buildProps({
+    lights: {
+      type: Array as PropType<LightOption[]>,
+      default() {
+        return [];
+      },
+    }, // 灯光数组
+    hdr: {
+      type: Object as PropType<HDROptions>,
+    },
+    zooms: {
+      type: Array as PropType<number[]>,
+      default() {
+        return [2, 20];
+      },
+    }, // 支持的缩放级别范围，默认范围 [2, 20]
+    opacity: {
+      type: Number,
+    }, // 透明度，默认 1
+    alpha: {
+      type: Boolean,
+      default: true,
+    }, // canvas是否包含alpha (透明度)。默认为 false
+    antialias: {
+      type: Boolean,
+      default: false,
+    }, // 是否执行抗锯齿。默认为false
+    customCoordsCenter: {
+      type: Array as PropType<number[]>,
+      default() {
+        return null;
+      },
+    },
+    axesHelper: {
+      type: Boolean,
+      default: false,
+    },
+    createCanvas: {
+      type: Boolean,
+      default: false,
+    },
+    webGLRendererParameters: {
+      type: Object as PropType<WebGLRendererParameters>,
+      default() {
+        return undefined;
+      },
+    },
+    createCssRender: {
+      type: Boolean,
+      default: false,
+    },
+  })
+);
+const emits = defineEmits(["init"]);
 
 let $amapComponent: CustomThreeLayer;
 
-const {$$getInstance, parentInstance} = useRegister<CustomThreeLayer, any>((options, parentComponent) => {
-  return new Promise<CustomThreeLayer>((resolve) => {
-    $amapComponent = new CustomThreeLayer(parentComponent, options, () => {
-      provideData.$amapComponent = $amapComponent;
-      resolve($amapComponent);
+const { $$getInstance, parentInstance } = useRegister<CustomThreeLayer, any>(
+  (options, parentComponent) => {
+    return new Promise<CustomThreeLayer>((resolve) => {
+      $amapComponent = new CustomThreeLayer(parentComponent, options, () => {
+        provideData.$amapComponent = $amapComponent;
+        resolve($amapComponent);
+      });
     });
-  });
-
-}, {
-  emits,
-  provideData,
-  needInitComponents,
-  destroyComponent () {
-    if ($amapComponent) {
-      $amapComponent.destroy();
-      $amapComponent = null as any;
-    }
   },
-});
+  {
+    emits,
+    provideData,
+    needInitComponents,
+    destroyComponent() {
+      if ($amapComponent) {
+        $amapComponent.destroy();
+        $amapComponent = null as any;
+      }
+    },
+  }
+);
 
 const convertLngLat = (lnglat: any) => {
   return $amapComponent.convertLngLat(lnglat);
@@ -136,7 +144,6 @@ defineExpose({
   $$getRender,
   $$refresh,
   $$addPass,
-  $$removePass
+  $$removePass,
 });
-
 </script>
diff --git a/test/views/three/Gltf.vue b/test/views/three/Gltf.vue
index a84a84db0e8aaf31345fddad12258b511c98dc18..7240b63f103d4d00a6abc9ff1b4484217a91ec44 100644
--- a/test/views/three/Gltf.vue
+++ b/test/views/three/Gltf.vue
@@ -7,43 +7,40 @@
       view-mode="3D"
       :pitch="60"
       :show-building-block="false"
-      :features="['bg','road']"
+      :features="['bg', 'road']"
       @click="clickMap"
       @init="initMap"
     >
       <el-amap-loca>
-        <el-amap-loca-line
-          :source-url="sourceUrl"
-          :layer-style="layerStyle"
-        />
+        <el-amap-loca-line :source-url="sourceUrl" :layer-style="layerStyle" />
       </el-amap-loca>
       <el-amap-layer-three
         :visible="true"
         :hdr="hdrOptions"
         :alpha="true"
         :antialias="true"
-        :create-canvas="true"
+        :create-canvas="false"
+        :create-css-render="true"
         @init="initLayer"
         @click="clickLayer"
         @mouseover="mouseoverLayer"
         @mouseout="mouseoutLayer"
       >
-        <el-amap-three-light-ambient
-          color="rgb(255,255,255)"
-          :intensity="1"
-        />
+        <el-amap-three-light-ambient color="rgb(255,255,255)" :intensity="1" />
         <el-amap-three-light-directional
           color="rgb(255,0,255)"
           :intensity="1"
-          :position="{x:0, y:1, z:0}"
+          :position="{ x: 0, y: 1, z: 0 }"
         />
         <el-amap-three-light-hemisphere
           color="blue"
           :intensity="1"
-          :position="{x:1, y:0, z:0}"
+          :position="{ x: 1, y: 0, z: 0 }"
+        />
+        <el-amap-three-light-point
+          :position="{ x: 116.106206, y: 39.975468, z: 100 }"
         />
-        <el-amap-three-light-point :position="{x:116.106206, y:39.975468, z: 100 }" />
-        <el-amap-three-light-spot :position="{x:0, y:1, z:0}" />
+        <el-amap-three-light-spot :position="{ x: 0, y: 1, z: 0 }" />
         <!--        <el-amap-three-gltf
           v-for="(p,index) in positions"
           :key="index"
@@ -59,7 +56,7 @@
           ref="animation"
           url="/gltf/sgyj_point_animation.gltf"
           :position="center"
-          :scale="[10,10,10]"
+          :scale="[10, 10, 10]"
           :rotation="rotation"
           :height="1000"
           :visible="visible"
@@ -69,44 +66,51 @@
         <el-amap-three-gltf
           url="/gltf/car2.gltf"
           :position="carPosition"
-          :scale="[10,10,10]"
+          :scale="[10, 10, 10]"
           :angle="carAngle"
           :rotation="rotation"
           :move-animation="moveAnimation"
+          :show-popup="true"
+          :popup-height="1"
           @init="initCar"
-        />
+        >
+          <div
+            style="
+              width: 100px;
+              height: 100px;
+              background: #f44336bd;
+              color: #fff;
+              text-align: center;
+              vertical-align: middle;
+            "
+          >
+            测试三维信息弹窗
+          </div>
+        </el-amap-three-gltf>
         <el-amap-three-gltf
           ref="animation"
           url="/gltf/ferrari.glb"
           :position="center"
-          :scale="[10,10,10]"
+          :scale="[10, 10, 10]"
           :config-loader="configLoader"
         />
       </el-amap-layer-three>
     </el-amap>
     <div class="control-container">
       <el-button @click="changeVisible">
-        {{ visible ? '隐藏' : '显示' }}
-      </el-button>
-      <el-button @click="stop">
-        停止动画
-      </el-button>
-      <el-button @click="start">
-        开始动画
-      </el-button>
-      <el-button @click="stopCar">
-        停止车辆
-      </el-button>
-      <el-button @click="startCar">
-        移动车辆
+        {{ visible ? "隐藏" : "显示" }}
       </el-button>
+      <el-button @click="stop"> 停止动画 </el-button>
+      <el-button @click="start"> 开始动画 </el-button>
+      <el-button @click="stopCar"> 停止车辆 </el-button>
+      <el-button @click="startCar"> 移动车辆 </el-button>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import {defineComponent} from "vue";
-import {bearing} from "@turf/turf";
+import { defineComponent } from "vue";
+import { bearing } from "@turf/turf";
 import ElAmapLayerThree from "@vuemap/vue-amap-extra/packages/ThreeLayer/ThreeLayer.vue";
 import ElAmapThreeGltf from "@vuemap/vue-amap-extra/packages/ThreeGltf/ThreeGltf.vue";
 import ElAmapThreeLightAmbient from "@vuemap/vue-amap-extra/packages/ThreeLightAmbient/ThreeLightAmbient.vue";
@@ -114,16 +118,32 @@ import ElAmapThreeLightDirectional from "@vuemap/vue-amap-extra/packages/ThreeLi
 import ElAmapThreeLightHemisphere from "@vuemap/vue-amap-extra/packages/ThreeLightHemisphere/ThreeLightHemisphere.vue";
 import ElAmapThreeLightPoint from "@vuemap/vue-amap-extra/packages/ThreeLightPoint/ThreeLightPoint.vue";
 import ElAmapThreeLightSpot from "@vuemap/vue-amap-extra/packages/ThreeLightSpot/ThreeLightSpot.vue";
-import ElAmap from '@vuemap/vue-amap/packages/amap/amap.vue'
+import ElAmap from "@vuemap/vue-amap/packages/amap/amap.vue";
 import ElAmapLoca from "@vuemap/vue-amap-loca/packages/Loca/Loca.vue";
 import ElAmapLocaLine from "@vuemap/vue-amap-loca/packages/LineLayer/LineLayer.vue";
-import {DRACOLoader} from "three/examples/jsm/loaders/DRACOLoader";
-import {RenderPass} from 'three/examples/jsm/postprocessing/RenderPass.js';
-import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
-import { DotScreenShader } from 'three/examples/jsm/shaders/DotScreenShader.js';
-import {TextureLoader, LinearFilter, MeshPhongMaterial, BoxBufferGeometry, Mesh} from 'three';
+import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
+import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
+import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js";
+import { DotScreenShader } from "three/examples/jsm/shaders/DotScreenShader.js";
+import {
+  TextureLoader,
+  LinearFilter,
+  MeshPhongMaterial,
+  BoxBufferGeometry,
+  Mesh,
+} from "three";
 
-const colors = ['#f7fcf5', '#e5f5e0', '#c7e9c0', '#a1d99b', '#74c476', '#41ab5d', '#238b45', '#006d2c', '#00441b'].reverse();
+const colors = [
+  "#f7fcf5",
+  "#e5f5e0",
+  "#c7e9c0",
+  "#a1d99b",
+  "#74c476",
+  "#41ab5d",
+  "#238b45",
+  "#006d2c",
+  "#00441b",
+].reverse();
 export default defineComponent({
   name: "Map",
   components: {
@@ -136,9 +156,9 @@ export default defineComponent({
     ElAmapThreeLightSpot,
     ElAmap,
     ElAmapLoca,
-    ElAmapLocaLine
+    ElAmapLocaLine,
   },
-  data(){
+  data() {
     return {
       center: [116.306206, 39.975468],
       zoom: 16,
@@ -146,22 +166,25 @@ export default defineComponent({
       position: [116.306206, 39.975468],
       positions: [],
       angle: 90,
-      rotation: {x:90, y:0, z:0},
+      rotation: { x: 90, y: 0, z: 0 },
       carPosition: [116.306206, 39.975468],
       carInterval: -1 as any,
-      moveAnimation: {duration: 1000,smooth: true},
+      moveAnimation: { duration: 1000, smooth: true },
       carAngle: 90,
-      lights: [{
-        type: 'AmbientLight',
-        args: []
-      }],
+      lights: [
+        {
+          type: "AmbientLight",
+          args: [],
+        },
+      ],
       hdrOptions: {
-        urls: [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ],
-        path: './hdr/'
+        urls: ["px.hdr", "nx.hdr", "py.hdr", "ny.hdr", "pz.hdr", "nz.hdr"],
+        path: "./hdr/",
       },
-      sourceUrl: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/bj_bus.json',
+      sourceUrl:
+        "https://a.amap.com/Loca/static/loca-v2/demos/mock_data/bj_bus.json",
       layerStyle: {
-        color (index, prop) {
+        color(index, prop) {
           const i = index % colors.length;
           return colors[i];
         },
@@ -169,113 +192,115 @@ export default defineComponent({
           const i = index % colors.length;
           return i * 0.1 + 2;
         },
-        altitude (index, feature) {
+        altitude(index, feature) {
           const i = index % colors.length;
           return 100 * i;
         },
         // dashArray: [10, 5, 10, 0],
         dashArray: [10, 0, 10, 0],
       },
-      configLoader: (loader) =>{
-        const dracoLoader = new DRACOLoader()
-        dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.143/examples/js/libs/draco/');
-        loader.setDRACOLoader( dracoLoader );
+      configLoader: (loader) => {
+        const dracoLoader = new DRACOLoader();
+        dracoLoader.setDecoderPath(
+          "https://cdn.jsdelivr.net/npm/three@0.143/examples/js/libs/draco/"
+        );
+        loader.setDRACOLoader(dracoLoader);
       },
-    }
+    };
   },
   methods: {
-    clickMap(e){
-      console.log('click map: ', e);
+    clickMap(e) {
+      console.log("click map: ", e);
     },
-    initMap(map){
-      console.log('init map: ', map);
+    initMap(map) {
+      console.log("init map: ", map);
       const positions = [] as any;
-      for(let i=0;i<10;i++){
+      for (let i = 0; i < 10; i++) {
         const lng = 116.306206 + Math.random() * 0.01;
         const lat = 39.975468 + Math.random() * 0.01;
         positions.push([lng, lat]);
       }
       this.positions = positions;
     },
-    changeVisible(){
+    changeVisible() {
       this.visible = !this.visible;
     },
-    initLayer(layer){
-      const renderPass = new RenderPass( layer.getScene(), layer.getCamera());
-      renderPass.clear = true;
-      layer.addPass( renderPass );
+    initLayer(layer) {
+      // const renderPass = new RenderPass(layer.getScene(), layer.getCamera());
+      // renderPass.clear = true;
+      // layer.addPass(renderPass);
 
-      const effect1 = new ShaderPass( DotScreenShader );
-      effect1.uniforms[ 'scale' ].value = 4;
-      layer.addPass(effect1);
-      console.log('init layer: ', layer);
-      const texture = new TextureLoader().load(
-          'https://a.amap.com/jsapi_demos/static/demo-center-v2/three.jpeg'
-      );
-      texture.minFilter = LinearFilter;
-      //  这里可以使用 three 的各种材质
-      const mat = new MeshPhongMaterial({
-        color: 0xfff0f0,
-        depthTest: true,
-        transparent: true,
-        map: texture,
-      });
-      const geo = new BoxBufferGeometry(50, 50, 50);
-      const mesh = new Mesh(geo, mat);
-      mesh.userData.acceptEvent = true;
-      const r = layer.convertLngLat([116.308206, 39.975468])
-      mesh.position.set(r [0], r [1], 500);
-      layer.add(mesh);
+      // const effect1 = new ShaderPass(DotScreenShader);
+      // effect1.uniforms["scale"].value = 4;
+      // layer.addPass(effect1);
+      // console.log("init layer: ", layer);
+      // const texture = new TextureLoader().load(
+      //   "https://a.amap.com/jsapi_demos/static/demo-center-v2/three.jpeg"
+      // );
+      // texture.minFilter = LinearFilter;
+      // //  这里可以使用 three 的各种材质
+      // const mat = new MeshPhongMaterial({
+      //   color: 0xfff0f0,
+      //   depthTest: true,
+      //   transparent: true,
+      //   map: texture,
+      // });
+      // const geo = new BoxBufferGeometry(50, 50, 50);
+      // const mesh = new Mesh(geo, mat);
+      // mesh.userData.acceptEvent = true;
+      // const r = layer.convertLngLat([116.308206, 39.975468]);
+      // mesh.position.set(r[0], r[1], 500);
+      // layer.add(mesh);
     },
-    clickLayer(group){
-      console.log('click layer: ', group);
+    clickLayer(group) {
+      console.log("click layer: ", group);
     },
-    mouseoverLayer(group){
-      console.log('mouseoverLayer layer: ', group);
+    mouseoverLayer(group) {
+      console.log("mouseoverLayer layer: ", group);
     },
-    mouseoutLayer(group){
-      console.log('mouseoutLayer layer: ', group);
+    mouseoutLayer(group) {
+      console.log("mouseoutLayer layer: ", group);
     },
-    init(object, $vue){
-      console.log('init gltf: ', object)
+    init(object, $vue) {
+      console.log("init gltf: ", object);
       $vue.$$startAnimations();
     },
-    clickGltf(e){
-      console.log(' click gltf: ', e);
+    clickGltf(e) {
+      console.log(" click gltf: ", e);
     },
-    stop(){
+    stop() {
       (this.$refs.animation as any).$$stopAnimations();
     },
-    start(){
+    start() {
       (this.$refs.animation as any).$$startAnimations();
     },
-    initCar(){
+    initCar() {
       this.startCar();
     },
-    startCar(){
+    startCar() {
       this.carInterval = setInterval(() => {
         const lng = this.carPosition[0] + Math.random() * 0.001;
         const lat = this.carPosition[1] + Math.random() * 0.001;
         const newPosition = [lng, lat];
-        const angle = bearing(this.carPosition, newPosition) + 90
+        const angle = bearing(this.carPosition, newPosition) + 90;
         this.carPosition = newPosition;
         this.carAngle = angle;
-      }, 1000)
+      }, 1000);
     },
-    stopCar(){
+    stopCar() {
       clearInterval(this.carInterval);
-    }
-  }
-})
+    },
+  },
+});
 </script>
 
 <style scoped>
-.map-container{
+.map-container {
   width: 100%;
   height: 100%;
   position: relative;
 }
-.control-container{
+.control-container {
   position: absolute;
   padding: 24px;
   background: #ffffff;