# 开箱即用的 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 | 错误信息 | 错误时 触发的事件 |