# 开箱即用的 Vue 组件

如果前端使用 Vue 框架,那么可以直接使用预封装的 Vue 组件来帮助加速开发。

# 导入数据的组件

# 安装

$ npm install -S @geohey/heycloud-vue --registry http://registry.geohey.com/npm

# 使用

# 引入

import {
  VdatasetImporter, //矢量数据集
  IdatasetImporter, //影像数据集
  CdatasetImporter, //普通数据集
} from '@geohey/heycloud-vue';

# 矢量数据集导入组件

<VdatasetImporter
  :resetAfterFinish="false"
  baseUrl="heycloud/api/"
  :requestHeaders="{'x-heycloud-admin-session': 'xxxxx'}"
  @finish="onFinish"
  @imported="onImported"
  style="width: 300px; height: 300px; margin-top: 300px;"
></VdatasetImporter>

# 影像数据导入组件

<IdatasetImporter
  :resetAfterFinish="false"
  baseUrl="heycloud/api/"
  :requestHeaders="{'x-heycloud-admin-session': 'xxxxx'}"
  @finish="onFinish"
  @imported="onImported"
  idatasetId="xxxxxxxx"
  style="width: 300px; height: 300px; margin-top: 300px;"
></IdatasetImporter>

# 普通数据集导入组件

<CdatasetImporter
  :resetAfterFinish="false"
  baseUrl="heycloud/api/"
  :requestHeaders="{'x-heycloud-admin-session': 'xxxxx'}"
  @finish="onFinish"
  @imported="onImported"
  style="width: 300px; height: 300px; margin-top: 300px;"
></CdatasetImporter>

# 属性

参数 类型 是否必选 默认值 说明
resetAfterFinish Boolean false 是否在完成后自动返回初始界面
baseUrl String - HeyCloud API 的地址
requestHeaders Object - 请求头
idatasetId String - 影像数据上传组件专属 需要指定 影像数据集 ID

# 事件

事件名称 回调参数 说明
imported 导入请求成功的返回值 每一条数据 导入成功时 触发的事件
finish 所有数据的导入请求成功的返回值 所有数据上传成功时 触发的事件
error 错误信息 错误时 触发的事件