三维可视化场景绘制自定义弹窗

第一步：构建弹窗组件 ，以Vue为例

注意：弹窗组件有以下几点注意事项

• 1.最外层元素的定位属性要设置为absolute
• 2.data里面初始化一个popMarkerConfigs对象并对根元素进行动态配置
• 3.挂载气泡组件的容器组件和三维场景容器的宽高位置必须相同才能保证气泡标注位置不会偏移

// 创建一个弹窗组件
<template>
<div :style='{ 
        transform: popMarkerConfigs.transformStyle
    }'
    v-show='popMarkerConfigs.visible'
    class='popup-component'>
    <div>自定义弹窗内容</div>
</div>
</template>

<script>
    export default {
        popMarkerConfigs: {
            transformStyle: '',
            visible: false
        },
    }
</script>

<style scoped>
.popup-component{
    position: absolute;
}
</style>

第二步：获取弹窗组件元素节点

mounted() {
    // 在挂载以后通过ref等方法获取到元素节点
    var popupComponentDom = document.querySelector('.popup-component')
}

第三步：显示气泡标注

// 创建气泡标注
var popMarker = new esmap.ESPopMarker({
    mapCoord: {
        bid: building.id, // *绑定到需要显示的建筑id*
        x: map.center.x,  // 坐标
        y: map.center.y,
        height: 4,        // 距离地面高度
        fnum: 1           // 所在楼层
    },
    content: '<div></div>', // 传入空div, 气泡内容由弹窗组件创建
});

// 动态配置样式，实现气泡标注位置动态更新
popMarker.onUpdatePosition((transformStyle, displayStyle) => {
    popupComponentDom.popMarkerConfigs.transformStyle = transformStyle
    popupComponentDom.popMarkerConfigs.visible = (displayStyle.display === 'none') ? false : true
})

常用方法

// 关闭气泡
popMarker.hide()
popupComponentDom.popMarkerConfigs.visible = false

// 显示气泡
popMarker.show()
popupComponentDom.popMarkerConfigs.visible = true

// 移动气泡
popMarker.moveTo({
    x: map.center.x,   // 新坐标
    y: map.center.y,
    offset: 1,         // 距离地面高度
    time: 0            // 位移动画时间，单位（秒/s）
})