以vue为例：创建自定义气泡标注组件

创建多个气泡组件案例实现，以下是管理气泡组件的配置参考

<template>
    <div v-for="(item, index) in manyPopConfigs " :key="index">
        <popComponents :popData="item"></popComponents>
    </div>
</template>

<script setup>
import popComponents from '@/components/popComponents.vue'
// 定义多个气泡的创建配置对象
const manyPopConfigs = [{
    name: '气泡1',
    x: 123451,
    y: 123451,
    fnum: 1,
    height: 5,
},
{
    name: '气泡2',
    x: 123452,
    y: 123452,
    fnum: 1,
    height: 5,
},
{
    name: '气泡3',
    x: 123453,
    y: 123453,
    fnum: 1,
    height: 5,
}]
</script>

以下是气泡组件popComponents的配置参考

<template>
    <div class="pop_container" :style="{
        position: 'absolute',               // 必须设置绝对定位才能对应到地图场景上
        transformOrigin: 'bottom',          // 固定transform的原点位置，避免偏移方向出错
        transform: popTips.transformStyle,  // 通过气泡的onUpdatePosition方法动态绑定偏移位置
        zIndex: popTips.zIndex              // 通过气泡的onUpdatePosition方法动态计算各气泡间的层级关系
    }" v-show="popTips.visible">
        <div class="pop_base">
            <div class="myIcons">温度 <span id="temp"> 24.5° </span></div>
            <div class="pop-tips">(现有dom绑定气泡标注坐标)</div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue'

// 组件参数 接收来自父组件的数据
var props = defineProps({
    popData: { type: Object, default: () => { } }
});

// 定义该子组件的偏移、显隐和层级的响应式对象
let popTips = reactive({
    transformStyle: '',
    visible: false,
    zIndex: 0
})

// 定义气泡标注对象
let PopMarker = ref(null)

onMounted(() => {
    // 初始化生命周期执行气泡初始化
    initPop()
})

onUnmounted(() => {
    // 销毁组件生命周期执行气泡销毁
    PopMarker.value.close()
    PopMarker.value = null
})

// 初始化气泡标注并绑定到该子组件
function initPop () {
    // 根据点击元素的配置生成气泡标注
    PopMarker.value = new esmap.ESPopMarker({
        mapCoord: {
            bid: building.id, // *绑定到需要显示的建筑id* (室内模式可忽略bid属性)
            x: props.x,
            y: props.y,
            fnum: props.fnum,
            offset: props.height,
        },
        showLevel: props.showLevel || 19,
        created: () => {
            // 将气泡标注的偏移位置绑定到vue组件的css属性transformStyle中
            PopMarker.value.onUpdatePosition((transformStyle, displayStyle) => {
                popTips.transformStyle = transformStyle
                popTips.visible = displayStyle.display === 'none' ? false : true
                // popTips.zIndex = displayStyle.zIndex
            })
        }
    })
}
</script>