创建气泡标注实例

必须要触发"map.on('loadComplete')"场景加载完成后的时机调用

const popMarker = new esmap.ESPopMarker({
    mapCoord: {
        bid: building.id, // *绑定到需要显示的建筑id* (室内模式可忽略bid属性)
        x: map.center.x,  // 坐标
        y: map.center.y,
        height: 4,        // 距离楼层地板的高度
        fnum: 1           // 所在楼层
    },
    // className: 'myPopMarker', // 支持自定义class样式
    width: 300,           // 气泡标注的宽度
    height: 100,          // 气泡标注的高度
    showLevel: 20,        // 显示级别
    content: `HTML代码<a target='_bank' href='http:// www.esmap.cn'>易景空间官方网站</a>`,
                            // 气泡框的内容,支持输入HTML代码
    closed: ()=> {  
        // 信息窗点击关闭后的回调函数
    },
    created: () => {       
        // 创建完成的回调函数
    }
});

ESPopMarker参数说明:

参数	说明	类型	可选值	默认值	是否必填
mapCoord	定位点的参数配置	Object	——	——	是
mapCoord.bid	绑定到需要显示的场景id (室内模式可忽略)	String	——	——	否
mapCoord.x	x坐标位置	Number	——	——	是
mapCoord.y	y坐标位置	Number	——	——	是
mapCoord.height	距离楼层地板的高度	Number	——	0	否
mapCoord.fnum	所定位的楼层	Number	——	——	是
className	给气泡标注整体容器增加类名,css里便可配置该类名的样式； 若设置该属性则下面的width和height失效	String	——	——	否
width	气泡标注的宽度	Number || String	——	300	否
height	气泡标注的高度	Number || String	——	150	否
content	气泡框的内容,可以输入HTML代码	String	——	——	否
updateSize	是否随三维场景缩放级别改变而改变大小	Boolean	——	false	否
maxScale	气泡最大缩放等级	Number	0-1	1	否
showLevel	到达场景缩放等级隐藏或者显示标注	Number|Array|null	Number: 0 - 23, 如配置 15, 则超过15级显示 Array:[10, 20]: 在10~20级显示 null: 一直显示	16	否
closed	信息窗点击默认关闭按钮的关闭回调函数	Function	——	——	否
created	创建完成的回调函数	Function	——	——	否

创建自定义的气泡标注实例

注意：自定义dom气泡标注有以下几点注意事项

1.绑定的dom元素的定位属性要设置为absolute，才能相对定位到场景位置。

2.绑定的dom元素需要和三维场景容器重合，否则相对定位可能会出现异常。

3.vue项目可以参考自定义气泡标注组件的相关示例。

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

<template>
    <div 
        class='popup-component'
        :style='{ 
            position: absolute;
            transform: popConfig.transformStyle
        }'
        v-show='popConfig.visible'
    >
        <div>自定义弹窗内容</div>
    </div>
</template>

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

<style scoped>
</style>

第二步：绑定dom并实时更新相对定位

// 创建气泡标注
const popMarker = new esmap.ESPopMarker({
    mapCoord: {
        bid: building.id, // *绑定到需要显示的建筑id* (室内模式可忽略bid属性)
        x: map.center.x,  // 坐标
        y: map.center.y,
        height: 4,        // 距离地面高度
        fnum: 1           // 所在楼层
    },
    showLevel: 20,        // 显示级别
});

// 动态配置样式，实现气泡标注位置动态更新； 通过onUpdatePosition的回调函数实时返回相对位置
popMarker.onUpdatePosition((transformStyle, displayStyle) => {
    popConfig.transformStyle = transformStyle  // transformStyle值最终传入dom的css样式中；
    popConfig.visible = (displayStyle.display === 'none') ? false : true
})