# TGAPI代码范例

**Repository Path**: tuguan/TGAPIExample

## Basic Information

- **Project Name**: TGAPI代码范例
- **Description**: 图观引擎在线体验代码范例

- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://www.tuguan.net/case/online-experience.html
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-11-18
- **Last Updated**: 2026-05-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# TGAPIExample

图观引擎在线体验代码范例仓库，集中展示 TGAPI 在场景加载、GIS 图层、模型控制、路径/连线、视频融合、流式渲染、性能测试等场景下的前端调用方式。

本项目以静态 HTML、JavaScript 示例为主，适合作为 API 学习、功能验证和二次开发参考。

## 项目特点

- **开箱即看**：示例页面以静态资源组织，无需复杂构建流程。
- **覆盖面广**：包含场景服务、摄像机控制、模型交互、建筑操作、GIS 加载、轨迹/关系/区域图等多类示例。
- **多版本示例**：同时保留常规场景、UE4/UE5、流式渲染、性能测试等不同类型示例。
- **便于复用**：每个示例通常按独立目录组织，包含 `index.html` 和对应业务脚本。

## 目录结构

```text
TGAPIExample/
├── index.html              # 入口提示页
├── css/                    # 公共样式
├── image/                  # 示例图片、图标、贴图等静态资源
├── js/                     # TGAPI SDK、插件和环境配置
│   ├── TGApp.min.js
│   ├── TGApp.module.min.js
│   ├── config.js
│   ├── config4.js
│   └── plugins/
├── lib/                    # 第三方前端依赖，如 Vue、Axios、Element UI 等
├── json/                   # 示例数据文件
├── scene/                  # 常规场景示例
├── scene4/                 # UE4 相关场景示例
├── streaming/              # 流式渲染示例
├── streaming4/             # UE4/UE5 流式渲染示例
├── StreamConstruction/     # 流式构建相关示例
├── performance/            # 性能测试示例
└── js-performance/         # JavaScript 性能测试示例
```

## 快速开始

### 1. 克隆代码

```bash
git clone https://gitee.com/tuguan/TGAPIExample.git
cd TGAPIExample
```

### 2. 启动本地静态服务

推荐使用本地 HTTP 服务访问，避免浏览器直接打开本地文件时出现跨域或资源加载限制。

任选一种方式：

```bash
# Python 3
python3 -m http.server 8080
```

或：

```bash
# Node.js，需要已安装 npx
npx serve .
```

### 3. 访问示例页面

启动服务后，在浏览器中访问对应示例目录，例如：

```text
http://localhost:8080/scene/加载场景服务/
http://localhost:8080/scene/摄像机-漫游/
http://localhost:8080/streaming/加载场景服务/
```

> 根目录 `index.html` 仅为提示页，实际示例请进入具体功能目录查看。

## 配置说明

示例运行依赖 `js/` 目录下的配置文件：

- `js/config.js`：常规场景与流式服务配置。
- `js/config4.js`：UE4/UE5 相关示例配置。
- `js/config-dev.js`、`js/config4-dev.js`：开发或测试环境配置。

如需切换服务地址、场景 Token 或数据源，请优先检查示例页面引用的是哪个配置文件，再修改对应配置项。

> 注意：配置文件中可能包含示例环境地址和访问凭据。生产项目中请避免将真实密钥、私有地址或敏感信息提交到公开仓库。

## 示例分类

### 场景与摄像机

- 加载场景服务
- 场景服务切换
- 摄像机聚焦、旋转、漫游、游历
- 镜头跟随模型

### 模型与建筑

- 模型对象点击、弹窗、页面切换
- 模型关节控制
- 模型动画控制
- 建筑高亮、拆解、剖分、房间/楼层操作

### GIS 与数据图层

- WMTS/TMS/3DTile 加载
- 地标图、气泡图、区域图、栅格图
- 全国/全球数据可视化示例

### 路径、连线与关系图

- 标准线、直角线、矢量线、模型线、平面线
- 路径样式枚举
- 网络拓扑、网络攻击、通信关系示例

### 视频融合与流式渲染

- 视频融合对象获取
- 视频融合综合应用
- 流式场景加载与控制
- 端流切换相关示例

### 性能测试

- 模型轨迹图连线性能
- 模型地标图性能
- JavaScript 性能测试页面

## 开发与调试建议

1. **先定位示例目录**：每个功能示例通常在独立目录下，入口为 `index.html`。
2. **查看脚本引用**：打开示例页面，确认引用的 SDK、插件和配置文件。
3. **检查浏览器控制台**：资源加载失败、Token 失效、跨域、接口异常等问题通常会在控制台体现。
4. **使用本地 HTTP 服务**：不要直接通过 `file://` 打开示例页面。
5. **保持示例独立**：新增示例建议单独建目录，避免影响已有示例。

## 新增示例规范

建议按以下结构新增示例：

```text
scene/示例名称/
├── index.html
└── main.js
```

命名建议：

- 目录名使用清晰的中文功能描述。
- 业务脚本优先使用 `main.js`，复杂示例可按功能拆分。
- 公共资源放入 `css/`、`image/`、`json/` 或 `lib/`，避免重复拷贝。

## 常见问题

### 页面打开后没有效果？

请检查：

- 是否通过 HTTP 服务访问页面。
- 示例引用的配置文件是否正确。
- 服务地址、Token 或场景资源是否可用。
- 浏览器控制台是否有资源加载或接口错误。

### 浏览器提示跨域？

请使用本地静态服务启动项目，并确认目标服务已允许当前访问来源。

### 示例中的场景无法加载？

可能原因包括服务不可达、Token 失效、网络环境受限或配置文件引用错误。建议先确认 `js/config*.js` 中对应配置，再查看浏览器 Network 面板。

## 贡献指南

1. Fork 本仓库。
2. 基于最新主分支创建功能分支。
3. 按示例规范新增或修改代码。
4. 本地验证示例页面可正常访问。
5. 提交 Pull Request，并说明变更内容和验证方式。

## 许可证

本项目遵循仓库根目录中的 [LICENSE](./LICENSE) 文件。