TE二次开发中如何实现对象的弹出气泡

发布时间：2022-01-13 16:59:47 作者：小新
来源：亿速云阅读：179

# TE二次开发中如何实现对象的弹出气泡

## 引言

在三维地理信息系统（如Skyline的TerraExplorer Pro）的二次开发中，**弹出气泡（InfoBubble）**是实现对象信息交互展示的重要功能。本文将详细介绍在TE（TerraExplorer）平台中通过API实现对象气泡弹窗的方法，涵盖基础实现、样式定制和交互优化三个核心环节。

---

## 一、基础实现步骤

### 1. 创建气泡对象
TE SDK通过`ISGWorld.Creator`接口创建气泡，核心代码如下：

```javascript
var bubble = SGWorld.Creator.CreateInfoBubble(
    "Bubble1",       // 气泡ID
    "标题",          // 标题文本
    "内容正文",       // 内容HTML
    0, 0, 0,         // 经纬度坐标（需替换为实际值）
    true             // 是否可见
);

2. 关联到三维对象

可通过IAttachment接口将气泡绑定到模型/矢量对象：

var obj = SGWorld.ProjectTree.FindItem("MyObjectID");
obj.Attachment = bubble;

3. 触发显示控制

通过事件监听实现点击触发：

SGWorld.OnLButtonClicked += (objectId) => {
    if(objectId == "MyObjectID") {
        bubble.Visible = true;
    }
};

二、气泡样式深度定制

1. HTML内容增强

支持完整的HTML+CSS样式定义：

var htmlContent = `
<div style="width:300px;background:linear-gradient(#f9f9f9,#eee);border:1px solid #ccc">
    <h3 style="color:#2b5fd9">设备详情</h3>
    <table>
        <tr><td>状态</td><td style="color:${statusColor}">${statusText}</td></tr>
    </table>
</div>`;

2. 动态数据绑定

结合实时数据更新：

function updateBubble(data) {
    bubble.Text = generateDynamicHTML(data);
    bubble.Position = new Position(data.lon, data.lat);
}

3. 高级样式参数

通过IInfoBubble接口设置：

bubble.Width = 400;          // 像素宽度
bubble.OffsetX = 20;         // 水平偏移
bubble.CloseButton = false;  // 禁用关闭按钮

三、交互优化实践

1. 智能位置避让

根据视角自动调整位置：

var camera = SGWorld.Navigator.GetCamera();
if(camera.Tilt > 45) {
    bubble.OffsetY = -100; // 俯视时下移
}

2. 多气泡管理策略

实现气泡堆栈管理：

var activeBubbles = [];

function showBubble(bubble) {
    activeBubbles.forEach(b => b.Visible = false);
    bubble.Visible = true;
    activeBubbles.push(bubble);
}

3. 移动端适配方案

添加触摸事件支持：

SGWorld.OnObjectSelected += (objectId) => {
    if(isMobileDevice) {
        showBubbleForObject(objectId);
    }
};

四、常见问题解决方案

气泡不显示检查项：
- 坐标是否在可视范围内
- 父对象可见性状态
- 是否被其他UI元素遮挡
性能优化建议：
- 对频繁更新的气泡启用Freeze()方法
- 使用轻量级HTML结构

跨版本兼容：

if(SGWorld.Version > 6.5) {
   bubble.UseNewRenderEngine = true;
}

结语

通过TE SDK的IInfoBubble接口，开发者可以实现从基础信息展示到复杂交互的全套气泡功能。建议在实际项目中结合PositionController和HTML5技术进行扩展，同时注意在大量使用时做好对象生命周期管理。官方API文档中SGWorld.Creator和IAttachment章节提供了更多高级用法参考。 “`

注：本文代码示例基于TE 7.x版本SDK，实际开发时需根据具体版本调整接口调用方式。建议通过SGWorld.Debug.Trace()方法进行调试输出。