vue项目开发中，我们需要在地图上渲染一个告警动画效果，这里我们使用的是lottie实现的动画效果，我们需要将我们的自定义组件渲染到地图上，框架我们使用的是vue3 vite js实现的，但是写法我们是用的vue2的写法

渲染实例代码

<template>
  <div class="gdMap">
    <div class="container" ref="mapContainer" id="container"></div>
  </div>
</template>

<script>
import { createApp } from 'vue';
import alarm from "@/components/alarm/index.vue";
export default {
  data() {
    return {
      map: null
    }
  },
  components: {
    alarm
  },
  mounted() {
    this.map = new AMap.Map(this.$refs.mapContainer, {
      zoom: 10,
      center: [116.397428, 39.90923],
      mapStyle: 'amap://styles/eebad0d61cdc83f8253e3fbcdf5cd2bc',
    })
    // 创建一个临时的DOM元素来挂载alarm组件
    const container = document.createElement('div');
    const app = createApp(alarm);
    app.mount(container);

    // 创建自定义覆盖物
    const customOverlay = new AMap.Marker({
      position: [116.397428, 39.90923], // 设置覆盖物位置
      map: this.map, // 设置覆盖物添加到哪个地图
      content: container, // 将alarm组件的DOM作为内容
      offset: new AMap.Pixel(-50, -50), // 设置覆盖物位置偏移值
    });
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destroy()
    }
  }
}
</script>

<style lang="scss" scoped>

.gdMap {
  width: 100%;
  height: 100%;
  z-index: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;
  position: absolute;
  top: 0;
  left: 0;

  .container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
}
</style>

项目应用

重要目标预警与智慧分析系统