3.12 ESMapV数据接口交互

数据接口管理模块 通过建立设置资源的数据源, 支持通过固定参数与回调参数还有全局参数进行配置动态请求参数

动态参数请求并将返回内容缓存至全局数据中(登录案例 解决登录后token设为全局变量 让其他接口参数使用)

1. 打开又上角孪生体管理下拉中数据接口管理
2. 弹窗左侧中选择添加进行新增数据接口数据
3. 优先配置简单静态数据如 接口名称,请求方式，接口路径
4. 配置parmas body和header 访问时的请求参数 在参数值右侧 设置按钮中可以获取场景元素中当前数据 与图层中被选中内容数据 还有全局设定的数据
5. 下方预览:将预览访问接口时全部内容
6. 返回响应:将预览测试运行后该对应接口返回的全部内容
7. 后置操作:将运行缓存当前对应接口所对应的内容会将内容缓存到全局数据 当无法接受对应内容时将返回错误



(后置操作设置为全局数据)



(调用全局数据)

通过数据接口应用图表与静态数据应用图表

打开接口管理 添加接口模板 配置接口路径和参数 与名称等基础信息

1. 图表数据返回路径（样例数据） https://www.esmap.cn/esmapv/plug-in/libData/echart2.json

添加基础模板图表柱形图并配置数据

1. 选择数据绑定
2. 选择接口数据
3. 接口选择 已添加的接口模板
4. 连接测试 确认接口传输数据是否转换正确达到预期效果
5. 根据接口数据进行数据映射更新

添加基础模板图表饼图并配置静态数据

1. 选择数据绑定
2. 配置静态数据

接口数据绑定列表组件

添加内嵌气泡列表组件

• 点击左侧菜单栏的页面组件并选中高阶组件。
• 点击内嵌气泡列表模式拖动到画布的对应位置。

添加气泡配饰

• 点击头部菜单栏选中气泡配置并点击添加气泡。
• 选择气泡模板并任意挑选一个模板

编辑气泡配饰

• 点击左侧菜单栏分别选中文本组件和图片组件拖拽到气泡配饰的对应位置。

编辑气泡配饰里的文本组件内容

• 点击选中“出发”文本组件，并点击右侧菜单栏的数据绑定。
• 选择上游数据并创建对应过滤器筛选对应的值。
• 在数据映射区域绑定过滤器筛选的值。
• 同理配置“到达”文本组件的数据绑定

页面列表组件绑定气泡配饰

• 点击头部菜单回到页面列表并选中内嵌气泡列表组件。
• 点击右侧菜单的选择气泡页面选中刚创建的气泡配饰。

内嵌气泡列表组件绑定数据

• 点击选中内嵌气泡列表组件。
• 在右侧菜单中选择接口数据并选择需要对接的接口。

将内嵌气泡列表组件添加到蓝图

• 点击选中内嵌气泡列表组件
• 右键菜单点击添加到蓝图

蓝图配置流程

• 点击左上角 面板 | 蓝图 按钮中选择蓝图。
• 可以看到画布上已经存在了刚添加的内嵌气泡列表组件
• 如同连接大屏页面事件监听和内嵌气泡列表组件，实现合适的时机渲染内嵌气泡列表组件

• 回到面板可以看到内嵌气泡列表组件已经正确加载了接口列表数据

接口数据绑定列表组件

添加内嵌气泡列表组件

• 点击左侧菜单栏的页面组件并选中高阶组件。
• 点击内嵌气泡列表模式拖动到画布的对应位置。

添加气泡配饰

• 点击头部菜单栏选中气泡配置并点击添加气泡。
• 选择气泡模板并任意挑选一个模板

编辑气泡配饰

• 点击左侧菜单栏分别选中文本组件和图片组件拖拽到气泡配饰的对应位置。

编辑气泡配饰里的文本组件内容

• 点击选中“出发”文本组件，并点击右侧菜单栏的数据绑定。
• 选择上游数据并创建对应过滤器筛选对应的值。
• 在数据映射区域绑定过滤器筛选的值。
• 同理配置“到达”文本组件的数据绑定

页面列表组件绑定气泡配饰

• 点击头部菜单回到页面列表并选中内嵌气泡列表组件。
• 点击右侧菜单的选择气泡页面选中刚创建的气泡配饰。

内嵌气泡列表组件绑定数据

• 点击选中内嵌气泡列表组件。
• 在右侧菜单中选择接口数据并选择需要对接的接口。

将内嵌气泡列表组件添加到蓝图

• 点击选中内嵌气泡列表组件
• 右键菜单点击添加到蓝图

蓝图配置流程

• 点击左上角 面板 | 蓝图 按钮中选择蓝图。
• 可以看到画布上已经存在了刚添加的内嵌气泡列表组件
• 如同连接大屏页面事件监听和内嵌气泡列表组件，实现合适的时机渲染内嵌气泡列表组件

• 回到面板可以看到内嵌气泡列表组件已经正确加载了接口列表数据