2.0.8 • Published 3 years ago
real-scene-ts
Project setup
npm install real-scene-ts
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Use
main文件引入
import RealScene from 'real-scene-ts'
import 'real-scene-ts/lib/real-scene-ts.css'
Vue.use(RealScene)
Input Attributes
| 参数 | 说明 | 类型 | 可选择 | 默认值 |
|---|
| serviceUrl | 实景图片服务地址 | string | - | - |
| params | 外部传入参数，根据桩号或者坐标定位实景图片位置；根据路线数据的id或者时间(注意格式：xxxx-xx-xx)定位下拉选择框中的数据；lxbm和sxxfx为必选 | object | 通过桩号定位：params: { id: 'xxx', date: 'XXXX-XX-XX', zh: xxx, lxbm: xxx, sxxfx: xxx}通过坐标定位：params: { id: 'xxx', date: 'XXXX-XX-XX', coordinate: x, y, lxbm: xxx, sxxfx: xxx} | - |
| routeSelect | 显示路线选择框 | boolean | - | false |
| zhSearch | 显示根据桩号定位 | boolean | - | false |
| otherComp | 显示其他(改变图片比例、改变播放速度、显示实景对比、显示收藏)功能 | boolean | - | false |
| playBtn | 显示播放按钮 | boolean | - | true |
| sideBtn | 显示侧别按钮 | boolean | - | true |
| title | 修改标题显示文字 | string | - | 示例：【G60 沪昆高速 (上行) K656+121】 拍摄时间：2020-04-08 14:33:54.816 |
| imageType | 显示实景图片的分辨率类型 | number | 1(高清) / 2(压缩) | 2 |
Input Events
| 事件名称 | 说明 | 回调参数 |
|---|
| handleimagechange | 切换实景图片后触发 | 当前路线和实景图片数据的组合对象（value:object） |
Input Methods
| 方法名 | 说明 | 参数 |
|---|
| playStart | 控制播放开始 | - |
| playStop | 控制播放结束 | - |
| playLast | 控制播放上一张 | - |
| playNext | 控制播放下一张 | - |
| changePlaySpeed | 控制播放速度 | 0（快）、1（正常）、2（慢） |
| changeImageScale | 控制图片缩放比例 | 0（100%）、1（1:1） |
| fullImage | 开启/关闭图片铺满(只保留图片显示) | - |
| handleChangeSide | 切换摄像头方法 | 1：前方、3：左侧、4：右侧 |
Address
地址