三维可视化场景绘制气泡标注

PS:多个气泡展示时，气泡标注展示父组件及地图父组件需完全重合，否则定位可能会出现异常

创建默认样式的气泡标注 （以下代码都要在 map.on('loadComplete') 中调用）

map.on('loadComplete', function () {
//添加标注一定要放在地图加载完成之后才能执行，拷贝下面代码即可
    var popMarker = new esmap.ESPopMarker({
        mapCoord: {
            bid: building.id, // *绑定到需要显示的建筑id*
            x: map.center.x,  // 坐标
            y: map.center.y,
            height: 4,        // 距离地面高度
            fnum: 1           // 所在楼层
        },
        width: 300,           // 气泡标注宽度
        height: 100,          // 气泡标注高度
        content: `HTML代码<a target='_bank' href='http:// www.esmap.cn'>易景空间官方网站</a>`,
                              // 气泡框的内容,支持输入HTML代码
        closeCallBack: function () {  // 信息窗点击关闭后的回调函数
            
        },
        created: function () {        // 创建完成的回调函数
            
        }
    });
})

气泡标注相关的方法

popMarker.hide()    // 隐藏
popMarker.show()    // 显示
popMarker.toggle()  // 切换显示/隐藏
popMarker.close()   // 删除标注

// 定义位置对象
var moveToPos = {
    x: mapCoord.x,
    y: mapCoord.y,
    time: 0           // 位移动画时间，单位（秒/s）
}
popMarker.moveTo(moveToPos)  // 移动气泡标注位置

创建自己定义样式的气泡标注

map.on('loadComplete', function () {
//添加标注一定要放在地图加载完成之后才能执行，拷贝下面代码即可
    var popMarker = new esmap.ESPopMarker({
        mapCoord: {
            bid: building.id,     // *绑定到需要显示的建筑id*
            x: map.center.x,
            y: map.center.y,
            height: 4,
            fnum: 1
        },
        width: 300,               // 气泡标注宽度,class样式里添加了宽度则此属性失效
        height: 100,              // 气泡标注高度,class样式里添加了高度则此属性失效
        className: 'myPopMarker', // 自定义气泡标注的class样式
        content: `自定义样式popMarker<p>点击下方图片标注切换显示隐藏</p><div class='myPopClose'>关闭</div>`,
                                       // 气泡框的内容,支持输入HTML代码
        closeCallBack: function () {   // 信息窗点击关闭后的回调函数

        },
        created: function (e) {        // 创建完成的回调函数
            document.querySelector('.myPopClose').onclick = function () {
            // 关闭气泡标注后删除
            popMarker.close();
            // 为自定义关闭按钮绑定隐藏事件
            // popMarker.hide();
            }
        }
    });
})

/* 以下是自定义气泡标注样式 */
.myPopMarker{
    padding: 0;
    padding-right: 36px;
    background: #aaa;
    color: #fff;
    border: 1px solid #5e5e5e;
}
.myPopClose{  
    position: absolute;
    top: 0;
    right: 0;
    width: 43px;
    height: 25px;
    text-align: center;
    background-color: honeydew;
    color: #000;
    cursor: pointer;
}

参数说明:

参数	说明	类型	可选值	默认值	是否必填
mapCoord	定位点配置	Object	——	——	是
width	宽度	Number || String	——	300	否
height	高度	Number || String	——	150	否
marginTop	弹框距离地面的高度	Number || String	——	——	否
content	气泡框的内容,可以输入HTML代码	String	——	——	是
className	给气泡标注整体容器增加一个类名。在css里配置样式	String	——	——	否
updateSize	是否随三维场景缩放级别改变而改变大小	Boolean	——	false	否
maxScale	气泡最大缩放等级	Number	0-1	1	否
transformOrigin	transform位置配置	——	——	——	否
closeCallBack	信息窗点击关闭操作	Function	——	——	否
created	创建完成的回调函数	Function	——	——	否

演示图中气泡标注的鼠标长按移动事件是VIP功能